diff --git a/modules/oe_theme_helper/translations/oe_theme_helper-bg.po b/modules/oe_theme_helper/translations/oe_theme_helper-bg.po
index e5916ad8a..10e5abc24 100644
--- a/modules/oe_theme_helper/translations/oe_theme_helper-bg.po
+++ b/modules/oe_theme_helper/translations/oe_theme_helper-bg.po
@@ -626,3 +626,6 @@ msgstr "@percentage% от общия бюджет"
msgid "Access item's children"
msgstr "Достъп до поделементите"
+
+msgid "Collapse"
+msgstr "Свиване"
diff --git a/modules/oe_theme_helper/translations/oe_theme_helper-cs.po b/modules/oe_theme_helper/translations/oe_theme_helper-cs.po
index 52114a176..6c753d456 100644
--- a/modules/oe_theme_helper/translations/oe_theme_helper-cs.po
+++ b/modules/oe_theme_helper/translations/oe_theme_helper-cs.po
@@ -626,3 +626,6 @@ msgstr "@percentage % celkového rozpočtu"
msgid "Access item's children"
msgstr "Rozbalit podkapitoly"
+
+msgid "Collapse"
+msgstr "Sbalit"
diff --git a/modules/oe_theme_helper/translations/oe_theme_helper-da.po b/modules/oe_theme_helper/translations/oe_theme_helper-da.po
index f41c733bc..4ce2c903b 100644
--- a/modules/oe_theme_helper/translations/oe_theme_helper-da.po
+++ b/modules/oe_theme_helper/translations/oe_theme_helper-da.po
@@ -626,3 +626,6 @@ msgstr "@percentage % af det samlede budget"
msgid "Access item's children"
msgstr "Gå til fanens underemner"
+
+msgid "Collapse"
+msgstr "Skjul"
diff --git a/modules/oe_theme_helper/translations/oe_theme_helper-de.po b/modules/oe_theme_helper/translations/oe_theme_helper-de.po
index 0985ddab2..e088f0c57 100644
--- a/modules/oe_theme_helper/translations/oe_theme_helper-de.po
+++ b/modules/oe_theme_helper/translations/oe_theme_helper-de.po
@@ -626,3 +626,6 @@ msgstr "@percentage % der Gesamtmittel"
msgid "Access item's children"
msgstr "Zu den Unterkategorien"
+
+msgid "Collapse"
+msgstr "Einklappen"
diff --git a/modules/oe_theme_helper/translations/oe_theme_helper-el.po b/modules/oe_theme_helper/translations/oe_theme_helper-el.po
index 48a1cb307..d1778434e 100644
--- a/modules/oe_theme_helper/translations/oe_theme_helper-el.po
+++ b/modules/oe_theme_helper/translations/oe_theme_helper-el.po
@@ -626,3 +626,6 @@ msgstr "@percentage % του συνολικού προϋπολογισμού"
msgid "Access item's children"
msgstr "Πρόσβαση στις υποκατηγορίες του θέματος"
+
+msgid "Collapse"
+msgstr "Σύμπτυξη"
diff --git a/modules/oe_theme_helper/translations/oe_theme_helper-es.po b/modules/oe_theme_helper/translations/oe_theme_helper-es.po
index c6e46228f..6967ec7de 100644
--- a/modules/oe_theme_helper/translations/oe_theme_helper-es.po
+++ b/modules/oe_theme_helper/translations/oe_theme_helper-es.po
@@ -626,3 +626,6 @@ msgstr "@percentage% de la dotación presupuestaria global"
msgid "Access item's children"
msgstr "Acceder a subelementos"
+
+msgid "Collapse"
+msgstr "Contraer"
diff --git a/modules/oe_theme_helper/translations/oe_theme_helper-et.po b/modules/oe_theme_helper/translations/oe_theme_helper-et.po
index 7e4d3975e..40e72d856 100644
--- a/modules/oe_theme_helper/translations/oe_theme_helper-et.po
+++ b/modules/oe_theme_helper/translations/oe_theme_helper-et.po
@@ -626,3 +626,6 @@ msgstr "@percentage% kogueelarvest"
msgid "Access item's children"
msgstr "Juurdepääs alamelementidele"
+
+msgid "Collapse"
+msgstr "Ahenda"
diff --git a/modules/oe_theme_helper/translations/oe_theme_helper-fi.po b/modules/oe_theme_helper/translations/oe_theme_helper-fi.po
index db65f4143..a4012d067 100644
--- a/modules/oe_theme_helper/translations/oe_theme_helper-fi.po
+++ b/modules/oe_theme_helper/translations/oe_theme_helper-fi.po
@@ -626,3 +626,6 @@ msgstr "@percentage % kokonaisbudjetista"
msgid "Access item's children"
msgstr "Avaa alivalinnat"
+
+msgid "Collapse"
+msgstr "Supista"
diff --git a/modules/oe_theme_helper/translations/oe_theme_helper-fr.po b/modules/oe_theme_helper/translations/oe_theme_helper-fr.po
index 23303e5d9..247d6234a 100644
--- a/modules/oe_theme_helper/translations/oe_theme_helper-fr.po
+++ b/modules/oe_theme_helper/translations/oe_theme_helper-fr.po
@@ -626,3 +626,6 @@ msgstr "@percentage % du budget global"
msgid "Access item's children"
msgstr "Accéder aux sous-éléments"
+
+msgid "Collapse"
+msgstr "Réduire"
diff --git a/modules/oe_theme_helper/translations/oe_theme_helper-ga.po b/modules/oe_theme_helper/translations/oe_theme_helper-ga.po
index cd70cc358..72cee760b 100644
--- a/modules/oe_theme_helper/translations/oe_theme_helper-ga.po
+++ b/modules/oe_theme_helper/translations/oe_theme_helper-ga.po
@@ -626,3 +626,6 @@ msgstr "@percentage% den bhuiséad foriomlán"
msgid "Access item's children"
msgstr "Fo-ábhair an phríomhábhair"
+
+msgid "Collapse"
+msgstr "Leacaigh"
diff --git a/modules/oe_theme_helper/translations/oe_theme_helper-hr.po b/modules/oe_theme_helper/translations/oe_theme_helper-hr.po
index 64595762c..f4a198083 100644
--- a/modules/oe_theme_helper/translations/oe_theme_helper-hr.po
+++ b/modules/oe_theme_helper/translations/oe_theme_helper-hr.po
@@ -626,3 +626,6 @@ msgstr "@percentage % ukupnog proračuna"
msgid "Access item's children"
msgstr "Pristup podelementima"
+
+msgid "Collapse"
+msgstr "Sažmi"
diff --git a/modules/oe_theme_helper/translations/oe_theme_helper-hu.po b/modules/oe_theme_helper/translations/oe_theme_helper-hu.po
index b2f543ce0..3b4a67ef5 100644
--- a/modules/oe_theme_helper/translations/oe_theme_helper-hu.po
+++ b/modules/oe_theme_helper/translations/oe_theme_helper-hu.po
@@ -626,3 +626,6 @@ msgstr "A teljes költségvetés @percentage%-a"
msgid "Access item's children"
msgstr "Hozzáférés az alelemekhez"
+
+msgid "Collapse"
+msgstr "Elrejtés"
diff --git a/modules/oe_theme_helper/translations/oe_theme_helper-it.po b/modules/oe_theme_helper/translations/oe_theme_helper-it.po
index 4096d0504..c94be169c 100644
--- a/modules/oe_theme_helper/translations/oe_theme_helper-it.po
+++ b/modules/oe_theme_helper/translations/oe_theme_helper-it.po
@@ -626,3 +626,6 @@ msgstr "@percentage% del bilancio complessivo"
msgid "Access item's children"
msgstr "Accedi agli elementi figlio"
+
+msgid "Collapse"
+msgstr "Comprimi"
diff --git a/modules/oe_theme_helper/translations/oe_theme_helper-lt.po b/modules/oe_theme_helper/translations/oe_theme_helper-lt.po
index 87f8161ab..34adaa4bb 100644
--- a/modules/oe_theme_helper/translations/oe_theme_helper-lt.po
+++ b/modules/oe_theme_helper/translations/oe_theme_helper-lt.po
@@ -626,3 +626,6 @@ msgstr "@percentage % bendro biudžeto"
msgid "Access item's children"
msgstr "Prieiga prie poskyrių"
+
+msgid "Collapse"
+msgstr "Suskleisti"
diff --git a/modules/oe_theme_helper/translations/oe_theme_helper-lv.po b/modules/oe_theme_helper/translations/oe_theme_helper-lv.po
index 67cc9b71b..7e261557b 100644
--- a/modules/oe_theme_helper/translations/oe_theme_helper-lv.po
+++ b/modules/oe_theme_helper/translations/oe_theme_helper-lv.po
@@ -626,3 +626,6 @@ msgstr "@percentage % no kopējā budžeta"
msgid "Access item's children"
msgstr "Piekļūt pakārtotajiem elementiem"
+
+msgid "Collapse"
+msgstr "Sakļaut"
diff --git a/modules/oe_theme_helper/translations/oe_theme_helper-mt.po b/modules/oe_theme_helper/translations/oe_theme_helper-mt.po
index 99c8cfc66..9a494c20e 100644
--- a/modules/oe_theme_helper/translations/oe_theme_helper-mt.po
+++ b/modules/oe_theme_helper/translations/oe_theme_helper-mt.po
@@ -626,3 +626,6 @@ msgstr "@percentage% tal-baġit globali"
msgid "Access item's children"
msgstr "Aċċessa s-sottoelement tat-tfal"
+
+msgid "Collapse"
+msgstr "Ikkollassa"
diff --git a/modules/oe_theme_helper/translations/oe_theme_helper-nl.po b/modules/oe_theme_helper/translations/oe_theme_helper-nl.po
index 0c163e45e..d00023d5c 100644
--- a/modules/oe_theme_helper/translations/oe_theme_helper-nl.po
+++ b/modules/oe_theme_helper/translations/oe_theme_helper-nl.po
@@ -626,3 +626,6 @@ msgstr "@percentage% van de totale begroting"
msgid "Access item's children"
msgstr "Onderliggende elementen tonen"
+
+msgid "Collapse"
+msgstr "Inklappen"
diff --git a/modules/oe_theme_helper/translations/oe_theme_helper-pl.po b/modules/oe_theme_helper/translations/oe_theme_helper-pl.po
index 4e4560251..9157d4841 100644
--- a/modules/oe_theme_helper/translations/oe_theme_helper-pl.po
+++ b/modules/oe_theme_helper/translations/oe_theme_helper-pl.po
@@ -626,3 +626,6 @@ msgstr "@percentage% łącznego budżetu"
msgid "Access item's children"
msgstr "Rozwiń podpunkty"
+
+msgid "Collapse"
+msgstr "Zwiń"
diff --git a/modules/oe_theme_helper/translations/oe_theme_helper-pt-pt.po b/modules/oe_theme_helper/translations/oe_theme_helper-pt-pt.po
index 68d01e518..86000a39d 100644
--- a/modules/oe_theme_helper/translations/oe_theme_helper-pt-pt.po
+++ b/modules/oe_theme_helper/translations/oe_theme_helper-pt-pt.po
@@ -626,3 +626,6 @@ msgstr "@percentage% do orçamento global"
msgid "Access item's children"
msgstr "Aceder a sub-elementos"
+
+msgid "Collapse"
+msgstr "Fechar"
diff --git a/modules/oe_theme_helper/translations/oe_theme_helper-ro.po b/modules/oe_theme_helper/translations/oe_theme_helper-ro.po
index 56979a7a1..958c537bd 100644
--- a/modules/oe_theme_helper/translations/oe_theme_helper-ro.po
+++ b/modules/oe_theme_helper/translations/oe_theme_helper-ro.po
@@ -626,3 +626,6 @@ msgstr "@percentage% din bugetul total"
msgid "Access item's children"
msgstr "Accesați submeniul"
+
+msgid "Collapse"
+msgstr "Restrângeți"
diff --git a/modules/oe_theme_helper/translations/oe_theme_helper-sk.po b/modules/oe_theme_helper/translations/oe_theme_helper-sk.po
index 3ea4b5326..9c1ee2467 100644
--- a/modules/oe_theme_helper/translations/oe_theme_helper-sk.po
+++ b/modules/oe_theme_helper/translations/oe_theme_helper-sk.po
@@ -626,3 +626,6 @@ msgstr "@percentage% celkového rozpočtu"
msgid "Access item's children"
msgstr "Rozbaliť podkapitoly"
+
+msgid "Collapse"
+msgstr "Zbaliť"
diff --git a/modules/oe_theme_helper/translations/oe_theme_helper-sl.po b/modules/oe_theme_helper/translations/oe_theme_helper-sl.po
index 1ec5bf322..3b599837f 100644
--- a/modules/oe_theme_helper/translations/oe_theme_helper-sl.po
+++ b/modules/oe_theme_helper/translations/oe_theme_helper-sl.po
@@ -626,3 +626,6 @@ msgstr "@percentage % celotnega proračuna"
msgid "Access item's children"
msgstr "Dostop do podelementov"
+
+msgid "Collapse"
+msgstr "Skrči"
diff --git a/modules/oe_theme_helper/translations/oe_theme_helper-sv.po b/modules/oe_theme_helper/translations/oe_theme_helper-sv.po
index d3c3d251c..b2efc172d 100644
--- a/modules/oe_theme_helper/translations/oe_theme_helper-sv.po
+++ b/modules/oe_theme_helper/translations/oe_theme_helper-sv.po
@@ -626,3 +626,6 @@ msgstr "@percentage % av den totala budgeten"
msgid "Access item's children"
msgstr "Gå till undersidorna"
+
+msgid "Collapse"
+msgstr "Dölj"
diff --git a/templates/patterns/gallery/gallery.ui_patterns.yml b/templates/patterns/gallery/gallery.ui_patterns.yml
index b836aaa61..fecb316ca 100644
--- a/templates/patterns/gallery/gallery.ui_patterns.yml
+++ b/templates/patterns/gallery/gallery.ui_patterns.yml
@@ -109,3 +109,36 @@ gallery:
meta: 'Copyright © 2021, Author and Licence'
source: 'https://loremflickr.com/800/600/vilnius'
media_type: 'image'
+ disable_overlay:
+ type: "boolean"
+ label: "Disable overlay"
+ description: "Disables the overlay functionality."
+ preview: true
+ escape: false
+ expandable:
+ type: "boolean"
+ label: "Expandable"
+ description: "Whether the 'See all' link is shown or all items are shown."
+ preview: true
+ escape: false
+ footer_link_url:
+ type: "Url"
+ label: "URL"
+ description: "Footer link URL."
+ preview: "http://example.com"
+ footer_link_label:
+ type: "text"
+ label: "Link text"
+ description: "Footer link text."
+ preview: "Further media items"
+ footer_link_external:
+ type: "boolean"
+ label: "External link"
+ description: "Whether the footer URL is external or not."
+ preview: true
+ visible_items:
+ type: "numeric"
+ label: "Visible items"
+ description: "Number of visible items in an expandable gallery."
+ preview: 3
+ escape: false
diff --git a/templates/patterns/gallery/pattern-gallery.html.twig b/templates/patterns/gallery/pattern-gallery.html.twig
index aab370aa8..e7c7d9013 100644
--- a/templates/patterns/gallery/pattern-gallery.html.twig
+++ b/templates/patterns/gallery/pattern-gallery.html.twig
@@ -18,6 +18,17 @@
{% set _items = _items|merge([_item]) %}
{% endfor %}
+{% if footer_link_url is not empty %}
+ {% set footer_link = {
+ 'link': {
+ 'label': footer_link_label|default('Further media items'|t),
+ 'path': footer_link_url,
+ 'icon_path': ecl_icon_path,
+ 'external': footer_link_external,
+ },
+ } %}
+{% endif %}
+
{% set _gallery = {
'overlay': {
'counter_separator': ' / ',
@@ -56,9 +67,13 @@
},
},
'view_all_label': "See all"|t,
- 'view_all_expanded_label': "Back"|t,
+ 'view_all_expanded_label': "Collapse"|t,
'counter_label': "media items"|t,
- 'items': _items
+ 'items': _items,
+ 'disable_overlay': disable_overlay ?? false,
+ 'expandable': expandable ?? true,
+ 'visible_items': visible_items|default(8),
+ 'footer': footer_link|default([]),
} %}
{% if _items|length > 1 %}
diff --git a/tests/src/Kernel/fixtures/rendering.yml b/tests/src/Kernel/fixtures/rendering.yml
index 847b54329..c3c0042a8 100644
--- a/tests/src/Kernel/fixtures/rendering.yml
+++ b/tests/src/Kernel/fixtures/rendering.yml
@@ -889,9 +889,11 @@
caption: 'A picture of a cat'
meta: 'Copyright © 2021, Author and Licence'
media_type: 'image'
+ expandable: false
+ disable_overlay: true
assertions:
count:
- '.ecl-gallery': 1
+ '.ecl-gallery[data-ecl-gallery][data-ecl-gallery-not-expandable]': 1
'.ecl-gallery .ecl-gallery__list': 1
'.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
@@ -901,6 +903,7 @@
'.ecl-gallery .ecl-gallery__list .ecl-gallery__item figcaption.ecl-gallery__description svg.ecl-icon': 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 .ecl-gallery__meta': 'Copyright © 2021, Author and Licence'
'.ecl-gallery .ecl-gallery__list .ecl-gallery__item svg.ecl-icon': ''
@@ -925,11 +928,22 @@
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'
+ footer_link_url: 'http://example.com'
+ footer_link_label: 'Further media items'
+ footer_link_external: true
+ visible_items: 1
assertions:
count:
- '.ecl-gallery': 1
+ '.ecl-gallery[data-ecl-gallery-visible-items="1"]': 1
'.ecl-gallery .ecl-gallery__list': 1
- '.ecl-gallery .ecl-gallery__list .ecl-gallery__item': 2
+ '.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:nth-child(1) figcaption.ecl-gallery__description': 1
@@ -941,15 +955,27 @@
'.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 figcaption.ecl-gallery__description 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-gallery__list .ecl-gallery__item:nth-child(3) .ecl-gallery__image-container figcaption.ecl-gallery__description svg.ecl-icon': 1
'.ecl-gallery .ecl-button.ecl-button--ghost.ecl-gallery__slider-previous': 1
'.ecl-gallery .ecl-button.ecl-button--ghost.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
equals:
'.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(1) .ecl-gallery__image-container svg.ecl-icon': ''
'.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 figcaption.ecl-gallery__description 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.ecl-link--icon-after[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': list_item