Responsive image format for media

Created on 25 February 2018, over 6 years ago
Updated 30 August 2024, 3 months 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 about 23 hours 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.
  • πŸ‡§πŸ‡·Brazil gabriel.passarelli

    Here's the #39 patch with the loading attribute that was missing

  • πŸ‡ΊπŸ‡¦Ukraine deulenko

    The #45 patch causes this error
    ParseError: Unclosed '{' on line 164 in Composer\Autoload\{closure}() (line 173 of core/modules/responsive_image/src/Plugin/Field/FieldFormatter/ResponsiveMediaImageFormatter.php).
    so I've re-created it.

Production build 0.71.5 2024