Problem/Motivation
As a front-end developer, I'd expect the ability to customize the fallback <img>
tag HTML output inside the <picture>
tag would work the same way as with non-responsive images.
I'd expect to be able to add theme suggestions for the image template based on the image style_name used in the fallback and ideally the responsive image style id would also be present.
/**
* Implements hook_theme_suggestions_HOOK_alter().
*/
function THEMENAME_theme_suggestions_image_style_alter(array &$suggestions, array $variables) {
$suggestions[] = $variables['theme_hook_original'] . '__' . $variables['style_name'];
}
/**
* Implements hook_theme_suggestions_HOOK_alter().
*/
function THEMENAME_theme_suggestions_image_alter(array &$suggestions, array $variables) {
$suggestions[] = $variables['theme_hook_original'] . '__' . $variables['style_name'];
}
However, the responsive_image module does not send the style_name parameter to the image template. And, similarly Drupal core currently doesn't provide a way to pass along the responsive_image_style_id
to the various image templates.
Proposed resolution
- Add
responsive_image_style_id
as an optional variable sent to all image templates involved in the responsive image render chain. In cases where the image template is not part of a responsive image, the variable would default to NULL.
- Ensure responsive_image module sends both the style_name and the responsive_image_style_id to the "img_element" render array used as the fallback
<img>
tag.
Remaining tasks
- Review patch & approach, confirm that we've covered all possible ways image tags are rendered via responsive_image module
- Write tests
User interface changes
None.
API changes
A new theme template parameter called responsive_image_style_id
will be introduced for the image, image_formatter, and image_style theme functions. The variable will be available to template suggestion hooks, theme preprocess hooks and inside the Twig templates.
Data model changes
None.
Release notes snippet