Tips and Tricks for Twig TTT

Tips and Tricks for Twig TTT

Tips and Tricks for Drupal 8 - Theme Development

Drupal Developer @ Chapter Three

Israel Morales.

http://github.com/isramv

http://twitter.com/isramv

whoami

Useful links

Tips and Tricks

I'm been theming in Drupal 8 for almost 2 months everyday 5+ hours @ day.

 

There is some good stuff that I have learn while building d8_materialize I started this when D8 was in beta.

 

And there is some good stuff that I learn building ablog >

Demo ablog

Show twig information:

Disable all the cache (All of it!):

 

https://www.chapterthree.com/blog/how-turn-drupal-8-caching

base twig

used twig.

Did you notice the x instead of the *

kint().

is how you print stuff and debug variables. 

Usage:

{{ kint(content) }}

Install:

https://www.drupal.org/project/devel

{{ kint(_context) }}

For me the most useful, it shows you all the arrays, objects and variables that are passed to your template.

{{ content.field_user_reference }}

This prints the render array of the user reference.

When overriding twig templates you can arrange your folder however you want.

this arrangement makes more sense to me.  ---->

@core Classy

@My theme

speaking of views...

views does not show template suggestions but you can use it.

views-view--machine-name.html.twig

Loading libraries inside twig templates.

1.- Declare the library

2.- Use the library

MYTHEME.libraries.yml

views_exposed_filters:
  version: 1
  js:
    js/custom/view-exposed-filters.js: {}
{{ attach_library('ixia/views_exposed_filters') }}
<div{{ attributes.addClass(classes) }}>
  {{ title_prefix }}
  {% if title %}
    {{ title }}
  {% endif %}
  {{ title_suffix }}
</div>

Twig Snipets

Accessing strings

Example:

twig access:

{{ directory }}

Accessing arrays

Example:

twig access:

{{ elements.content.field_hero_background_image }}

Accessing arrays with hash (#)

Example:

twig access:

{{ content.field_hero_background_image['#title'] }}

arrays with # need to be accessed with the brackets

Accessing indexed arrays.

Example:

twig access:

{{ content.field_hero_background_image[1]['#title'] }}

[0]['#title']

Accessing Objects.

Example:

twig access:

{{ content['#block_content'] }} << object

Accessing Objects 2

Example:

twig access:

{{ content['#block_content'].get('field_hero_background_image').getValue() }} 

^^^^ this will return an array. ^^^^^

Accessing Objects 3

{{ content['#block_content'].get('field_hero_background_image').getValue()[0]['alt'] }} 

^^^^ this will return: "Hombre de fuego hero banner". ^^^^^

{{ content['#block_content'].get('field_hero_background_image').getValue()[1]['alt'] }} 

^^^^ this will return: "Hero SF Banner". ^^^^^

count array

{% set number_of_files = content.field_files['#items'].getIterator() | length %}

Get display name of author in articles.

{% set author_name_string = node.get('field_author').get(0).entity.getDisplayName() %}

Get display name of author in articles.

{% set author_name_string = node.get('field_author').get(0).entity.getDisplayName() %}

Changing the date format in TWIG

{% trans %} is for translate

 

keep the date filter out of the trans, if you keep it inside is going to fail

Sitebuilding

My recommendation is:

 

Do site building first, get your values in the format that you want from the view modes.

 

It is hard to do it programmatically and with preprocess.

When working with entity referenced fields.

Use https://www.drupal.org/project/views_field_formatter

 

Use views as display mode, create a view and pass a contextual param.

Example: (1/3)

Example: (2/3)

Example: (3/3)

Theme settings.

theme settings reminds me Drupal 7, because is the same thing.

 

create a file named theme-settings.php inside your theme.

Theme settings.

/**
 * Implements hook_form_system_theme_settings_alter().
 */

Printing contextual links.

the contextual links are located here:

 {{ title_suffix }}

thank you.

Made with Slides.com