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.

  • 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 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 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 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 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 at 10:14
0

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 )

  • 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 at 11:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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