Provide #style_name and #responsive_image_style_id in image theme functions

Created on 27 March 2020, over 4 years ago
Updated 8 September 2023, about 1 year ago

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

  1. 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.
  2. 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

  1. Review patch & approach, confirm that we've covered all possible ways image tags are rendered via responsive_image module
  2. 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

πŸ› Bug report
Status

Needs work

Version

10.1 ✨

Component
Responsive imageΒ  β†’

Last updated 9 days ago

Created by

πŸ‡ͺπŸ‡¨Ecuador jwilson3

Live updates comments and jobs are added and updated live.
  • Needs tests

    The change is currently missing an automated test that fails when run with the original code, and succeeds when the bug has been fixed.

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.

Production build 0.71.5 2024