Gallery
When and how to use this component
This component helps the user to quickly browse available media thumbnails (images, videos and audio clips) related to the page’s textual content. These thumbnails display a caption describing the media item along with a visual icon to distinguish between video clips, audio clips and images.
When to use this component
- When I want to have a gallery with different media in order to provide the user with more information about a certain topic, complement existing information.
- In events pages.
{#
Parameters:
- "rows" (array) (default: []): rows of gallery items, format [
{
- "classes" (string): CSS classes to add
- "image" (@ecl-images): Image to add in the gallery
- "caption" (string): Textual caption for an image
- "icon" (string): An icon class building an icon in the item
},
...
]
- "extra_classes" (string) (default: '')
- "extra_attributes" (array) (default: []): format: [
{
"name" (string) (default: ''),
"value" (string) (default: '')
},
...
]
#}
{% include '@ecl/generic-component-gallery' with { system: 'eu' } %}
{
"rows": [
[
{
"classes": "ecl-col-md-4",
"image": {
"src": "http://placehold.it/380x185",
"alt": "Example alt text",
"extra_attributes": [
{
"name": "typeof",
"value": "foaf:Image"
},
{
"name": "width",
"value": "380"
},
{
"name": "height",
"value": "185"
}
]
},
"caption": "Example image caption",
"icon": "ecl-icon--camera"
},
{
"classes": "ecl-col-md-3",
"image": {
"src": "http://placehold.it/285x185",
"alt": "Example alt text",
"extra_attributes": [
{
"name": "typeof",
"value": "foaf:Image"
},
{
"name": "width",
"value": "285"
},
{
"name": "height",
"value": "185"
}
]
},
"icon": "ecl-icon--audio"
},
{
"classes": "ecl-col-md-2",
"image": {
"src": "http://placehold.it/190x185",
"alt": "Example alt text",
"extra_attributes": [
{
"name": "typeof",
"value": "foaf:Image"
},
{
"name": "width",
"value": "190"
},
{
"name": "height",
"value": "185"
}
]
},
"caption": "Example image caption",
"icon": "ecl-icon--camera"
},
{
"classes": "ecl-col-md-3",
"image": {
"src": "http://placehold.it/285x185",
"alt": "Example alt text",
"extra_attributes": [
{
"name": "typeof",
"value": "foaf:Image"
},
{
"name": "width",
"value": "285"
},
{
"name": "height",
"value": "185"
}
]
}
}
],
[
{
"classes": "ecl-col-md-2",
"image": {
"src": "http://placehold.it/190x185",
"alt": "Example alt text",
"extra_attributes": [
{
"name": "typeof",
"value": "foaf:Image"
},
{
"name": "width",
"value": "190"
},
{
"name": "height",
"value": "185"
}
]
},
"caption": "Example image caption"
},
{
"classes": "ecl-col-md-3",
"image": {
"src": "http://placehold.it/285x185",
"alt": "Example alt text",
"extra_attributes": [
{
"name": "typeof",
"value": "foaf:Image"
},
{
"name": "width",
"value": "285"
},
{
"name": "height",
"value": "185"
}
]
}
},
{
"classes": "ecl-col-md-3",
"image": {
"src": "http://placehold.it/285x185",
"alt": "Example alt text",
"extra_attributes": [
{
"name": "typeof",
"value": "foaf:Image"
},
{
"name": "width",
"value": "285"
},
{
"name": "height",
"value": "185"
}
]
}
},
{
"classes": "ecl-col-md-4",
"image": {
"src": "http://placehold.it/380x185",
"alt": "Example alt text",
"extra_attributes": [
{
"name": "typeof",
"value": "foaf:Image"
},
{
"name": "width",
"value": "380"
},
{
"name": "height",
"value": "185"
}
]
},
"caption": "Example image caption"
}
]
]
}
<div class="ecl-gallery">
<div class="ecl-row ecl-no-gutters">
<div class="ecl-col-md-4 ecl-gallery__item">
<div class="ecl-gallery__item-container">
<img class="ecl-image ecl-image--fluid ecl-gallery__image" alt="Example alt text" src="http://placehold.it/380x185" typeof="foaf:Image" width="380" height="185" />
<span class="ecl-gallery__caption">Example image caption</span>
<span class="ecl-gallery__icon-wrapper">
<span class="ecl-gallery__icon ecl-icon ecl-icon--camera"></span>
</span>
</div>
</div>
<div class="ecl-col-md-3 ecl-gallery__item">
<div class="ecl-gallery__item-container">
<img class="ecl-image ecl-image--fluid ecl-gallery__image" alt="Example alt text" src="http://placehold.it/285x185" typeof="foaf:Image" width="285" height="185" />
<span class="ecl-gallery__icon-wrapper">
<span class="ecl-gallery__icon ecl-icon ecl-icon--audio"></span>
</span>
</div>
</div>
<div class="ecl-col-md-2 ecl-gallery__item">
<div class="ecl-gallery__item-container">
<img class="ecl-image ecl-image--fluid ecl-gallery__image" alt="Example alt text" src="http://placehold.it/190x185" typeof="foaf:Image" width="190" height="185" />
<span class="ecl-gallery__caption">Example image caption</span>
<span class="ecl-gallery__icon-wrapper">
<span class="ecl-gallery__icon ecl-icon ecl-icon--camera"></span>
</span>
</div>
</div>
<div class="ecl-col-md-3 ecl-gallery__item">
<div class="ecl-gallery__item-container">
<img class="ecl-image ecl-image--fluid ecl-gallery__image" alt="Example alt text" src="http://placehold.it/285x185" typeof="foaf:Image" width="285" height="185" />
</div>
</div>
</div>
<div class="ecl-row ecl-no-gutters">
<div class="ecl-col-md-2 ecl-gallery__item">
<div class="ecl-gallery__item-container">
<img class="ecl-image ecl-image--fluid ecl-gallery__image" alt="Example alt text" src="http://placehold.it/190x185" typeof="foaf:Image" width="190" height="185" />
<span class="ecl-gallery__caption">Example image caption</span>
</div>
</div>
<div class="ecl-col-md-3 ecl-gallery__item">
<div class="ecl-gallery__item-container">
<img class="ecl-image ecl-image--fluid ecl-gallery__image" alt="Example alt text" src="http://placehold.it/285x185" typeof="foaf:Image" width="285" height="185" />
</div>
</div>
<div class="ecl-col-md-3 ecl-gallery__item">
<div class="ecl-gallery__item-container">
<img class="ecl-image ecl-image--fluid ecl-gallery__image" alt="Example alt text" src="http://placehold.it/285x185" typeof="foaf:Image" width="285" height="185" />
</div>
</div>
<div class="ecl-col-md-4 ecl-gallery__item">
<div class="ecl-gallery__item-container">
<img class="ecl-image ecl-image--fluid ecl-gallery__image" alt="Example alt text" src="http://placehold.it/380x185" typeof="foaf:Image" width="380" height="185" />
<span class="ecl-gallery__caption">Example image caption</span>
</div>
</div>
</div>
</div>
-
Content:
/** * Gallery * @define gallery ; weak */ // Import base and generic @import '@ecl/eu-base/eu-base'; @import '@ecl/generic-component-gallery/generic-component-gallery'; // Check if overridden dependencies are already loaded, if needed @include check-imports(('eu-style-icon')); // Use generic mixin @include exports('eu-component-gallery') { @include ecl-gallery(); } - URL: /components/raw/eu-component-gallery/eu-component-gallery.scss
- Filesystem Path: ../../src/systems/eu/eu-component/eu-component-gallery/eu-component-gallery.scss
- Size: 373 Bytes
- Handle: @ecl/eu-component-gallery
- Tags: organism
- Preview:
- Filesystem Path: ../../src/systems/eu/eu-component/eu-component-gallery/eu-component-gallery.twig