From beeda7837e0e205dc0fe873c094a0602f74d2753 Mon Sep 17 00:00:00 2001 From: 22Alexandra Date: Mon, 3 Jun 2024 12:33:03 +0300 Subject: [PATCH] EWPP-4383: Update gallery to render media name as title parameter. --- .../FieldFormatter/MediaGalleryFormatter.php | 3 +++ .../MediaGalleryFormatterTest.php | 6 +++++ src/ValueObject/GalleryItemValueObject.php | 27 +++++++++++++++++-- .../patterns/gallery/gallery.ui_patterns.yml | 4 +++ tests/src/Kernel/fixtures/rendering.yml | 4 +++ 5 files changed, 42 insertions(+), 2 deletions(-) diff --git a/modules/oe_theme_helper/src/Plugin/Field/FieldFormatter/MediaGalleryFormatter.php b/modules/oe_theme_helper/src/Plugin/Field/FieldFormatter/MediaGalleryFormatter.php index 1df627f4e..59739b0a8 100644 --- a/modules/oe_theme_helper/src/Plugin/Field/FieldFormatter/MediaGalleryFormatter.php +++ b/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(); diff --git a/modules/oe_theme_helper/tests/src/Kernel/Plugin/Field/FieldFormatter/MediaGalleryFormatterTest.php b/modules/oe_theme_helper/tests/src/Kernel/Plugin/Field/FieldFormatter/MediaGalleryFormatterTest.php index a1d90215e..4a1857452 100644 --- a/modules/oe_theme_helper/tests/src/Kernel/Plugin/Field/FieldFormatter/MediaGalleryFormatterTest.php +++ b/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()); diff --git a/src/ValueObject/GalleryItemValueObject.php b/src/ValueObject/GalleryItemValueObject.php index e4b7ab2c8..c4228baaf 100644 --- a/src/ValueObject/GalleryItemValueObject.php +++ b/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', ]; diff --git a/templates/patterns/gallery/gallery.ui_patterns.yml b/templates/patterns/gallery/gallery.ui_patterns.yml index fecb316ca..101bc3934 100644 --- a/templates/patterns/gallery/gallery.ui_patterns.yml +++ b/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,12 +23,14 @@ 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' @@ -35,6 +38,7 @@ gallery: - 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' diff --git a/tests/src/Kernel/fixtures/rendering.yml b/tests/src/Kernel/fixtures/rendering.yml index 11fd69d93..67f8f1bdc 100644 --- a/tests/src/Kernel/fixtures/rendering.yml +++ b/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