`views/partials/gallery.ejs`

33 lines
<% const galleryImages = typeof images !== 'undefined' ? images : []; %>

<% if (galleryImages.length > 0) { %>
<div class="image-gallery">
        <% galleryImages.forEach((image, index) => { %>
            <div
                class="gallery-item"
                data-index="<%= index %>"
                <% if (image.caption) { %>data-caption="<%= image.caption %>"<% } %>
                role="button"
                tabindex="0"
                aria-label="View <%= image.alt || 'image' %> in lightbox">

                <img
                    data-src="<%= image.src %>"
                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'%3E%3Crect fill='%23f5f5f5' width='800' height='600'/%3E%3C/svg%3E"
                    alt="<%= image.alt || 'Gallery image ' + (index + 1) %>"
                    loading="lazy">

                <% if (image.caption) { %>
                    <div class="gallery-caption">
                        <%= image.caption %>
                    </div>
                <% } %>
            </div>
        <% }); %>
</div>
<% } else { %>
<div class="image-gallery">
    <p style="text-align: center; color: #666; padding: 2rem;">No images available</p>
</div>
<% } %>