Write documentation for working with the sizes attribute

Created on 23 February 2017, over 7 years ago
Updated 19 September 2023, about 1 year ago

The HTML specs offer various ways to implement responsive images, and so does this module. Unfortunately I wasn't able to figure out how to use the settings related to the "sizes attribute". If there already is documentation, I wasn't able to find it. Disclaimer: I am using the Media module so that may be a complicating factor - I'm not sure.

Initially I started without any picture mappings defined, on the "manage file display" page of the "image" media type. There was a "Image with sizes" formatter available, so that sounded good. However I had no idea what to enter in the "Sizes" field and how that should be combined with one or more selected image styles. I tried some settings that seemed logical, but never got the expected responsive behavior.

Next I tried to define a picture mapping and use that on the "manage file display" form. For each breakpoint I chose "Use the sizes attribute", entered a "Sizes" value (not completely sure what to enter, but let's try something) and selected a matching image style. The HTML output looked like it made sense, but the browser still wasn't rendering it as I had hoped, it always seemed to prefer the smallest option. (Yes, my breakpoints were ordered from large to small.)

Finally I returned to the method I had used before, choosing the "Use image styles" method in the picture mappings. That worked well, but I'd also like to know how to use the new shiny srcset/sizes goodness.

📌 Task
Status

Closed: outdated

Version

2.0

Component

Documentation

Created by

🇳🇱Netherlands marcvangend Amsterdam

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇬🇧United Kingdom lesleyfernandes

    I am closing all very old tickets that have not received comments for a long time. If someone still faces these issues or thinks they are relevant, please reopen it. Feel free to contribute with more info or a patch.

Production build 0.71.5 2024