Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.Hello,
Here is the last sentence of the 6.14. Concept: Responsive Image Styles section of the User Guide:
This allows the site to display responsive images using the HTML5 picture tag.
The core Responsive Image module generates thesrcsetand thesizesattributes of the img tag but it is not using any picture tag.
The help section of the core Responsive Image module, located at /admin/help/responsive_image, also mentions twice the HTML5 picture tag.
The Drupal 8 documentation about the Responsive Image module also mentions the picture tag (this sentence is also visible, word for word, in the Drupal 8 UI at /admin/modules):
Provides an image formatter and breakpoint mappings to output responsive images using the HTML5 picture tag.
The mobile guide for Responsive Images in Drupal 8 also mentions twice the HTML5 picture tag.
Regards,
Gilles
| Comment | File | Size | Author |
|---|---|---|---|
| #6 | 3038266.patch | 1.68 KB | jhodgdon |
Comments
Comment #2
gillesbailleuxComment #3
jhodgdonThanks very much for this issue! We (obviously) based the User Guide on the other documentation and didn't independently verify it.
Did you also create Documentation and Drupal Core issues about the same problem in those sources? We can use this issue to fix the problem in the User Guide text, but we would need separate issues to fix the Drupal Core issues, and the drupal.org documentation that isn't in the User Guide.
Comment #4
eojthebraveDrupal can use either
<picture>or<img srcset="" sizes="">depending on how you have things configured. See #2348255: Provide option to use srcset and/or sizes attributes on img tag instead of the picture elementThis article does a good job of covering the differences in configuration https://chromatichq.com/blog/responsive-images-drupal-8-using-srcset.
Comment #5
eojthebraveAs long as we're updating this page can we also fix what seems to be an extra "s" in "images" in this sentence?
Comment #6
jhodgdonInteresting. According to the article you referenced, you don't actually have to have the breakpoints in your theme to set up responsive image styles.
How's this for a patch?
Comment #7
gillesbailleux@jhodgdon: I raised this issue only here but I shall post something in the Responsive Image core module discussion section.
@eojthebrave: thank you for this article which, among other things, explains that the Stable theme template renders an img tag instead of the picture tag thanks to the output_image_tag boolean located at line #18 of the responsive-image.html.twig file. By chance, the twig file described in the 2016 article is exactly the same as the one in the latest version of that core module. Now, reading the description of the responsive_image module in the Drupal 8 UI at /admin/modules, you would probably expect to see a picture tag in the code source of your Drupal 8 website when using the Responsive Image module.
Comment #8
eojthebraveThe patch in #6 looks good to me. It helps address the confusion pointed out by @gillesbailleux where depending on configuration Drupal will use either a picture tag, or img with srcset/sizes. And I think the addition of the link to the Chromatic blog post is super helpful as it goes into way more depth than we will in the user guide.
I'll get this committed shortly. We'll want to notify translation groups about this change.
Comment #9
eojthebraveComment #11
eojthebraveComment #17
jhodgdonI'm sending information about this to the group email list now.