Skip to content

Commit

Permalink
Merge pull request #1479 from openeuropa/EWPP-4515
Browse files Browse the repository at this point in the history 
EWPP-4515: Add new fields for Gallery pattern.
  • Loading branch information
@upchuk
upchuk authored Aug 11, 2024
2 parents b0458bf + 015613f commit 36beabe
Show file tree
Hide file tree
Showing 3 changed files with 263 additions and 0 deletions.
23 changes: 23 additions & 0 deletions templates/patterns/gallery/gallery.ui_patterns.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
9 changes: 9 additions & 0 deletions templates/patterns/gallery/pattern-gallery.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,11 @@
} %}
{% endif %}

{% if grid %}
{% set _columns = columns|default(2) %}
{% set _ratio = ratio|default('3-2') %}
{% endif %}

{% set _gallery = {
'overlay': {
'counter_separator': ' / ',
Expand Down Expand Up @@ -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 %}
Expand Down
231 changes: 231 additions & 0 deletions tests/src/Kernel/fixtures/rendering.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -791,6 +791,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
Expand All @@ -804,6 +807,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'
Expand Down Expand Up @@ -864,6 +875,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': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#play-filled"></use>'
'.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': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#external"></use>'
contains:
- 'A picture of a cat'
- 'Energy, let&#039;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': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#play-filled"></use>'
'.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': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#external"></use>'
contains:
- 'A picture of a cat'
- 'Energy, let&#039;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': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#play-filled"></use>'
Expand Down

0 comments on commit 36beabe

Please sign in to comment.