4.1.2 • Published 2 months ago
@ecl/twig-component-gallery v4.1.2
ECL Gallery
npm package: @ecl/twig-component-gallery
npm install --save @ecl/twig-component-gallery
Parameters
- "overlay" (object) (default: {})
- "close" (object) (default: {}): object of type button
- "previous" (object) (default: {}): object of type button
- "next" (object) (default: {}): object of type button
- "counter_separator" (string) (default: '')
- "full_screen_label" (string) (default: '')
- "download" (object) (default: {}): object of type link
- "share" (object) (default: {}): object of type link
- "items" (array) (default: [])
- "description" (string) (default: '')
- "meta" (string) (default: '')
- "icon" (object) (default: {}): object of type icon
- "picture" (optional) (object) (default: {}) object of type picture
- "video" (optional) (object) (default: {})
- "embedded_video" (optional) (object) (default: {})
- "share_path" (optional) (string) (default: '')
- "visible_items" (integer) (default: 8) Number of visible items in an expandable gallery
- "expandable" (boolean) (default: true) collapsible/expandable gallery
- "icon_path" (string) (default: '') Path to the icon sprite
- "footer" (object) (default: {}) Footer link
- "view_all_label" (string) (default: '') Label of the view all button
- "view_all_expanded_label" (string) (default: '') Label when the gallery is expanded
- "counter_label" (string) (default: '') Label of the counter
- "disable_overlay" (boolean) (default: false) Disables the overlay functionality
- "full_width" (boolean) (default: false) Full width gallery for desktop and tablet viewports
- "selected_item_id" (int) (default: 0)
- "extra_classes" (optional) (string) (default: '') Extra classes (space separated)
- "extra_attributes" (optional) (array) (default: []) Extra attributes
- "name" (string) Attribute name, eg. 'data-test'
- "value" (string) Attribute value, eg: 'data-test-1'
Example :
{% include '@ecl/gallery/gallery.html.twig' with {
view_all_label: 'View all',
counter_label: 'Media files in this gallery' ,
visible_items: 6,
disable_overlay: false,
items: [
{
picture: {
img: {
src: 'path/to/image.jpg',
alt: 'Image 1',
},
},
description:
'The EU in brief, institutions and bodies, countries, symbols, history, facts and figures',
meta: 'Copyright, Author, Licence for image 1',
share_href: '/share#example-image.jpg',
},
{
picture: {
img: {
src: 'path/to/image2.jpg',
alt: 'Image 2',
},
},
description: 'Living, working, travelling in the EU',
meta: 'Copyright, Author, Licence for image 2',
icon: {
path: 'path/to/icons.svg',
name: 'audio',
},
share_href: '/share#example-image2.jpg',
},
...
],
footer: {
link: {
label: "Link to further media items",
path: "/example",
aria_label: "View all link aria-label value"
},
icon: {
path: "/icons.svg",
name: "external",
size: "s"
}
},
overlay: {
close: {
variant: 'ghost',
label: 'Close',
icon: {
path: 'path/to/icons.svg',
name: 'close',
size: 's',
},
},
previous: {
variant: 'ghost',
label: 'Previous',
icon: {
path: 'path/to/icons.svg',
name: 'corner-arrow',
transform: 'rotate-270',
size: 'l',
},
icon_position: 'before',
},
next: {
variant: 'ghost',
label: 'Next',
icon: {
path: 'path/to/icons.svg',
name: 'corner-arrow',
transform: 'rotate-90',
size: 'l',
},
},
counter_separator: 'of',
full_screen_label: 'View original',
share: {
label: 'Share',
icon: {
path: 'path/to/icons.svg',
name: 'share',
size: 'fluid',
},
},
},
} %}
4.1.2
2 months ago
4.1.1
2 months ago
4.1.0
2 months ago
4.0.2
3 months ago
4.0.1
3 months ago
4.0.0
4 months ago
4.0.0-beta-3
4 months ago
4.0.0-beta-2
4 months ago
4.0.0-beta-1
4 months ago
3.13.0
5 months ago
3.12.1
6 months ago
3.12.0
6 months ago
3.9.1
11 months ago
3.9.0
11 months ago
3.8.5
11 months ago
3.11.0
8 months ago
3.10.0
9 months ago
3.11.1
7 months ago
3.8.4
1 year ago
3.8.3
1 year ago
3.8.2
1 year ago
3.8.1
1 year ago
3.8.0
1 year ago
3.7.1
1 year ago
3.7.0
1 year ago
3.6.0
2 years ago
3.5.1
2 years ago
3.4.2
2 years ago
3.5.0
2 years ago
3.4.0
2 years ago
3.3.4
2 years ago
3.3.3
2 years ago
3.4.1
2 years ago
3.3.1
2 years ago
3.3.0
2 years ago
3.3.2
2 years ago
3.2.4
2 years ago
3.2.2
2 years ago
3.2.1
2 years ago
3.2.0
2 years ago
3.2.3
2 years ago
3.1.3
3 years ago
3.1.2
3 years ago
3.1.1
3 years ago
3.1.0
3 years ago
3.0.3
3 years ago
3.0.2
3 years ago
3.0.1
3 years ago
3.0.0
3 years ago
3.0.0-beta.2
3 years ago
3.0.0-beta.1
3 years ago
3.0.0-alpha.1
3 years ago