Drupal 8 Custom Block Module Dev

Twig Template

Note that Drupal 8 currently uses Twig version 1.x, and Drupal 8.4 is slated to use Twig version 2.x. Twig 2 also requires PHP 7.

# create the templates/giphys.html.twig file

mkdir templates

touch templates/giphys.html.twig
giphys.html.twig
<div>
<form id="giphys-search" accept-charset="UTF-8">
<label for="giphys-search-text" class="visually-hidden">Search</label>
<input id="giphys-search-text" class="required" title="Enter the terms you wish to search for." type="search" value="" size="15" maxlength="128" required="required" aria-required="true" />
<input class="search-form__submit button js-form-submit form-submit" type="submit" value="Search" />
</form>
<ul class="giphys-list"></ul>
</div>

Module Libraries

CSS and JavaScript for the module is defined in a libraries YAML data file. The CSS and JavaScript assets are loaded in the order they are listed. Additionally, core jQuery is required by the module and is listed as a module dependency to ensure that it gets loaded.

Create the giphys.libraries.yml in the root of the giphys folder together with the other data files.

# create the giphys.libraries.yml file

touch giphys.libraries.yml
giphys.libraries.yml
giphys:
  version: 1.x
  css:
    theme:
      css/giphys.css: {}
  js:
    js/giphys.js: {}
  dependencies:
    - core/jquery

CSS

The CSS for our module is very simple with only a few tweaks to display the giphy API search results list as tiles. Create a new css folder and the giphys.css file as shown.

# create the css/giphys.css file

mkdir css

touch css/giphys.css
giphys.css
ul.giphys-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul.giphys-list li {
    margin-right: 5px;
    display: inline-block;
}

JavaScript

This file uses the drupalSettings object to get the Giphys module block configuration data. This data is used to make the Giphy API request when a user enters a search term. The results are parsed into html elements and injected into the unordered list element output by the twig template.

# create the js/giphys.js file

mkdir js

touch js/giphys.js
giphys.js
console.log(drupalSettings.giphys);

(function ($) {
  var $giphysList,
      giphysEndpoint,
      giphysSearchTerm;

  giphysEndpoint = drupalSettings.giphys.url + '?api_key=' + drupalSettings.giphys.secret;

  $giphysList = $('ul.giphys-list');

  $('#giphys-search').submit( function(e) {
    e.preventDefault();

    $giphysList.empty();

    giphysSearchTerm = $('#giphys-search-text').val();

    $.getJSON(giphysEndpoint + '&q=' + giphysSearchTerm).done(function(data) {
      if (data) {

        var $giphysListItem,
            giphysData = data.data,
            len = giphysData.length;

        for(var i = 0; i < len; i++) {
          $giphysListItem = '<li><img src="'+ giphysData[i].images.fixed_height_small.url +'" /></li>';
          $giphysList.append($giphysListItem);
        }
      }
    });

  });

})(jQuery);

The next page covers the modules php code.


Published by

Jim Frenette

Web Developer – views here are my own except those taken from people more clever than me.

Loading Disqus Comments ...
Loading Facebook Comments ...