I'm attempting to render responsive images and control art direction. Could somebody see whyI can't get breakpoints.yml to be respected?

Question

I'm creating a title/ hero-image section that consists of two 50/50 columns at desktop but then stacks at about tablet (e.g. 1024px)

I’m using a custom twig template for this content type.

I want serve WebP images if the users browser will tolerate that, I also want to serve responsive derivatives and control art direction (i.e. different dimensions and cropping depending on screen width).

To that end I’m trying to use the WebP module together with the Responsive Image module and image styles.

I’ve created two responsive image styles (PMP Hero Col One & PMP Hero Col Two) and six image styles (PMP Hero C1 Desktop, PMP Hero C1 Tablet, PMP Hero C1 Phone, PMP Hero C2 Desktop, PMP Hero C2 Tablet, PMP Hero C2 Phone) each with a scale and crop effect.

I’ve created a breakpoints.yml In my theme’s root directory and I can see its breakpoints within the Responsive Image configuration interface.

my_theme.pmp_hero_col_1.phone:
  label: pmp_hero_col_1_phone
  mediaquery: '(max-width: 900px)'
  weight: 0
  multipliers: 
    - 1x
  group: neiu_main.pmp_hero_col_1
my_theme.pmp_hero_col_1.tablet:
  label: pmp_hero_col_1_tablet
  mediaquery: '(max-width: 1024px)'
  weight: 1
  multipliers: 
    - 1x
  group: neiu_main.pmp_hero_col_1
my_theme.pmp_hero_col_1.desktop: 
  label: pmp_hero_col_1_desktop
  mediaquery: '(min-width: 1025px)'
  weight: 2
  multipliers: 
    - 1x
  group: neiu_main.pmp_hero_col_1 
my_theme.pmp_hero_col_2.phone:
  label: pmp_hero_col_2_phone
  mediaquery: '(max-width: 900px)'
  weight: 0
  multipliers: 
    - 1x
  group: neiu_main.pmp_hero_col_2
my_theme.pmp_hero_col_2.tablet:
  label: pmp_hero_col_2_tablet
  mediaquery: '(max-width: 1024px)'
  weight: 1
  multipliers: 
    - 1x
  group: neiu_main.pmp_hero_col_2  
my_theme.pmp_hero_col_2.desktop:
  label: pmp_hero_col_2_desktop
  mediaquery: '(min-width: 1025px)'
  weight: 2
  multipliers: 
    - 1x
  group: neiu_main.pmp_hero_col_2 

I’ve selected the appropriate breakpoint group in each of my responsive image styles. Within each responsive image style I’ve selected “Select a single image style.” for each breakpoint and associated the image style I want with it.

I’ve tried setting the fallback image style to “None (original image)” & “empty image”.

I’ve tried rendering the responsive image style in my template like:

{{ drupal_image(node.field_pmp_hero_image.entity.uri.value, 'pmp_hero_col_two', responsive=true) }}

and like:

{% set heroCol2ImagePath = node.field_pmp_hero_image.entity.uri.value %}

{% 
    set heroCol2ResponsiveImageStyle = {
        '#theme': 'responsive_image',
        '#responsive_image_style_id': 'pmp_hero_col_two',
        '#uri': heroCol2ImagePath,
        '#attributes': { class: 'img-responsive', alt: 'MBA Students' },
    } 
%}

{{ heroCol2ResponsiveImageStyle }}

In both cases I do get the picture tag and the appropriate srcsets:



Also the derivatives are written to the file system in the appropriate directories and are available.

The problem I'm experiencing is that the breakpoints.yml is never respected i.e. the image never changes to the appropriate derivative. It's always either the default or empty if the fallback is set to empty.

This makes me think there's something wrong with my breakpoints.yml e.g. syntax, media queries, etc. So, I've tried about a zillion permutations without success.

I am able to get this working if instead of using the Responsive Image module at all, I manually do:

<picture>
    <source media="(max-width:900px)" srcset="{{ heroCol2ImagePath|image_style('pmp_hero_c2_phone') }}">
    <source media="(max-width:1024px)" srcset="{{ heroCol2ImagePath|image_style('pmp_hero_c2_tablet') }}">
    <source media="(min-width:1025px)" srcset="{{ heroCol2ImagePath|image_style('pmp_hero_c2_desktop') }}">
    <img class="pmp-vtwo-hero-image" src="{{ file_url(heroCol2ImagePath) }}" alt="Flowers" style="width:auto;">
</picture>

But, I don't know how to then use the WebP module with this approach.

If somebody out there is able to point out what bone-head mistake I'm making, you'd forever have my gratitude.

Answer 1

It looks like you have a typo in your breakpoints.yml. See this the breakpoints.yml documentation.

An example as defined in bartik theme:

bartik.narrow:
label: narrow
mediaQuery: 'all and (min-width: 560px) and (max-width: 850px)'
weight: 1
multipliers:
  - 1x

The correct key is mediaQuery, not mediaquery. The result is your media queries aren't recognized so you only get default images on all devices. Update that and you'll be all set.