Order of the source srcsets is wrong and does not correspond to the breakpoint order

Created on 23 February 2018, over 6 years ago
Updated 19 September 2023, about 1 year ago

In the theme I have defined the following breakpoints:

breakpoints[extra_large] = (min-width: 1200px)
breakpoints[large] = (min-width: 992px)
breakpoints[medium] = (min-width: 769px)
breakpoints[small] = (min-width: 576px)
breakpoints[extra_small] = (min-width: 0px)

multipliers[extra_large][] = 2x
multipliers[large][] = 2x
multipliers[medium][] = 2x
multipliers[small][] = 2x
multipliers[extra_small][] = 2x

And in the config ui the order of the breakpoints is correct. But the order of the source elements in the html output is in the reversed order. As a result, on a desktop device the mobile image size would be used. Because the first matched srcset is used.

HTML output:

<picture class="media-element file-default">
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="[...] 1x, [...] 2x" media="(min-width: 0px)">
  <source srcset="[...] 1x, [...] 2x" media="(min-width: 576px)">
  <source srcset="[...] 1x, [...] 2x" media="(min-width: 769px)">
  <source srcset="[...] 1x, [...] 2x" media="(min-width: 992px)">
  <source srcset="[...] 1x, [...] 2x" media="(min-width: 1200px)">
  <!--[if IE 9]></video><![endif]-->
  <img class="media-element file-default" src="[...]/sites/default/files/styles/bfp_medium__extra_large__2x/public/wd_c05_g26_1.2._org.wh-scado_11.jpg?itok=tqD8i6ng&amp;timestamp=1463484396" alt="" title="">
</picture>

The picture formatter is the settings:

  • Picture mapping: BFP Medium
  • Fallback image style: Automatic
  • Picture lazyload: FALSE
  • Keep aspect ratio: FALSE
🐛 Bug report
Status

Closed: outdated

Version

2.0

Component

Code

Created by

🇩🇪Germany cbeier

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