Drupal 8 Notes

Drush - a cmd line utility to manage drupal

To clear cache

druch cr 
# or 
drush cache-rebuild

Drupal 8 guide - https://sqndr.github.io/d8-theming-guide/index.html https://www.drupal.org/docs/8/theming

Disable cache for development

https://www.drupal.org/node/2598914

Summary of steps -

  1. cp sites/example.settings.local.php sites/default/settings.local.php
  2. Open settings.php file in sites/default and uncomment these lines -
if (file_exists($app_root . '/' . $site_path . '/settings.local.php')) {
  include $app_root . '/' . $site_path . '/settings.local.php';
}
  1. Open settings.local.php and make sure development.services.yml is enabled.
$settings['container_yamls'][] = DRUPAL_ROOT . '/sites/development.services.yml';
  1. In settings.local.php change the following to be TRUE if you want to work with enabled css- and js-aggregation:

$config['system.performance']['css']['preprocess'] = FALSE; $config['system.performance']['js']['preprocess'] = FALSE;

  1. Uncomment these lines in settings.local.php to disable the render cache and disable dynamic page cache:

$settings['cache']['bins']['render'] = 'cache.backend.null'; $settings['cache']['bins']['dynamicpagecache'] = 'cache.backend.null'; $settings['cache']['bins']['page'] = 'cache.backend.null';

  1. Open development.services.yml in the sites folder and add the following block to disable the twig cache:

parameters:   twig.config:     debug: true     auto_reload: true

Making the above changes will also show file name suggestions in the developer tools. Note: this will only disable cache for twig files. to see css changes, you'd still need to clear cache manually.

Modules to activate in a new D8 installation

  • Update Manager
  • pathauto
  • ctools
  • token

Templates

Template heirarchy -

html.html.twig
    page.html.twig
        region.html.twig (e.g. header, content, sidebar, footer)
            block.html.twig
            node.html.twig
            comment.html.twig

Default templates location - /core/modules/system/templates

Twig

comments -> {# … #} print -> {{ … }} conditional logic, loops, assigning values -> {% … %}

{# Set a variable #}
{% set name = 'Drupal' %}
<p>welcome to {{ name }}</p>

{{ dump(name) }}
{{ dump(name, is_front) }}
{{ dump(page|keys) }}

filters:
{{ name|upper }}
{% filter upper %} 
    {{name}}
{% endfilter %}

conditional logic:
{% if x == true %}
    <p>hello</p>
{% endif %}

loop:
{% for i in 0 ..10 %}
    <p>{{i}}</p>
{% endfor %}

{# Conditional logic #}
{% set offline = false %}

{% if offline == true %}
  <p>Website is in maintenance mode.</p>
{% endif %}

Theme file

*.theme

  1. Preprocessors - function calls specific to a template
  2. Hooks - function calls to hook into drupal API, that allow us to alter variables and override the default implementation
// this will add hellllo to classes
function kite_preprocess_html(&$variables) {
  $variables['attributes']['class'][] = 'hellllo';
}

first time setup

  • install pathauto, ctools, token modules

to set image sizes go to Administration > Configuration > Media > Image Styles create two more image sizes

  1. XL 1024 x 768
  2. Original  go to Structure > content types > Article > Manage Displays  to set organize the article nodes

Attaching a library a specific page

two ways to do it - first define it in .libraries.yml -

# Slick
slick:
  version: VERSION
  css:
    theme:
      vendor/slick/slick.css: {}
  js:
    vendor/slick/slick.min.js: {}
  dependencies:
    - core/jquery
  1. use {{ attach_library('example/slick') }} in template file
  2. use preprocess functions in the *.theme file e.g.
function example_preprocess_page(&$variables) {
    if ($variables['is_front']) {
        $variables['#attached']['library'][] = 'example/slick';
    }
}

Core Templates

core/modules/system/templatescore/modules/node/templatescore/modules/comment/templatescore/modules/block/templates

.info files

The base theme key is a required parameter set base theme to classy - it would provide well structured classes already added to the html tags. set base theme to stable - if you want complete customisation i.e. not even css classes added to your theme. In D8 if no base theme is specified, then stable is set as base theme by default, but going forward in D9 this won't happen.

to override library from base theme, use libraries-override

Regions

page_top and page_bottom are hidden regions. they are not displayed in the blocks administration page. hidden regions act as a placeholder where modules or themes can programmatically add markup. e.g. to add google analytics code

when priting regions in your templates that are not guaranteed to have content, it's a good idea to wrap them in some conditional logic. see -

{% if page.sidebar_first %}
    <aside>
        {{ page.sidebar_first }}
    </aside>
{% endif %}

Debugging tools

Devel

it provides Kint now instead of using {{ dump() }}, you can use {{ kint() }} and {{ kint(var) }} for variable inspection.

Others - Twig Vardumper, Xdebug

Hook names

determining the hook names of template -  {hook}--{optional context}.html.twig

Add classes in twig templates

e.g. -

{% set classes = ['landing'] %}

<div{{ attributes.addClass(classes) }}>
    {{ content }}
</div>

Random Twig Snippets

{% if items|length > 1 %}
  <div class="post-image">
     <div class="owl-carousel">
       {% for item in items %}
         <div class="img-thumbnail">
           {{ item.content }}
         </div>
       {% endfor %}
     </div>
  </div>
{% else %}
  <div class="single-post-image post-image">
     {% for item in items %}
       <div class="img-thumbnail">{{ item.content }}</div>
     {% endfor %}
  </div>
{% endif %}

Format date/time

<div class="post-date">
  <span class="day">{{ node.createdtime|date('d') }}</span>
  <span class="month">{{ node.createdtime|date('M') }}</span>
</div>
<ul>
  {% for item in items %}
    <li{{ item.attributes.addClass('field-item') }}>
         {{ item.content }}
    </li>
  {% endfor %}
</ul>
{% if page.sidebar_second and page.sidebar_first %}
  {% set col_class = 'col-md-6' %}
{% elseif page.sidebar_second or page.sidebar_first %}
  {% set col_class = 'col-md-9' %}
{% else %}
  {% set col_class = 'col-md-12' %}
{% endif %}

<div class="{{ col_class }}">
  {{ page.content }}
</div>

Views

views templates can be overriden by following format -  [base template name]--[view machine name].html.twig e.g. views-view-unformatted--categories.html.twig

the row variable can be used in views -

{% if title %}
    <h3>{{ title }}</h3>
{% endif %}

<ul class="nav nav-list primary pull-bottom">
{% for row in rows %}
    {%
    set row_classes = [
    default_row_class ? 'views-row',
    ]
    %}
    <li{{ row.attributes.addClass(row_classes) }}>
        {{ row.content }}
    </li>
{% endfor %}
</ul>

Debugging issues

check logs

lando logs

or in the drupal dashboard logs can be viewed

.theme examples

function kite_preprocess_block(&$variable) {
    $label = $variable['label'];

    switch($label) {
        case 'QUICK LINKS':
            $variable['attributes']['class'][] = "my-class";
            break;
    }
}