<div
class="
flex flex-wrap items-center gap-2 my-8 justify-center
lg:justify-start
"
>
{% for image in images %}
<a
class="w-40"
href="{{ image.source }}"
data-fancybox="gallery"
data-caption="{{ image.caption }}"
>
<img class="rounded" src="{{ image.source }}" />
</a>
{% endfor %}
</div>
context:
images:
-
source: https://picsum.photos/536/354
caption: 'Example image 1'
-
source: https://picsum.photos/536/355
caption: 'Example image 2'
-
source: https://picsum.photos/536/356
caption: 'Example image 3'
-
source: https://picsum.photos/536/354
caption: 'Example image 1'
-
source: https://picsum.photos/536/355
caption: 'Example image 2'
-
source: https://picsum.photos/536/356
caption: 'Example image 3'