@studiometa/ui

Appearance

ImageGrid Twig ​

A component to display images in a destructured grid.

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>