Theming in Drupal 8

Preface-

  1. Implement twig template in a custom module
  2. Implement twig template in a custom form
  3. Implement twig template for an email or any general implementation using drupal_render()
  4. Creating a Theme
    1. Structure of the theme folder- here zircon is the name of the theme
    2. Files and its descriptions
      1. Themename.info.yml
      2. Create a theme_name.libraries.yml
      3. Creating a template- page.html.twig
      4. The Breakpoint module- [theme-name] or [module-name] .breakpoints.yml
  5. Modifying attributes in themename.theme file

Refer to- https://www.drupal.org/docs/8/theming-drupal-8/modifying-attributes-in-a-theme-file

Implement twig template in a custom module

Source- https://www.drupal.org/docs/8/theming/twig/create-custom-twig-templates-for-custom-module

  1. Need to create a hook_theme in .module file and register the theme or themes in a array.
  2. The theme can be called in from a controller which will pass variables/array etc.
  3. The controller will utilize service class renderer which will invoke theme and pass the variables. Like- $rendered = \Drupal::service(‘renderer’)->render($renderable);
  4. These variables can be used in the new twig theme template.

Hook_theme in .module file

function test_twig_theme($existing, $type, $theme, $path) {

 return [

   ‘my_template’ => [

     ‘variables’ => [‘test_var’ => NULL],

   ],

 ];

}

Controller file

class TestTwigController extends ControllerBase {

 public function content() {

   return [

     ‘#theme’ => ‘my_template’,

     ‘#test_var’ => $this->t(‘Test Value’),

   ];

 }

}

You can also use render service method to build the output if you need to use this as part of a different workflow in your code: –

$renderable = [

 ‘#theme’ => ‘my_template’,

 ‘#test_var’ => ‘test variable’,

];

$rendered = \Drupal::service(‘renderer’)->render($renderable);

Create a twig template – my-template.html.twig

<p>test_var: {{ test_var }}</p>

2. Implement twig template in a custom form

Source- https://makedrupaleasy.com/articles/drupal-8-how-theme-any-form-own-twig

  1. Need to create a hook_theme in .module file and register the theme or themes in a array.
  2. In controller file mention the theme variable as $form[‘#theme’]
  3. Create a twig template with the same name of your theme template
  4. Render the form elements as {{ form.emailaddress }} etc.

hook_theme() In .module file

function newslettersignup_theme($existing, $type, $theme, $path) {

 return [

   ‘contact_message_feedback_contact_form_form’ => [

     ‘render element’ => ‘form’,

   ],

 ];

}

Controller file

    $form[‘#theme’] = “contact_message_feedback_contact_form_form”;

Create a twig template- contact-message-feedback-contact-form-form.html.twig

Use form variables like below-

  <div class=”col-sm-6″>

       {{ form.name }}

       {{ form.mail }}

       {{ form.subject }}

   </div>

3. Implement twig template for an email or any general implementation using drupal_render()

Source-  http://www.tothenew.com/blog/how-to-send-html-emails-in-drupal-8/

  1. Need to create a hook_theme in .module file and register the theme or themes in a array.
  2. In the module we have a hook_mail function in which we we define drupal_render() function which takes in a array argument with key values as theme name and variable to be used in a twig file.

Hook_mail and hook_theme in .module file

    hook_mail()

     /**

      * Assign a twig template for message body

      */

     $message_theme_body = array(

       ‘#theme’ => ‘newslettersignup_notify_email’,

       ‘#message_body’ => $message_body,

      );

$message_render = drupal_render($message_theme_body);

/**

* Implements hook_theme().

*/

function newslettersignup_theme($existing, $type, $theme, $path) {

 return [

    ‘newslettersignup_notify_email’ => [

     ‘variables’ => [‘message_body’ => NULL],

    ],

 ];

}

4. Creating a Theme

  1. Structure of the theme folder- here zircon is the name of the theme

2. Files and its descriptions

  1. Themename.info.yml
  2. Create a theme_name.libraries.yml
  3. Creating a template- page.html.twig
  4. The Breakpoint module- [theme-name] or [module-name] .breakpoints.yml

  1. Themename.info.yml

Add details about the theme and regions like-

  1.      name: Zircon
  2.      type: theme
  3.      base theme: classy
  4.      description: ‘A flexible, colorable theme with many regions and a responsive, mobile-first layout.’
  5.      package: Core
  6.      core: 8.x
  7.      libraries:
  8.      – zircon/global-styling    (this will be themename/style group name in libraries.yml file)
  9.      regions:
  10.        header: ‘Header of the page’
  11.        primary_menu: ‘Primary menu’
  12.        secondary_menu: ‘Secondary menu’
  13.        main_menu: ‘Main menu’
  14.        help: ‘Help’
  15.        page_top: ‘Page top’
  16.        page_bottom: ‘Page bottom’
  17.        messages: Messages

B. Create a theme_name.libraries.yml

    global-styling:

         css:

           theme:

             css/style.css: {}    (the path convention is name of folder/file name)

             css/print.css: { media: print }

         js:

             js/scripts.js: {}

         dependencies:

         – core/drupal

         – core/jquery

Separate CSS for a page

  1. Define a css in libraries.yml file-

    Maintenance_page:

       version: VERSION

       css:

         Theme:

           css/maintenance-page.css: {}

  1. Create a file themename.theme and add a hook for the page-

        function zircon_preprocess_maintenance_page(&$variables) {

if ($variables[‘is_front’]) {

$variables[‘#attached’][‘library’][] = ’zircon/maintenance_page‘;

               }

             }

C. Creating a template- page.html.twig

The main template is page.html.twig in which you can put in all your html code and regions.

You can also create a separate html.html.twig which may contain your header and footer files.

In order to place a region use the following code-

       {% if page.sidebar %}

          {{ page.sidebar }}

     {% endif %}

Imp-     {% this is used for a statement to be evaluated %}

{{  this is used to place a variable }}

{# This will be a comment #}

Dump variables available on the page

// Print out all variables on the page.

{{ dump() }}

// Print content of the foo variable.

{{ dump(foo) }}

D. The Breakpoint module- [theme-name] or [module-name] .breakpoints.yml

This is a new cool feature in Drupal 8. Breakpoints are used to separate the resolutions (height & width) of devices so that you will have a responsive design that will change corresponding to each device being used.

Example-

    bartik.mobile:

       label: mobile

       mediaQuery: ‘(min-width: 0px)’

       weight: 0

       multipliers:

       – 1x

     bartik.narrow:

       label: narrow

       mediaQuery: ‘all and (min-width: 560px) and (max-width: 850px)’

       weight: 1

       multipliers:

       – 1x

Both comments and pings are currently closed.

Comments are closed.