Support image shape matching from the `image` MediaSource: support both the `image` + `oembed` MediaSources simultaneously

Created on 17 June 2025, 7 days ago

Overview

šŸ“Œ Decouple image (URI) shape matching from specific image file types/extensions Active is about avoiding assumptions in the shape definition about specific image file types.

šŸ“Œ Decouple image shape matching from the `image` MediaType Active is about avoiding assumptions in XB's shape matching that require/assume the Standard install profile's image media type.

This is about avoiding assumptions in XB's shape matching that require/assume a single MediaSource plugin — for example it should be possible to automatically pick from both locally uploaded images (the image MediaType powered by core's Image MediaSource) and remote ones (by enabling the disabled-by-default Flickr oEmbed provider, creating a new flickr MediaType powered by the oEmbed provider

Proposed resolution

  1. Expand the test coverage in MediaLibraryHookStoragePropAlterTest — requires something like this:
    diff --git a/core/modules/media/src/Plugin/media/Source/OEmbedDeriver.php b/core/modules/media/src/Plugin/media/Source/OEmbedDeriver.php
    index bdbc5355617..dc3bed29302 100644
    --- a/core/modules/media/src/Plugin/media/Source/OEmbedDeriver.php
    +++ b/core/modules/media/src/Plugin/media/Source/OEmbedDeriver.php
    @@ -28,6 +28,13 @@ public function getDerivativeDefinitions($base_plugin_definition) {
             'providers' => ['YouTube', 'Vimeo'],
             'default_thumbnail_filename' => 'video.png',
           ] + $base_plugin_definition,
    +      'image' => [
    +        'id' => 'image',
    +        'label' => $this->t('Remote image'),
    +        'description' => $this->t('Use remote video URL for reusable media.'),
    +        'providers' => ['Flickr'],
    +        'default_thumbnail_filename' => 'image.png',
    +      ] + $base_plugin_definition,
         ];
         return parent::getDerivativeDefinitions($base_plugin_definition);
       }
    

    +

    langcode: en
    status: true
    dependencies: {  }
    id: remote_image
    label: 'Remote image'
    description: 'A remotely hosted image from Flickr.'
    source: 'oembed:image'
    queue_thumbnail_downloads: false
    new_revision: true
    source_configuration:
      source_field: field_media_oembed_image
      thumbnails_directory: 'public://oembed_thumbnails/[date:custom:Y-m]'
      providers:
        - Flickr
    field_map: {} #TBD
    
  2. For reference, e.g. https://www.flickr.com/photos/educowebdesign/48754730203/ can be oEmbed-fetched using https://www.flickr.com/services/oembed/?url=https://www.flickr.com/photo..., which returns currently:
    <oembed>
    <type>photo</type>
    <flickr_type>photo</flickr_type>
    <title>IMG_8638</title>
    <author_name>EDUCO Web Design</author_name>
    <author_url>https://www.flickr.com/photos/educowebdesign/</author_url>
    <width>1024</width>
    <height>683</height>
    <url>https://live.staticflickr.com/65535/48754730203_d15ec76ff6_b.jpg</url>
    <web_page>https://www.flickr.com/photos/educowebdesign/48754730203/</web_page>
    <thumbnail_url>https://live.staticflickr.com/65535/48754730203_d15ec76ff6_q.jpg</thumbnail_url>
    <thumbnail_width>150</thumbnail_width>
    <thumbnail_height>150</thumbnail_height>
    <web_page_short_url>https://flic.kr/p/2hhhJGB</web_page_short_url>
    <license>All Rights Reserved</license>
    <license_id>0</license_id>
    <html><a data-flickr-embed="true" href="https://www.flickr.com/photos/educowebdesign/48754730203/" title="IMG_8638 by EDUCO Web Design, on Flickr"><img src="https://live.staticflickr.com/65535/48754730203_d15ec76ff6_b.jpg" width="1024" height="683" alt="IMG_8638"></a><script async src="https://embedr.flickr.com/assets/client-code.js" charset="utf-8"></script></html>
    <version>1.0</version>
    <cache_age>3600</cache_age>
    <provider_name>Flickr</provider_name>
    <provider_url>https://www.flickr.com/</provider_url>
    </oembed> 
    
  3. Update the logic in \Drupal\experience_builder\Hook\ShapeMatchingHooks::mediaLibraryStoragePropShapeAlter() to account for not only different field names, but also different prop names
    … and perhaps more than that — depending on how different the shape is, this may need to add per-target bundle support to more \Drupal\experience_builder\PropExpressions\StructuredData\* infrastructure

User interface changes

TBD

šŸ“Œ Task
Status

Active

Version

0.0

Component

Shape matching

Created by

šŸ‡§šŸ‡ŖBelgium wim leers Ghent šŸ‡§šŸ‡ŖšŸ‡ŖšŸ‡ŗ

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024