Things I Learned from the DrupalTwig Slack: Volume 1

Things I Learned from the DrupalTwig Slack: Volume 1

Things I Learned from the DrupalTwig Slack: Volume 1

Without doubt, the greatest resource for information about Drupal frontend issues is the DrupalTwig Slack. There are over 300 of the world's most well known frontend Drupal developers - Wim Leers, MortenDK, Mark Drummond, David Hernandez, and more - offering and receiving help all day every day. It's very rare that someone asks a question and doesn't receive a reply with a solution within a few minutes, or at the very least a conversation about why the issue might be hard to solve.

That said, as a free Slack we do not have the ability to search through more than 10,000 posts at a time. With that in mind, I've decided to start compiling things I've learned or have helped others to learn on the channel so we can have a record of them. So here goes:

1. How to get the value of a link field in Twig in Drupal 8

Get the value of a link field in Drupal Twig

This is definitely the question that pops up most often. You'd be forgiven for thinking you could get it by printing {{ content.field_link }} but the field_link is an array, so you need to get the correct item from the array. It's simple when you finally crack it: {{ content.field.0['#url'] }}. Thanks to mdrummond for sorting this out. You can also find info about it on Stack Overflow.

2. How to create/alter global variables

Create/Alter global variables in Drupal 8

This was a question I had when one of our developers wanted to have a destination to the current URL in the path after a form was submitted. It's handy because it creates a variable that can be printed in any template. You can do this using the MYMODULE_template_preprocess_default_variables_alter(&$variables) hook (thanks to mikeker for pointing this out to me). The code:

You can then print {{ current_path }} in any template. Which brings us to item 3.

3. Themes cannot alter global variables

Themes cannot alter global variables

I could not get the above code to work when placing it in my THEME.theme file. As it turns out, global variables can only be run from a module, not a theme. There is an issue filed to fix this. Again, thanks to mikeker for clarifying this.

4. Use Preprocess to float image/text in paragraph bundles

Use Preprocess to float image/text in paragraph bundles

If you have a paragraph bundle for image and text and want to be able to let the editors choose to float the images left or right, this comes in handy. You can also manipulate it to allow editors to choose heading types from a select list, or the width of a bounding area for example.

In the above example, we have a select list field that the editor uses to say if they want the image left or right. In other paragraph bundles we have a heading text and heading level field, so editors can easily edit the heading style if they wish. Jim Birch shows a method of doing this purely in Twig in this gist.

5. How specific can you get with preprocess functions?

how specific can you get with preprocess functions

It turns out that hook_preprocess_field() is not as specific as you can get. As Chris Shattuck shows you can preprocess inside the entity type inside the bundle. So, mytheme_preprocess_field__node__body__page will preprocess the body field inside nodes of type page.

6. Preprocess functions only affect the render array that is sent into that render array’s template, they don’t affect the render array itself.

preprocess functions only affect the render array that is sent into that render array’s template, they don’t affect the render array itself.

Preprocess only affects the render array that it is called on. For example, if you change a field setting in hook_preprocess_field, that setting will not be changed in a node template. Yes, I'm still trying to figure this one out as well.

7. How to add template suggestions for custom blocks

How to add template suggestions for custom blocks

I presumed, like with custom content types, there would automatically be template suggestions for custom block types. But no. You can add them with the following code (amend to your liking):

The above code is an edited version of Jeff Burnz's solution from Drupal.org.

8. How to add bundle class to blocks

add bundle class to blocks

As with the above, I presumed custom blocks would have a class for the block type for theming. They don't. A few of us put our heads together and quickly came up with the above, after refining the thoughts of Greg Boggs.

add bundle class to blocks

Here's the code:

I haven't checked yet to see if that only works if the block has a body field. I suspect so.

9. Views exposed form block is not part of views-view.html.twig

Views exposed form block is not part of views-view.html.twig

If you have a view with some exposed filters that are in a block, the exposed filters cannot be printed via views-view.html.twig (without doing some preprocess work first).

That's just a very small selection of some of the things I've learned and/or helped solve in the DrupalTwig Slack. You should join us to help solve more (or get answers if you are stuck).

I'm guessing there are some better ways of doing some of these things. If you know them, please leave a comment.

Comments

There is a risk in using raw variables form a render array like in {{ content.field.0['#url'] }}. When using this method, the page where this content is printed will not be aware of the caching info of 'content.field', it will not invalidate the cache when the URL changes. This is because the caching data of the field (the referenced URL in this case) is collected during rendering. If for example this URL is printed on /node/1, and is a path alias /my-node-2, the cache of /node/1 will not be invalidated when the alias changes to /your-node-2. This may lead to old content, broken links or even exposing restricted information.
A crude but effective fix is to add {% cache_helper = content.field %} to the template. This will render the field (= cache data is collected), but the result is not exposed. But frequent use of this trick is not good for performance!

Annertech's default 'Annertechie' profile image.

Add new comment

Restricted HTML

  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <h4> <h5> <h6>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.