EWPP-164: Use media container pattern in TextFeaturedMedia pattern.

modules/oe_theme_content_event/src/Plugin/ExtraField/Display/DescriptionExtraField.php

@@ -200,7 +200,10 @@ protected function addFeaturedMediaThumbnail(array &$build, ContentEntityInterfa
     }
 
     $cache->addCacheableDependency($thumbnail->entity);
-    $build['#fields']['image'] = ImageValueObject::fromImageItem($thumbnail);
+    $media = [
+      'image' => ImageValueObject::fromImageItem($thumbnail),
+    ];
+    $build['#fields']['media'] = MediaValueObject::fromArray($media);
 
     // Only display a caption if we have an image to be captioned by.
     /** @var \Drupal\Core\Entity\EntityViewBuilderInterface $view_builder */

oe_theme.theme

@@ -15,21 +15,16 @@ use Drupal\Core\Form\FormStateInterface;
 use Drupal\Core\Render\Element;
 use Drupal\Core\Template\Attribute;
 use Drupal\Core\Url;
-use Drupal\file\FileInterface;
-use Drupal\file_link\Plugin\Field\FieldType\FileLinkItem;
 use Drupal\media\MediaInterface;
 use Drupal\media\Plugin\media\Source\Image;
-use Drupal\media\Plugin\media\Source\OEmbed;
-use Drupal\media_avportal\Plugin\media\Source\MediaAvPortalPhotoSource;
 use Drupal\media_avportal\Plugin\media\Source\MediaAvPortalSourceInterface;
-use Drupal\media_avportal\Plugin\media\Source\MediaAvPortalVideoSource;
 use Drupal\oe_theme\DocumentMediaValueExtractor;
 use Drupal\oe_theme\ValueObject\FileValueObject;
 use Drupal\oe_theme\ValueObject\DateValueObject;
 use Drupal\oe_theme\ValueObject\GalleryItemValueObject;
 use Drupal\oe_theme\ValueObject\ImageValueObject;
+use Drupal\oe_theme\ValueObject\MediaValueObject;
 use Drupal\oe_theme_helper\EuropeanUnionLanguages;
-use Drupal\oe_media_iframe\Plugin\media\Source\Iframe;
 use \Drupal\Component\Render\FormattableMarkup;
 
 /**
@@ -853,8 +848,6 @@ function oe_theme_preprocess_paragraph__oe_content_row__variant_inpage_navigatio
  * Implements hook_preprocess_paragraph() for paragraph--oe-text-feature-media.html.twig.
  */
 function oe_theme_preprocess_paragraph__oe_text_feature_media(array &$variables): void {
-  $variables['image'] = [];
-
   /** @var \Drupal\paragraphs\Entity\Paragraph $paragraph */
   $paragraph = $variables['paragraph'];
 
@@ -863,10 +856,9 @@ function oe_theme_preprocess_paragraph__oe_text_feature_media(array &$variables)
     return;
   }
 
-  $cacheability = CacheableMetadata::createFromRenderArray($variables);
-
   /** @var \Drupal\media\Entity\Media $media */
   $media = $paragraph->get('field_oe_media')->entity;
