Quantcast
Channel: Issues for Drupal core
Viewing all articles
Browse latest Browse all 298558

Responsive image in Drupal core incorrectly selects the last image style sometimes resulting in wrong rendered image

$
0
0

Problem/Motivation

When configuring responsive image styles using the image tag's srcset and sizes attributes, Drupal sorts the selected image styles alphabetically (by machine name), and incorrectly selects the last image style in the list as the image size to render completely ignoring the configuration preferences defined in the specific responsive image style configuration screen.

Steps to reproduce

  1. Enable the Responsive image module (required)
  2. Enable the Media and Media library modules (optional)
  3. Navigate to your site's responsive images configuration page (/admin/config/media/responsive-image-style)
  4. Edit the responsive image style you wish to work with (I'm using core's Wide in my example)
  5. Select Responsive image from the Breakpoint group select field
  6. Expand the 1x Viewport Sizing [] fieldset and select Select multiple image styles and use the sizes attribute. as the type
  7. To keep it simple, type 100vw in the Sizes field. This means the image should be full width (100% viewport width) for all device sizes.
  8. Select as many image styles as you wish (pay attention to the order of the image styles)
  9. Pick a relatively large fallback image (read this issue for details on fallback image problem)
  10. Save your changes
  11. (See screenshot below for configuration example)

  12. Modify the entity type that has an image field you wish to test with and ensure the image uses the responsive image styles you just configured (in my case this is the Wide responsive image style)
  13. Create a new node using the entity type that has the image field in the previous item
  14. Inspect the rendered image to see which image was rendered if it's not obvious by simply looking at the rendered image

Only local images are allowed.

Proposed resolution

TBD

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet


Viewing all articles
Browse latest Browse all 298558