Creating modules (the easy way)

Rating

'The easy way' uses existing code.. You can make a nice working Drupal 8 module in a few hours...

On the net there are numerous interesting scripts with copyright that makes it possible to continue working with these scripts, and even to make some Drupal 8 modules.

All of the creators of these codes ask to be mentioned. This is definitely something we always do. So we use existing code and then enter it into our Drupal structure .. Picture galleries, calendars, text effects ... It exists ... but not always for Drupal 8 ...

General

The original code is usually a combination of HTML, CSS and Javascript. In HTML you see for example the tag to an image on the server. Someone who want to use such a page must write in the code itself and make adjustments in order to work with other images. Logical but not the CMS (Drupal) approach. 

Question now is how we can combine these fields with the original HTML code. There's more ... sometimes we also use variables ... like how many rows and columns you want in an image grid. What start and end dates you have for an activity to create a calendar ...? We need fields for that. The principle is clear .. Make that the user does not have to work in the code and that he / she can use the field structure known in Drupal.

Drupal fields can be read using PHP. The values ​​obtained are then in turn to insert in the right place, again with PHP, HTML page in the original code. Where the images are printed in the above, so does my php code that dynamically generates the images. Also, CSS and JS can be rewritten using this technique.

 

Method

1) Check the original script on its quality. Multi-browser, multi-device, ... You can do this by taking their demos and test.

2) Download the code and related files and folders. Put latter as third party in the libraries folder.

3) Copy and paste the HTML code in a text field of a new content type. Use the php text filter. Https://www.drupal.org/project/php ). We need this later. Check references to the files. At this stage you can see if your theme does not interfere with the script. If it interferes you can use the module 'Clever theme switcher, and set you want to use another theme for this content type.

4) Look at the HTML code that needs to be replaced dynamically. Images, variables, ... Make the necessary fields to it.

5) Add a php page to your page that reads values ​​of your fields.

6) Replace the static HTML content through your php values. Do this in HTML, CSS and JS if necessary.

7) Show the php code for the user to input form your content type. Hide everything but the php code to display.

8) Create a module with Features. Also foresee a compressed file for a possible third party.

worked example

We make this module: Animated Responsive Image Grid ( See module discussion )

We review and analyze the original code and decide to create these fields. These fields will bring the variables used in the HTML code. Note that I'm only using new fields. So it doen conflict with other settings of other modules.

It looks like this:

The main field is the script. I made a special text filter. 


We start by putting a php section above html. The first part collects the values ​​of the fields of the node. You can eg determine the width of the grid, the number of rows and columns. The php reads the values ​​of these fields. 

In the second part we read the images from a specific imagefield in a specific content type. For an image field is more complicated with a matrix (array). An image field can also be plural. Therefore, a loop is uesed. Finally, all data are stored in variables. These will then be inserted at the appropriate location between the HTML code. We also remember the node URL for each image as we want to link the image tot the node.

<?php

$ eigennid = \ Drupal :: route match () -> getRawParameter ( 'node'); 
$ eigennode = \ Drupal :: entityTypeManager () -> getStorage ( 'node') -> load ($ eigennid);

$inhoudstype= $eigennode->get('field_anigrid_target_content_typ')->getString();  
$afbeeldingsveld= $eigennode->get('field_anigrid_target_image_field')->getString();  
$breedte= $eigennode->get('field_animated_grid_width')->getString();  
$rijen=$eigennode->get('field_animated_grid_rows')->getString();
$kolommen=$eigennode->get('field_animated_grid_columns')->getString();
$link=$eigennode->get('field_animated_grid_link')->getString();
if ($link==0){
$link="true";
}
else{
$link="false";
}

use Drupal\file\Entity\File;
use Drupal\image\Entity\ImageStyle;

$node_storage = \Drupal::entityTypeManager()->getStorage('node');
$file_storage = \Drupal::entityTypeManager()->getStorage('file');

$nids = \Drupal::entityQuery('node')
         ->condition('type', $inhoudstype)
         ->condition('status', 1)
         ->execute();
        
$nodes = \Drupal::entityTypeManager()->getStorage('node')->loadMultiple($nids);
$imgcount=0;
foreach ($nids as $nid) {

$node = $node_storage->load($nid);
$node_url = $node->toUrl()->toString();
$node_title= $node->get('title')->getString();
$terms = $node->get($afbeeldingsveld)->getValue();


$x=0;
foreach ($terms as $term){

$ image_alt = $ node -> $ image field [$ x] -> alt; 
$ alt [$ imgcount] = $ image_alt; 
// $ IMAGE_TITLE = $ node -> $ image field [$ x] -> title; 
fid = $ $ node-> get ($ image field) [$ x] -> EN- TITY> FID> value; 
$ file = File :: load ($ fid); 
image_uri $ = $ file-> getFileUri (); 
$ style = Style Image :: load (anigrid_square);

$url= $style->buildUrl($image_uri);
$relative_url = file_url_transform_relative($url);
$img_url[$imgcount]=$relative_url;
$img_link[$imgcount]=$node_url;
 

$x++;
$imgcount++;
}
}

?>    

Now we look in the code where we should place our Drupal data.

So you see that this part was created for dynamic images. I loop for each image that I have collected and I rewrite it to the original code.

<div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow">
                    <img class="ri-loading-image" src="/libraries/AnimatedResponsiveImageGrid/images/loading.gif"/>
                    <ul>
<?php
$y=0;
while ($y<$imgcount){
echo "<li><a href='".$img_link[$y]."'><img src='".$img_url[$y]."'/></a></li>\n";

$y++;
}
?>
                    
                    </ul>
                </div>

 

In javascript you can use php too. Here you see that I insert the number of rows and columns that was inserted into the fields by the user.

$ ( '# Ri-grid') .gridrotator ({ 
                    rows: <? Php echo rows $?>, 
                    Columns: <? Php echo columns $?>, 
                    MaxStep: 2, 
                    interval: 2000, 
                    w1024: { 
                        rows: 3, 
                        columns: 6 
                    },

 

Finally, you can also adjust CSS to your needs. I took a portion of the CSS from the third party and put it on the page. For example, the width can be inserted dynamically.

 <style type="text/css">
/* Grid wrapper sizes */
.ri-grid-size-1{
    width: <?php echo $breedte?>%;
}
.ri-grid-size-2{
    width: 100%;
}
.ri-grid-size-3{
    width: 100%;
    margin-top: 0px;
}
</style>

The module

Put in your content type, the script as default. Each user will then use the code automatically for new nodes. Check this field in the form. A user should not see the code.

Use Features to create module ... Collect all you need.

 

Don't forget the text format.