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