Loading...
ImageGrid Twig
A component to display images in a destructured grid.
Table of content
Usage
Use this component directly in your Twig templates by providing it with an array of objects following the Figure
component parameters.
twig
{% include '@ui/ImageGrid/ImageGrid.twig' with {
images: [
{ src: 'https://picsum.photos/500/400', width: 500, height: 400 },
{ src: 'https://picsum.photos/600/400', width: 600, height: 400 },
{ src: 'https://picsum.photos/500/400', width: 500, height: 400 }
]
} %}
Customizing the image output
The ImageGrid
template exposes an image
block which can be used to customize the rendering of each image.
In the following example, we wrap each image in a ScrollReveal
component to add transitions when each image becomes visible.
twig
<div class="p-20 max-w-2xl l:max-w-5xl mx-auto">
{% embed '@ui/ImageGrid/ImageGrid.twig'
with {
images: [
{ src: 'https://picsum.photos/500/400', width: 500, height: 400 },
{ src: 'https://picsum.photos/600/400', width: 600, height: 400 },
{ src: 'https://picsum.photos/500/400', width: 500, height: 400 },
{ src: 'https://picsum.photos/500/400', width: 500, height: 400 },
{ src: 'https://picsum.photos/600/400', width: 600, height: 400 },
{ src: 'https://picsum.photos/500/400', width: 500, height: 400 },
{ src: 'https://picsum.photos/600/400', width: 600, height: 400 },
{ src: 'https://picsum.photos/500/400', width: 500, height: 400 },
{ src: 'https://picsum.photos/500/400', width: 500, height: 400 },
{ src: 'https://picsum.photos/600/400', width: 600, height: 400 }
]
}
%}
{% block image %}
<div data-component="ScrollReveal"
data-option-enter-from="opacity-0 scale-50"
data-option-enter-active="transition duration-1000 ease-out-expo"
class="opacity-0">
{{ parent() }}
</div>
{% endblock %}
{% endembed %}
</div>
Loading...