From d0542813819cfa26df0e12489d6a0daae81973c1 Mon Sep 17 00:00:00 2001 From: Sergii Pavlenko Date: Mon, 15 Jul 2024 12:41:35 +0300 Subject: [PATCH] EWPP-4509: Add new fields for Gallery pattern. --- .../patterns/gallery/gallery.ui_patterns.yml | 23 ++ .../gallery/pattern-gallery.html.twig | 9 + tests/src/Kernel/fixtures/rendering.yml | 231 ++++++++++++++++++ 3 files changed, 263 insertions(+) diff --git a/templates/patterns/gallery/gallery.ui_patterns.yml b/templates/patterns/gallery/gallery.ui_patterns.yml index 101bc3934..f415b5d7a 100644 --- a/templates/patterns/gallery/gallery.ui_patterns.yml +++ b/templates/patterns/gallery/gallery.ui_patterns.yml @@ -146,3 +146,26 @@ gallery: description: "Number of visible items in an expandable gallery." preview: 3 escape: false + grid: + type: "boolean" + label: "Grid display" + description: "Display gallery as a grid. Default is false." + preview: true + escape: false + columns: + type: "numeric" + label: "Columns number" + description: "Number of columns. Default is 2. Only used if the grid display is enabled." + preview: 2 + escape: false + ratio: + type: "string" + label: "Aspect ratio" + description: "Image aspect ratio. Default is 3-2. Only used if the grid display is enabled." + preview: '3-2' + disable_hover: + type: "boolean" + label: "Disable hover" + description: "Hides the item's title on hover. Default is false." + preview: false + escape: false diff --git a/templates/patterns/gallery/pattern-gallery.html.twig b/templates/patterns/gallery/pattern-gallery.html.twig index 9d16cacbb..248388b06 100644 --- a/templates/patterns/gallery/pattern-gallery.html.twig +++ b/templates/patterns/gallery/pattern-gallery.html.twig @@ -17,6 +17,11 @@ } %} {% endif %} +{% if grid %} + {% set _columns = columns|default(2) %} + {% set _ratio = ratio|default('3-2') %} +{% endif %} + {% set _gallery = { 'overlay': { 'counter_separator': ' / ', @@ -63,6 +68,10 @@ 'expandable': expandable ?? true, 'visible_items': visible_items|default(8), 'footer': footer_link|default([]), + 'grid': grid|default(false), + 'column': _columns|default(null), + 'ratio': _ratio|default(null), + 'disable_hover': disable_hover|default(false), } %} {% if items|length > 1 %} diff --git a/tests/src/Kernel/fixtures/rendering.yml b/tests/src/Kernel/fixtures/rendering.yml index 7f82a304c..52c0afd47 100644 --- a/tests/src/Kernel/fixtures/rendering.yml +++ b/tests/src/Kernel/fixtures/rendering.yml @@ -772,6 +772,9 @@ media_type: 'image' expandable: false disable_overlay: true + columns: 4 + ratio: '3-1' + disable_hover: true assertions: count: '.ecl-gallery[data-ecl-gallery][data-ecl-gallery-not-expandable]': 1 @@ -785,6 +788,14 @@ '.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 + '.ecl-gallery--grid': 0 + '.ecl-gallery--col-2': 0 + '.ecl-gallery--col-3': 0 + '.ecl-gallery--col-4': 0 + '.ecl-gallery--col-5': 0 + '.ecl-gallery--ratio-3-2': 0 + '.ecl-gallery--ratio-3-1': 0 + '.ecl-gallery--no-hover': 1 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' @@ -845,6 +856,226 @@ 'dialog.ecl-gallery__overlay[data-ecl-gallery-overlay]': 1 'button.ecl-gallery__view-all[data-ecl-gallery-collapsed-label="See all"][data-ecl-gallery-expanded-label="Collapse"]': 1 '.ecl-gallery__footer-link': 1 + '.ecl-gallery--no-hover': 0 + equals: + '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) .ecl-gallery__meta': 'Copyright © 2021 EC' + '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) .ecl-gallery__image-container div.ecl-gallery__item-icon-wrapper svg.ecl-icon': '' + '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(3) .ecl-gallery__meta': 'Copyright © 2021, Author and Licence' + '.ecl-gallery__footer-link a.ecl-link.ecl-link--standalone.ecl-link--icon[href="http://example.com"] .ecl-link__label': 'Further media items' + '.ecl-gallery__footer-link a svg': '' + contains: + - 'A picture of a cat' + - 'Energy, let's save it!' + - 'Meanwhile in Lisbon, the capital of Portugal' +- array: + '#type': pattern + '#id': gallery + '#variant': default + '#fields': + items: + - thumbnail: + src: 'https://loremflickr.com/320/240/cat' + alt: 'Example alt text cat' + source: 'https://loremflickr.com/800/600/cat' + caption: 'A picture of a cat' + type: 'image' + - thumbnail: + src: 'https://loremflickr.com/320/240/dog' + alt: 'Example alt text dog' + source: 'https://www.youtube.com/watch?v=1-g73ty9v04' + caption: "Energy, let's save it!" + meta: 'Copyright © 2021 EC' + type: 'video' + - thumbnail: + src: 'https://loremflickr.com/800/600/lisbon' + alt: 'Example alt text' + 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/lisbon' + alt: 'Example alt text' + 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/320/240/cat' + alt: 'Example alt text cat' + source: 'https://loremflickr.com/800/600/cat' + caption: 'A picture of a cat' + type: 'image' + - thumbnail: + src: 'https://loremflickr.com/320/240/dog' + alt: 'Example alt text dog' + source: 'https://www.youtube.com/watch?v=1-g73ty9v04' + caption: "Energy, let's save it!" + meta: 'Copyright © 2021 EC' + type: 'video' + - thumbnail: + src: 'https://loremflickr.com/800/600/lisbon' + alt: 'Example alt text' + 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/lisbon' + alt: 'Example alt text' + caption: 'Meanwhile in Lisbon, the capital of Portugal' + meta: 'Copyright © 2021, Author and Licence' + source: 'https://loremflickr.com/800/600/lisbon' + media_type: 'image' + footer_link_url: 'http://example.com' + footer_link_label: 'Further media items' + footer_link_external: true + visible_items: 1 + grid: true + assertions: + count: + '.ecl-gallery[data-ecl-gallery-visible-items="1"]': 1 + '.ecl-gallery .ecl-gallery__list': 1 + '.ecl-gallery .ecl-gallery__list .ecl-gallery__item': 8 + '.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 + '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) .ecl-gallery__image[src="https://loremflickr.com/320/240/dog"]': 1 + '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) .ecl-gallery__image[alt="Example alt text dog"]': 1 + '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) figcaption.ecl-gallery__description': 1 + '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) .ecl-gallery__meta': 1 + '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) .ecl-gallery__image-container div.ecl-gallery__item-icon-wrapper svg.ecl-icon': 1 + '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(3) .ecl-gallery__image[src="https://loremflickr.com/800/600/lisbon"]': 1 + '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(3) .ecl-gallery__image[alt="Example alt text"]': 1 + '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(3) figcaption.ecl-gallery__description': 1 + '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(3) .ecl-gallery__meta': 1 + '.ecl-gallery .ecl-button.ecl-button--tertiary.ecl-gallery__slider-previous': 1 + '.ecl-gallery .ecl-button.ecl-button--tertiary.ecl-gallery__slider-next': 1 + 'dialog.ecl-gallery__overlay[data-ecl-gallery-overlay]': 1 + 'button.ecl-gallery__view-all[data-ecl-gallery-collapsed-label="See all"][data-ecl-gallery-expanded-label="Collapse"]': 1 + '.ecl-gallery__footer-link': 1 + '.ecl-gallery--grid': 1 + '.ecl-gallery--col-2': 1 + '.ecl-gallery--col-3': 0 + '.ecl-gallery--col-4': 0 + '.ecl-gallery--col-5': 0 + '.ecl-gallery--ratio-3-2': 1 + '.ecl-gallery--ratio-3-1': 0 + '.ecl-gallery--no-hover': 0 + equals: + '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) .ecl-gallery__meta': 'Copyright © 2021 EC' + '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) .ecl-gallery__image-container div.ecl-gallery__item-icon-wrapper svg.ecl-icon': '' + '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(3) .ecl-gallery__meta': 'Copyright © 2021, Author and Licence' + '.ecl-gallery__footer-link a.ecl-link.ecl-link--standalone.ecl-link--icon[href="http://example.com"] .ecl-link__label': 'Further media items' + '.ecl-gallery__footer-link a svg': '' + contains: + - 'A picture of a cat' + - 'Energy, let's save it!' + - 'Meanwhile in Lisbon, the capital of Portugal' +- array: + '#type': pattern + '#id': gallery + '#variant': default + '#fields': + items: + - thumbnail: + src: 'https://loremflickr.com/320/240/cat' + alt: 'Example alt text cat' + source: 'https://loremflickr.com/800/600/cat' + caption: 'A picture of a cat' + type: 'image' + - thumbnail: + src: 'https://loremflickr.com/320/240/dog' + alt: 'Example alt text dog' + source: 'https://www.youtube.com/watch?v=1-g73ty9v04' + caption: "Energy, let's save it!" + meta: 'Copyright © 2021 EC' + type: 'video' + - thumbnail: + src: 'https://loremflickr.com/800/600/lisbon' + alt: 'Example alt text' + 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/lisbon' + alt: 'Example alt text' + 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/320/240/cat' + alt: 'Example alt text cat' + source: 'https://loremflickr.com/800/600/cat' + caption: 'A picture of a cat' + type: 'image' + - thumbnail: + src: 'https://loremflickr.com/320/240/dog' + alt: 'Example alt text dog' + source: 'https://www.youtube.com/watch?v=1-g73ty9v04' + caption: "Energy, let's save it!" + meta: 'Copyright © 2021 EC' + type: 'video' + - thumbnail: + src: 'https://loremflickr.com/800/600/lisbon' + alt: 'Example alt text' + 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/lisbon' + alt: 'Example alt text' + caption: 'Meanwhile in Lisbon, the capital of Portugal' + meta: 'Copyright © 2021, Author and Licence' + source: 'https://loremflickr.com/800/600/lisbon' + media_type: 'image' + footer_link_url: 'http://example.com' + footer_link_label: 'Further media items' + footer_link_external: true + visible_items: 1 + grid: true + columns: 4 + ratio: '3-1' + disable_hover: true + assertions: + count: + '.ecl-gallery[data-ecl-gallery-visible-items="1"]': 1 + '.ecl-gallery .ecl-gallery__list': 1 + '.ecl-gallery .ecl-gallery__list .ecl-gallery__item': 8 + '.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 + '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) .ecl-gallery__image[src="https://loremflickr.com/320/240/dog"]': 1 + '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) .ecl-gallery__image[alt="Example alt text dog"]': 1 + '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) figcaption.ecl-gallery__description': 1 + '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) .ecl-gallery__meta': 1 + '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) .ecl-gallery__image-container div.ecl-gallery__item-icon-wrapper svg.ecl-icon': 1 + '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(3) .ecl-gallery__image[src="https://loremflickr.com/800/600/lisbon"]': 1 + '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(3) .ecl-gallery__image[alt="Example alt text"]': 1 + '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(3) figcaption.ecl-gallery__description': 1 + '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(3) .ecl-gallery__meta': 1 + '.ecl-gallery .ecl-button.ecl-button--tertiary.ecl-gallery__slider-previous': 1 + '.ecl-gallery .ecl-button.ecl-button--tertiary.ecl-gallery__slider-next': 1 + 'dialog.ecl-gallery__overlay[data-ecl-gallery-overlay]': 1 + 'button.ecl-gallery__view-all[data-ecl-gallery-collapsed-label="See all"][data-ecl-gallery-expanded-label="Collapse"]': 1 + '.ecl-gallery__footer-link': 1 + '.ecl-gallery--grid': 1 + '.ecl-gallery--col-2': 0 + '.ecl-gallery--col-3': 0 + '.ecl-gallery--col-4': 1 + '.ecl-gallery--col-5': 0 + '.ecl-gallery--ratio-3-2': 0 + '.ecl-gallery--ratio-3-1': 1 + '.ecl-gallery--no-hover': 1 equals: '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) .ecl-gallery__meta': 'Copyright © 2021 EC' '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) .ecl-gallery__image-container div.ecl-gallery__item-icon-wrapper svg.ecl-icon': ''