Responsive image format for media

Created on 25 February 2018, over 6 years ago
Updated 21 May 2024, about 1 month ago

Problem/Motivation

When a site uses images from the media library, it takes a long chain of configuration to display images with a given responsive image style. When multiple node types (or other entities /w bundles) with multiple view modes require images with different styles, each variation requires its own chain of configuration.

Data chain: Node > Entity reference field > Image media > Image field
Format chain: Node view mode > Entity reference field formatter > Image media view mode > Image field formatter > Responsive image style

Proposed resolution

Introduce a new field formatter for entity reference fields that reference media entities to shorten the format chain.

New format chain: Node view mode > Responsive media image field formatter > Responsive image style

Remaining tasks

t.b.d.

User interface changes

New formatter for Entity reference fields referring to image media.

Release notes snippet

t.b.d.

✨ Feature request
Status

Needs work

Version

11.0 πŸ”₯

Component
Responsive imageΒ  β†’

Last updated 12 days ago

Created by

πŸ‡¨πŸ‡ΏCzech Republic landsman

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.

  • πŸ‡ΊπŸ‡¦Ukraine HitchShock Ukraine

    Reworked the patch to use the file from the media source field instead of the thumbnail.

    The ticket still needs tests for a new formatter.

  • πŸ‡§πŸ‡ͺBelgium flyke

    Patch from #37 does not seem to apply to 9.5.3.

    git apply -v --directory=web responsive-style-for-media-9.5-37.patch
    Checking patch web/core/modules/responsive_image/src/Plugin/Field/FieldFormatter/ResponsiveImageFormatter.php...
    error: while searching for:
          ],
        ];
    
        $link_types = [
          'content' => $this->t('Content'),
          'file' => $this->t('File'),
        ];
        $elements['image_link'] = [
          '#title' => $this->t('Link image to'),
          '#type' => 'select',
          '#default_value' => $this->getSetting('image_link'),
          '#empty_option' => $this->t('Nothing'),
          '#options' => $link_types,
        ];
    
        return $elements;
    
    error: patch failed: web/core/modules/responsive_image/src/Plugin/Field/FieldFormatter/ResponsiveImageFormatter.php:148
    error: web/core/modules/responsive_image/src/Plugin/Field/FieldFormatter/ResponsiveImageFormatter.php: patch does not apply
    Checking patch web/core/modules/responsive_image/src/Plugin/Field/FieldFormatter/ResponsiveMediaImageFormatter.php...
  • πŸ‡©πŸ‡ͺGermany Anybody Porta Westfalica

    Nice work, still needs tests as of #21, then it's ready for review.

  • πŸ‡«πŸ‡·France GaΓ«lG Lille, France
  • πŸ‡©πŸ‡ͺGermany carstenG

    Loading attribute is not set with that formatter!
    It is missing 2 lines before $elements[$delta] is set:
    When I find time I'll provide patch.

    $image_loading_settings = $this->getSetting('image_loading');
    $item_attributes['loading'] = $image_loading_settings['attribute'];
    
    $elements[$delta] = [
    .....
    
  • First commit to issue fork.
Production build 0.69.0 2024