+
   if (!$media instanceof MediaInterface) {
     // The media entity is not available anymore, bail out.
     return;
@@ -878,54 +870,11 @@ function oe_theme_preprocess_paragraph__oe_text_feature_media(array &$variables)
   // Caches are handled by the formatter usually. Since we are not rendering
   // the original render arrays, we need to propagate our caches to the
   // paragraph template.
+  $cacheability = CacheableMetadata::createFromRenderArray($variables);
   $cacheability->addCacheableDependency($media);
-
-  // Get the media source.
-  $source = $media->getSource();
-
-  if ($source instanceof MediaAvPortalVideoSource || $source instanceof OEmbed || $source instanceof Iframe) {
-    // Default video aspect ratio is set to 16:9.
-    $variables['ratio'] = '16:9';
-
-    // Load information about the media and the display.
-    $media_type = \Drupal::entityTypeManager()->getStorage('media_type')->load($media->bundle());
-    $cacheability->addCacheableDependency($media_type);
-    $source_field = $source->getSourceFieldDefinition($media_type);
-    $display = EntityViewDisplay::collectRenderDisplay($media, 'oe_theme_main_content');
-    $cacheability->addCacheableDependency($display);
-    $display_options = $display->getComponent($source_field->getName());
-
-    // If it is an OEmbed resource, render it and pass it as embeddable data
-    // only if it is of type video or html.
-    if ($source instanceof OEmbed) {
-      $oembed_type = $source->getMetadata($media, 'type');
-      if (in_array($oembed_type, ['video', 'html'])) {
-        $variables['video'] = $media->{$source_field->getName()}->view($display_options);
-        $cacheability->applyTo($variables);
-        return;
-      }
-    }
-
-    // If its an AvPortal video or an iframe video, render it.
-    $variables['video'] = $media->{$source_field->getName()}->view($display_options);
-    $cacheability->applyTo($variables);
-
-    // When dealing with iframe videos, also respect its given aspect ratio.
-    if ($media->bundle() === 'video_iframe') {
-      $ratio = $media->get('oe_media_iframe_ratio')->value;
-      $variables['ratio'] = str_replace('_', ':', $ratio);
-    }
-
-    return;
-  }
-
-  // If its an image media, render it and assign it to the image variable.
-  if ($source instanceof MediaAvPortalPhotoSource || $source instanceof Image) {
-    $thumbnail = $media->get('thumbnail')->first();
-    $variables['image'] = ImageValueObject::fromStyledImageItem($thumbnail, 'oe_theme_medium_no_crop');
-    $cacheability->applyTo($variables);
-    return;
-  }
+  $cacheability->addCacheableDependency(\Drupal::entityTypeManager()->getStorage('media_type')->load($media->bundle()));
+  $cacheability->addCacheableDependency(EntityViewDisplay::collectRenderDisplay($media, 'oe_theme_medium_no_crop'));
+  $variables['media'] = MediaValueObject::fromMediaObject($media, 'oe_theme_medium_no_crop', 'oe_theme_main_content');
 
   $cacheability->applyTo($variables);
 }
@@ -1011,13 +960,6 @@ function oe_theme_preprocess_pattern_date_block__preview(array &$variables): voi
   $variables['date'] = DateValueObject::fromArray($variables['date']);
 }
 
-/**
- * Implements hook_preprocess_HOOK().
- */
-function oe_theme_preprocess_pattern_text_featured_media__preview(array &$variables): void {
-  $variables['image'] = ImageValueObject::fromArray($variables['image']);
-}
-
 /**
  * Implements hook_theme_suggestions_HOOK_alter().
  */

templates/paragraphs/paragraph--oe-text-feature-media.html.twig

@@ -11,12 +11,9 @@
   Unfortunately even when the field is empty the variable content.* still contains information (such as the weight)
   so we can't pass it to the pattern directly.
  #}
-
 {{ pattern('text_featured_media', {
   'title': not paragraph.field_oe_title.isEmpty ? content.field_oe_title,
-  'image': image,
-  'video': video,
-  'video_ratio': ratio,
+  'media': media,
   'caption': not paragraph.field_oe_plain_text_long.isEmpty ? content.field_oe_plain_text_long,
   'text': not paragraph.field_oe_text_long.isEmpty ? content.field_oe_text_long,
 }) }}

templates/patterns/text_featured_media/pattern-text-featured-media.html.twig

@@ -4,38 +4,22 @@
  * Text with featured media.
  */
 #}
-
-{% set video_ratio = video_ratio|replace({':': '-'}) %}
-{% set allowed_values = ['16-9','4-3','3-2','1-1'] %}
-{% if video_ratio not in allowed_values %}
-  {% set video_ratio = '16-9' %}
+{% if title %}
+  <h2 class="ecl-u-type-heading-2 ecl-u-mt-2xl ecl-u-mt-md-3xl ecl-u-mb-l">{{ title }}</h2>
 {% endif %}
-{% set text = text|render %}
-
-{% if image or video or text %}
-  {% if title %}
-    <h2 class="ecl-u-type-heading-2 ecl-u-mt-2xl ecl-u-mt-md-3xl ecl-u-mb-l">{{ title }}</h2>
-  {% endif %}
+{% if media.image or media.video or text %}
   <div class="ecl-row">
-    {% if image or video %}
+    {% if media.image or media.video %}
       <div class="ecl-col-md-6 ecl-u-order-md-last ecl-u-mb-m ecl-u-mb-md-none">
-        {% if image %}
-          {% include '@ecl-twig/media-container' with {
-            'image': image.src,
-            'alt': image.alt,
-            'description': caption,
-          } %}
-        {% elseif video %}
-          {% include '@ecl-twig/media-container' with {
-            'embedded_media': video,
-            'ratio': video_ratio,
-            'description': caption,
-          } %}
-        {% endif %}
+        {{ pattern('media_container', {
+          'compliance': compliance,
+          'description': caption,
+          'media': media
+        }) }}
       </div>
     {% endif %}
     {% if text %}
