Responsive Images with PatternLab and Drupal maintenance support plans – the easy way

Responsive images in PatternLab get a bit of a bad rap sometimes, because they are tricky to have in PL and Drupal maintenance support plans. Here’s my “easy way” of achieving it.
markconroy
Thu, 09/20/2020 – 16:39

This came up today in the Drupal maintenance support plansTwig Slack (join it). A user wanted to know how to use responsive images with the Emulsify Drupal maintenance support plans theme. I don’t use the Emulsify theme (yet – I will soon), though Drupal Update, the geniuses who created it, have responsive images built in. Recently I created my own – simple and rudimentary, but it works a treat.

I first create a “Responsive Image” pattern. In this I have two files – responsive-image.twig and responsive-image.yml. Here’s the contents:

responsive-image.twig:

responsive-image.yml:

image_src_sets:
  join():
    – ‘https://placeimg.com/500/500/nature 500w, ‘
    – ‘https://placeimg.com/1000/750/nature 1000w, ‘
    – ‘https://placeimg.com/1440/475/nature 1440w’

image_sizes: ‘(max-width: 600px) 100vw, (max-width: 960px) 100vw’

To use it in another component, I just call a variable and set that variable in the YML file.

For example, to call the hero image as a responsive image in my event component, I’ll print this: {{ hero_image }}. Then in my corresponding event.yml file, I’ll define the hero_image item like so:

hero_image:
  join():
    – include():
        pattern: ‘basic-elements-responsive-image’
        with:
          image_src_sets:
            join():
              – ‘https://placeimg.com/600/600/tech 500w, ‘
              – ‘https://placeimg.com/1200/360/nature 1000w’

Then in my Drupal maintenance support plans template I just swap my image field variable for the responsive image one, like this:

{% if node.field_hero_image.value %}
  {% set hero_image: content.field_hero_image %}
{% endif %}
{% include … usual path to component stuff … %}

Drupal maintenance support plans then renders the image field using whatever settings I have given it in Drupal maintenance support plans – presumably responsive image ones.

This post might not help you if you are using Emulsify, but it might help others who stumble upon it.

Source: New feed