Twig templating - group project

Posted on: Wed, 10/10/2018 - 10:18 By: sacha

Initial Setup

If this is not done, you will need to add the following code to your ‘development.services.yml’ file:
---
twig.config:
   debug: true
   auto_reload: true
   cache: false
---

asdf


So that it looks like this, the spacing is important for the yml config.

Then in your settings.local.php file you need this code:

---
$settings['container_yamls'][] = DRUPAL_ROOT . '/sites/development.services.yml';
---

On its own line then you need to clear the cache. If you inspect elements on the page you should now see Twig suggestions in the HTML markup.

Debugging in Chrome

Chrome by default will cache any files for a website so you will need to disable or clear that cache. You can easily do that with hard refresh by using Ctrl+F5 or open the dev tools with F12 go to the ‘Network’ tab and check ‘Disable Cache’, this will disable caches whilst your dev tools are open, so if you just refresh the page you should see changes. Although Drupal caching may still be a problem.

Disable Drupal caches

Under ‘/admin/config/development/performance’ make sure that aggregation of CSS and JS files are unticked. This should also be in your settings.local.php, for the purpose of development we are doing it this way, however on a live site you should keep aggregation enabled.

In your settings.local.php make sure you have these lines:
---
$config['system.performance']['css']['preprocess'] = FALSE;
$config['system.performance']['js']['preprocess'] = FALSE;

---

Clear your caches.

Twig templating

With the twig: debug: true option set before, inside the inspector (F12 in Chrome) it’ll show which Twig templates are being used for various parts of the website, inspect the paragraph to see. You can also see suggested names in order to override the templates above your field.

w

The suggestions are what will override this specific paragraph, we want to use the most generic name possible first for our specific paragraph so we will use paragraph--image-and-text.html.twig .

Templates

Go to web/themes/custom/nexus_custom

This is our custom sub-theme for the Nexus contrib theme. In the style folder you’ll see a stylesheet.css you can add your CSS code in this one. We expect merge conflicts but that is fine.

Then in the templates folder you will see a paragraphs folder in which you can create your files. So we will create a file titled paragraph--image-and-text.html.twig which will contain our HTML markup. Here you can add your classes and render your text.

Recommended class name is paragraph--paragraphname so that we all remain consistent.

Twig operators

You can learn more about Twig here on Drupalize.me.

The official Twig docs are here, Drupal 8 is using Twig 1.x currently.

Key operators you will use are {{ }} and {% %}.

{{ }} is used for rendering, you can pass it filters and variables.

{% %} is used for functions, this is what you will use for your if conditionals or loops.

Example

{% if content.field_body[0] %} <span> Checked </span> {% endif %}

This line checks if there is content within the body field and if there is it will also render that <span> element, otherwise it will not.

Rendering fields

You have to manually tell Drupal to render the fields otherwise they will not show, the fields also have to be enabled in the Display settings for the entity.

Example

We want to render the Body field on the blockquote paragraph, we will be using the machine name ‘field_body’.

To render the field we simply do {{ content.field_body[0] }} .

The ‘content.’ part tells Twig from which object to pull the field, in this case it’s the content object from our paragraphs, then we say what field we want and the [0] specifies the index in the array as everything is returned in an array, if a field could have multiple values (i.e an ‘Unlimited’ field you could specify which item you want).