2 lines
1.2 KiB
Plaintext
2 lines
1.2 KiB
Plaintext
<section data-block="noir:lightbox_gallery" class="py-12"><div class="max-w-6xl mx-auto px-6">{% if not items %}<div class="hairline p-12 text-center tracked-mono" style="color: hsl(var(--mutedForeground));">Add photographs to populate the gallery.</div>{% else %}<div class="grid gap-4 {% if columns|integer == 2 %}grid-cols-1 md:grid-cols-2{% elif columns|integer == 4 %}grid-cols-1 md:grid-cols-2 lg:grid-cols-4{% else %}grid-cols-1 md:grid-cols-2 lg:grid-cols-3{% endif %}">{% for item in items %}<figure class="noir-figure"><button type="button" data-noir-lightbox-trigger data-src="{{ item.image }}" data-alt="{{ item.caption }}" data-caption="{{ item.caption }}" class="block w-full p-0 m-0 cursor-zoom-in bg-transparent border-0" style="background: transparent;" aria-label="{% if item.caption %}Open photograph: {{ item.caption }}{% else %}Open photograph {{ forloop.Counter }}{% endif %}"><img src="{{ item.image }}" alt="{{ item.caption }}" loading="lazy" class="w-full h-auto block"></button>{% if item.caption %}<figcaption class="tracked-mono mt-2" style="color: hsl(var(--mutedForeground));">{{ item.caption }}</figcaption>{% endif %}</figure>{% endfor %}</div>{% endif %}</div></section>
|