ImageGrid Twig

A component to display images in a destructured grid.

Table of content

• Examples
• Twig API

Usage

Use this component directly in your Twig templates by providing it with an array of objects following the Figure component parameters.

{% 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.

<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>