EWPP-4383: Update gallery to render media name as title parameter.

modules/oe_theme_helper/src/Plugin/Field/FieldFormatter/MediaGalleryFormatter.php

@@ -234,6 +234,9 @@ public function viewElements(FieldItemListInterface $items, $langcode) {
       // Collect the attributes from the fields specified in the configuration.
       $values += $this->extractAttributes($media);
 
+      // Use media item's name as title.
+      $values['title'] = $media->getName();
+
       // Provide a default caption value, if none is present.
       if ($values['caption'] === ' ') {
         $values['caption'] = $media->label();

modules/oe_theme_helper/tests/src/Kernel/Plugin/Field/FieldFormatter/MediaGalleryFormatterTest.php

@@ -208,6 +208,8 @@ public function testFormatter(): void {
     $image_node = $items->first()->filter('img');
     $this->assertEquals('Alt text for test image.', $image_node->attr('alt'));
     $this->assertStringEndsWith('/example_1.jpeg', $image_node->attr('src'));
+    $title = $items->first()->filter('.ecl-gallery__description span.ecl-gallery__title');
+    $this->assertStringContainsString('Test image title', $title->html());
     $caption = $items->first()->filter('.ecl-gallery__description');
     $this->assertStringContainsString('Extra image title', $caption->html());
     $this->assertEmpty($caption->filter('.ecl-gallery__meta')->html());
@@ -223,6 +225,8 @@ public function testFormatter(): void {
     $image_node = $items->eq(1)->filter('img');
     $this->assertEquals('', $image_node->attr('alt'));
     $this->assertStringEndsWith('/oembed_thumbnails/' . $expected_thumbnail_name, $image_node->attr('src'));
+    $title = $items->eq(1)->filter('.ecl-gallery__description span.ecl-gallery__title');
+    $this->assertStringContainsString("Energy, let's save it!", $title->html());
     $caption = $items->eq(1)->filter('.ecl-gallery__description');
     $this->assertStringContainsString($video_media->label(), $caption->html());
     $this->assertEmpty($caption->filter('.ecl-gallery__meta')->html());
@@ -235,6 +239,8 @@ public function testFormatter(): void {
     $image_node = $items->eq(2)->filter('img');
     $this->assertEquals('Alt text for test video iframe.', $image_node->attr('alt'));
     $this->assertStringEndsWith('/placeholder.png', $image_node->attr('src'));
+    $title = $items->eq(2)->filter('.ecl-gallery__description span.ecl-gallery__title');
+    $this->assertStringContainsString('Test video iframe title', $title->html());
     $caption = $items->eq(2)->filter('.ecl-gallery__description');
     $this->assertStringContainsString('Test video iframe title', $caption->html());
     $this->assertEmpty($caption->filter('.ecl-gallery__meta')->html());

src/ValueObject/GalleryItemValueObject.php

@@ -42,6 +42,13 @@ class GalleryItemValueObject extends ValueObjectBase {
    */
   protected $type;
 
+  /**
+   * The title of the gallery item.
+   *
+   * @var string
+   */
+  protected $title;
+
   /**
    * The caption of the gallery item.
    *
@@ -69,8 +76,11 @@ class GalleryItemValueObject extends ValueObjectBase {
    *   Caption for the gallery item.
    * @param string $meta
    *   Meta for the gallery item, such as a copyright note.
+   * @param string $title
+   *   Title for the gallery item.
    */
-  private function __construct(ImageValueObjectInterface $thumbnail, string $source, string $type, string $caption = '', string $meta = '') {
+  private function __construct(ImageValueObjectInterface $thumbnail, string $source, string $type, string $caption = '', string $meta = '', string $title = '') {
+    $this->title = $title;
     $this->caption = $caption;
     $this->thumbnail = $thumbnail;
     $this->meta = $meta;
@@ -90,6 +100,7 @@ public static function fromArray(array $values = []): ValueObjectInterface {
       'type' => GalleryItemValueObject::TYPE_IMAGE,
       'caption' => '',
       'meta' => '',
+      'title' => '',
     ];
 
     // @todo Maybe expect always a thumbnail object instead of also an array,
@@ -103,10 +114,21 @@ public static function fromArray(array $values = []): ValueObjectInterface {
       $values['source'],
       $values['type'],
       $values['caption'],
-      $values['meta']
+      $values['meta'],
+      $values['title']
     );
   }
 
+  /**
+   * Getter.
+   *
+   * @return string
+   *   Property value.
+   */
+  public function getTitle(): string {
+    return $this->title;
+  }
+
   /**
    * Getter.
    *
@@ -172,6 +194,7 @@ public function getArray(): array {
       ],
       'description' => $this->getCaption(),
       'meta' => $this->getMeta(),
+      'title' => $this->getTitle(),
       'icon' => 'image',
     ];
 

templates/patterns/gallery/gallery.ui_patterns.yml

@@ -14,6 +14,7 @@ gallery:
         - thumbnail:
             src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-external-video.jpg'
             alt: 'Example alt text'
+          title: 'Bio-defence'
           caption: 'Bio-defence preparedness programme'
           meta: 'Copyright © 2021, Author and Licence'
           source: 'https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4'
@@ -22,19 +23,22 @@ gallery:
             src: 'https://loremflickr.com/800/600/cat'
             alt: 'Example alt text'
           source: 'https://loremflickr.com/800/600/cat'
+          title: 'Cat'
           caption: 'A picture of a cat'
           meta: 'Copyright © 2021, Author and Licence'
           media_type: 'image'
         - thumbnail:
             src: 'https://loremflickr.com/800/600/lisbon'
             alt: 'Example alt text'
+          title: 'Lisbon'
           caption: 'Meanwhile in Lisbon, the capital of Portugal'
           meta: 'Copyright © 2021, Author and Licence'
           source: 'https://loremflickr.com/800/600/lisbon'
           media_type: 'image'
         - thumbnail:
             src: 'https://loremflickr.com/800/600/kiev'
             alt: 'Example alt text'
+          title: 'Kiev'
           caption: 'Meanwhile in Kiev, the capital of Ukraine'
           meta: 'Copyright © 2021, Author and Licence'
           source: 'https://loremflickr.com/800/600/kiev'

tests/src/Kernel/fixtures/rendering.yml

@@ -766,6 +766,7 @@
             src: 'https://loremflickr.com/320/240/cat'
             alt: 'Example alt text'
           source: 'https://loremflickr.com/800/600/cat'
+          title: 'Cat'
           caption: 'A picture of a cat'
           meta: 'Copyright © 2021, Author and Licence'
           media_type: 'image'
@@ -778,12 +779,14 @@
       '.ecl-gallery .ecl-gallery__list .ecl-gallery__item': 1
       '.ecl-gallery .ecl-gallery__list .ecl-gallery__item .ecl-gallery__image[src="https://loremflickr.com/320/240/cat"]': 1
       '.ecl-gallery .ecl-gallery__list .ecl-gallery__item .ecl-gallery__image[alt="Example alt text"]': 1
+      '.ecl-gallery .ecl-gallery__list .ecl-gallery__item figcaption.ecl-gallery__description span.ecl-gallery__title': 1
       '.ecl-gallery .ecl-gallery__list .ecl-gallery__item figcaption.ecl-gallery__description': 1
       '.ecl-gallery .ecl-gallery__list .ecl-gallery__item .ecl-gallery__meta': 1
       '.ecl-gallery .ecl-button.ecl-button--ghost.ecl-gallery__slider-previous': 0
       '.ecl-gallery .ecl-button.ecl-button--ghost.ecl-gallery__slider-next': 0
       '.ecl-gallery__footer-link': 0
     equals:
+      '.ecl-gallery .ecl-gallery__list .ecl-gallery__item figcaption.ecl-gallery__description span.ecl-gallery__title': 'Cat'
       '.ecl-gallery .ecl-gallery__list .ecl-gallery__item .ecl-gallery__meta': 'Copyright © 2021, Author and Licence'
     contains:
       - 'A picture of a cat'
@@ -824,6 +827,7 @@
       '.ecl-gallery .ecl-gallery__list .ecl-gallery__item': 3
       '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(1) .ecl-gallery__image[src="https://loremflickr.com/320/240/cat"]': 1
       '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(1) .ecl-gallery__image[alt="Example alt text cat"]': 1
+      '.ecl-gallery .ecl-gallery__list .ecl-gallery__item figcaption.ecl-gallery__description span.ecl-gallery__title': 0
       '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(1) figcaption.ecl-gallery__description': 1
       '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(1) .ecl-gallery__meta': 0
       '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) a.ecl-gallery__item-link[href="https://www.youtube.com/watch?v=1-g73ty9v04"]': 1