-      <div class="{{ image or video ? ' ecl-col-md-6' : 'ecl-col-12' }} ecl-editor">{{ text }}</div>
+      <div class="{{ media.image or media.video ? ' ecl-col-md-6' : 'ecl-col-12' }} ecl-editor">{{ text }}</div>
     {% endif %}
   </div>
 {% endif %}

templates/patterns/text_featured_media/text_featured_media.ui_patterns.yml

@@ -7,18 +7,6 @@ text_featured_media:
       label: "Title"
       description: "The title, displayed above text and media."
       preview: "Lorem ipsum"
-    image:
-      type: "ImageValueObject"
-      label: "Image"
-      description: "Featured image. Either this or the video need to be provided. If both are provided the image will take preference."
-      preview:
-        src: "https://placeimg.com/1000/500/arch"
-        alt: "Alternative text for featured item image"
-    video:
-      type: "text"
-      label: "Video"
-      description: "Featured video. Needs to be provided as a ready to be rendered string. Either this or the image need to be provided. If both are provided the image will take preference."
-      preview: ""
     caption:
       type: "text"
       label: "Caption"
@@ -29,8 +17,11 @@ text_featured_media:
       label: "Full text"
       description: "The full rich text."
       preview: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non enim iam stirpis bonum quaeret, sed animalis. Ego vero volo in virtute vim esse quam maximam; <b>A mene tu?</b> Quid, quod res alia tota est? Duo Reges: constructio interrete.</p>"
-    video_ratio:
-      type: "text"
-      label: "Video aspect ratio"
-      description: "Aspect ratio used to display videos in media container. Allowed values: 16:9, 4:3, 3:2, 1:1. Defaults to 16:9 if in invalid value is passed. This will not have any effects when used with images."
-      preview: "16:9"
+    media:
+      type: "MediaValueObject"
+      label: "Media"
+      description: "Media element."
+      preview:
+        image:
+          src: "https://placeimg.com/100/100"
+          alt: "Alternative text for logo"

tests/Kernel/Patterns/MediaContainerPatternRenderingTest.php

@@ -46,6 +46,10 @@ public function dataProvider(): array {
     $data = $this->getFixtureContent('patterns/media_container_pattern.yml');
 
     foreach ($data as $key => $value) {
+      if (!isset($value['fields']['media'])) {
+        continue;
+      }
+
       $media = $value['fields']['media'];
 
       if (isset($media['image'])) {

tests/Kernel/Patterns/TextFeaturedMediaPatternTest.php

@@ -0,0 +1,65 @@
+<?php
+
+declare(strict_types = 1);
+
+namespace Drupal\Tests\oe_theme\Kernel\Patterns;
+
+use Drupal\Tests\oe_theme\Kernel\AbstractKernelTestBase;
+use Drupal\oe_theme\ValueObject\ImageValueObject;
+use Drupal\oe_theme\ValueObject\MediaValueObject;
+
+/**
+ * Test text featured media pattern rendering.
+ */
+class TextFeaturedMediaPatternTest extends AbstractKernelTestBase {
+
+  /**
+   * Test that text featured media pattern is correctly rendered.
+   *
+   * @param array $fields
+   *   Media data for the pattern.
+   * @param array $assertions
+   *   Test assertions.
+   *
+   * @throws \Exception
+   *
+   * @dataProvider dataProvider
+   */
+  public function testTextFeaturedMediaPattern(array $fields, array $assertions) {
+    $pattern = [
+      '#type' => 'pattern',
+      '#id' => 'text_featured_media',
+      '#fields' => $fields,
+    ];
+
+    $html = $this->renderRoot($pattern);
+    $this->assertRendering($html, $assertions);
+  }
+
+  /**
+   * Data provider for testMediaPattern.
+   *
+   * @return array
+   *   Test data and assertions.
+   */
+  public function dataProvider(): array {
+    $data = $this->getFixtureContent('patterns/text_featured_media.yml');
+
+    foreach ($data as $key => $value) {
+      if (!isset($value['fields']['media'])) {
+        continue;
+      }
+
+      $media = $value['fields']['media'];
+
+      if (isset($media['image'])) {
+        $media['image'] = ImageValueObject::fromArray($media['image']);
+      }
+
+      $data[$key]['fields']['media'] = MediaValueObject::fromArray($media);
+    }
+
+    return $data;
+  }
+
+}