// By default, breakpoints are ordered from smallest weight to largest:
// the smallest weight is expected to have the smallest breakpoint width,
// while the largest weight is expected to have the largest breakpoint
// width. For responsive images, we need largest breakpoint widths first, so
// we need to reverse the order of these breakpoints.
$breakpoints =
array_reverse($this->breakpointManager->
getBreakpointsByGroup($responsive_image_style->
getBreakpointGroup()));
foreach ($breakpoints as $breakpoint_id =>
$breakpoint) { foreach ($breakpoint->
getMultipliers() as $multiplier) { $label =
$multiplier . ' ' .
$breakpoint->
getLabel() . ' [' .
$breakpoint->
getMediaQuery() . ']';
$form['keyed_styles'
][$breakpoint_id][$multiplier] =
[ '#type' => 'details',
'#title' =>
$label,
];
$image_style_mapping =
$responsive_image_style->
getImageStyleMapping($breakpoint_id,
$multiplier);
if (\Drupal::
moduleHandler()->
moduleExists('help'
)) { $description =
$this->
t('See the <a href=":responsive_image_help">Responsive Image help page</a> for information on the sizes attribute.',
[':responsive_image_help' => Url::
fromRoute('help.page',
['name' => 'responsive_image'
])->
toString()]);
} else { $description =
$this->
t('Enable the Help module for more information on the sizes attribute.'
);
}