Responsive images in the Emulsify (PL) theme - The easy way

When I was starting my journey with PL/Drupal 8, one of the things that gave me some headache was related to the responsive images and their implementation.

As you already know (if you read my previous article) I'm using Emulsify Drupal theme. It's an amazing theme made by the folks over at Four Kitchens.

The theme comes preloaded with a bunch of ready to use components that can be used in your work or as a good practical example. The theme developers really tried to explain many complicated things that you might be facing regarding the PatternLab. However, implementing responsive images still continues to trouble many developers.

If you take a better look at the Emulsify theme, you'll see that they already made a fully functioning PL component for responsive images. You can easily use that in your PL components, you just need to enter your own data into corresponding yml file and that's pretty much it. Sounds simple, yet there is a "but”: In order to connect their PL component with your Drupal installation, you might think that you need to replace each variable value found in responsive-image.twig with that in corresponding Drupal twig template. That would be a process that undoubtedly results in growing out grays among web developers. :)

But there is a solution to this! In situations where you are required to incorporate a component which has many variables, you should actually just leave it to Drupal to render variables in its own way. How you wonder? Simply use an already available PL component for responsive images and then use Drupal variables you obtain with tools such as Kint, Symfony var-dumper or, my all-time favorite debugging tool - xDebug, in your Drupal twig template.

Let me show you how to make your life easier.

If you have a "card" component and want to use responsive images in it, a good way to accomplish this on a Drupal site is to make a Paragraph bundle for it. In there you will probably have fields for title, responsive image (obviously), text, and maybe a link.

I will not describe every step of making PL component for this "card" component in this article because it would be too long to digest and you can analyze already made card component in Emulsify.

It's really a simple task to connect and map component pieces like title, text and link in Drupal twig template.

Next, make a Twig block around the part of the component where responsive image is placed. That way, you get more freedom to modify it in the Drupal Twig template file using embed tag (more about that here & here).

That part of code will now look something like this (change your component variable name part of variable with your own name/term):

{% block image_content %}
  {% include "@atoms/04-images/00-image/responsive-image.twig" with {
    "responsive_image_base_class": your_component_variable_name_image_base_class,
    "responsive_image_modifiers": your_component_variable_name_image_modifiers,
    "responsive_image_blockname": your_component_variable_name_image_blockname,
    "img_srcset": img_srcset|default(img_element['#attributes'].srcset),
    "img_sizes": img_sizes|default(img_element['#attributes'].sizes),
    "img_src": img_src|default(img_element['#uri']),
    "img_alt": img_alt|default(img_element['#alt']),
    "output_image_tag": "TRUE",
  } %}
{% endblock %}

 

If you find this BEM function confusing, read this article by Evan Willhite (one of the Emulsify theme creators).

And now, you can simply swap everything inside that Twig block in your Drupal template file, so it should look like this (change machine name of responsive image field with your machine name of that field):

{% block image_content %}
  {{ content.field_machine_name_of_responsive_image_field[0] }}
{% endblock %}

 

And that is pretty much it!

Now, you may ask yourself: "What if I need to change something in the responsive image itself, maybe add a class or something like that?"

If that’s the case, you can make a theme suggestion for responsive images because there is just one theme suggestion at the moment of writing this article (Drupal 8.6).

Doing so you will simply modify the corresponding template file to fit your needs (in most cases, I add a desired class name).

You can use this code in your themename.theme for more theme name suggestions:

function themename_theme_suggestions_responsive_image_alter(&$suggestions, $vars, $hook) {
  $img_style_id = $vars['responsive_image_style_id'];
  $suggestions[] = 'responsive_image__' . $img_style_id;
}

 

Don't forget to change themename with the name of your theme and clear the cache so that changes take an effect.

Alternatively, you can simply insert a <div> wrapper around the responsive image piece of component and call it a day. That might not be the BEM way of doing things, but sometimes you need to break the rules in order to get things to work quickly.

If you want to read and learn more about the same topic, but with a different approach for other PL-ready themes, you can read the article from Mark Conroy.

Until next time, have a nice Drupal day! :)