0

I recently tried implementing drupal 8's Responsive Images Module. I studied about it's basics and implemented according to the guides available online. But when i try to use it on any image on the site, its only selecting the Fallback Image Style. I have defined 5 breakpoints and 5 image styles for each breakpoint.

My breakpoint.yml is as follows:

investindia.big_screen:
  label: big screen
  mediaQuery: '(min-width: 1025px)'
  weight: 4
  multipliers:
    - 1x
investindia.tablet_landscape:
  label: tablet landscape
  mediaQuery: '(min-width: 769px)'
  weight: 3
  multipliers:
    - 1x
investindia.tablet:
  label: tablet portrait
  mediaQuery: '(min-width: 481px)'
  weight: 2
  multipliers:
    - 1x
investindia.smalltouch_landscape:
  label: smalltouch landscape
  mediaQuery: '(min-width: 321px)'
  weight: 1
  multipliers:
    - 1x
investindia.smalltouch:
  label: smalltouch portrait
  mediaQuery: '(min-width: 1px)'
  weight: 0
  multipliers:
    - 1x

Edit : Adding my responsive image style configuration for further clarification on the issue.

6
  • Don't trust your browser's developer console when checking this. Double-check with different browsers, without caching and without resizing the window after the intial page load. Especially Chrome can be very stubborn once it has a high res image in cache. It might very well be working OK, and it is just a dev console or local cache issue.
    – Hudri
    Jun 13, 2019 at 14:45
  • I tried both Chrome and Firefox, had same issue. Seems like Responsive Images module is ignoring all my breakpoints and sets the image styles according to the Fallback Image Style.
    – WizRd AM
    Jun 14, 2019 at 7:06
  • I don't know if it is necessary, but I'm using multiple different breakpoint sets, and therefore I also have a sub key like group: my_resp_img_group in every single breakpoint section. When creating the resp.img. style in the UI, I also select this breakpoint group
    – Hudri
    Jun 14, 2019 at 7:13
  • @Hudri I really appreciate your answer but i am not sure if i am able to convey you the actual issue. I have added my responsive image style settings above and what my issue is that, no matter the viewport size, the image size is always set according to the Fallback image styles ( image quarter ) in my case.
    – WizRd AM
    Jun 14, 2019 at 9:35
  • At a first glance everything looks correct. Please also add an example of a rendered HTML output (<img srcset> or <picture>) to ensure that the correct field formatter is used.
    – Hudri
    Jun 14, 2019 at 10:14

3 Answers 3

1

The posted responsive image configuration seems correct. Remember that you also need to change the image field formatter to "Responsive image". If you are using image fields on node entities, you can do this at

/admin/structure/types/manage/MY_NODE_TYPE/display/MY_VIEW_MODE

(If you are using image media entities instead of image fields, use the "Rendered entity" field formatter on the node, and switch to the "Responsive image" field formatter on the media entity at /admin/structure/media/manage/MY_MEDIA_TYPE/display/MY_VIEW_MODE )

1
  • Been there, done that. Actually, responsive image styles dosen't work on an image if the image field formatter isn't set to "Responsive Image". I think the problem is with using Responsive Images when the image is set to hidden in the view and used in a Global Custom Text as {{ field_image }}. At least that's what i found out here drupal.org/project/drupal/issues/2687479
    – WizRd AM
    Jun 14, 2019 at 11:49
0

Set the mediaQuery field to empty for your smallest breakpoint

investindia.smalltouch:
  label: smalltouch portrait
  mediaQuery: ''
  weight: 0
  multipliers:
    - 1x

Here's my configuration and it works:

THEME_NAME.small:
  label: small
  mediaQuery: ''
  weight: 0
  multipliers:
    - 1x
    - 2x
THEME_NAME.small-med:
  label: small-med
  mediaQuery: 'all and (min-width: 26em)'
  weight: 1
  multipliers:
    - 1x
    - 2x
THEME_NAME.small-large:
  label: small-large
  mediaQuery: 'all and (min-width: 41em)'
  weight: 2
  multipliers:
    - 1x
    - 2x
THEME_NAME.medium:
  label: medium
  mediaQuery: 'all and (min-width: 48em)'
  weight: 3
  multipliers:
    - 1x
    - 2x
THEME_NAME.large:
  label: large
  mediaQuery: 'all and (min-width: 61.25em)'
  weight: 4
  multipliers:
    - 1x
    - 2x
0

Might be worth checking the order of your filters in the text format if you are embedding these responsive images as Media items into text fields (such as Body).

I had problems because the 'Convert line breaks...' filter was after the Embed media and align images filters. Once I moved the 'Convert line breaks' filter above them, the correct HTML was generated and the correct responsive image was being rendered.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.