tabler/preview/pages/photogrid.astro

---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Photo from '@components/demo/Photo.astro'
import photosData from '@data/photos.json'
import { requireIndex } from '@shared/lib/array'

// fslightbox loads as a page library (no custom init script on this page).
const photoAt = (i: number) => requireIndex(photosData, i)
---

<DefaultLayout title="Photogrid" pageMenu="extra.photogrid" pageLibs={['fslightbox']}>
  <div class="row g-2 g-md-3">
    <div class="col-lg-6">
      <div class="row g-2 g-md-3">
        <div class="col-12">
          <a data-fslightbox="gallery" href={`./static/photos/${photoAt(5).file}`} aria-label={photoAt(5).title}>
            <Photo photo={photoAt(5)} class="rounded-3 border" ratio="3x1" />
          </a>
        </div>
        <div class="col-6">
          <a data-fslightbox="gallery" href={`./static/photos/${photoAt(6).file}`} aria-label={photoAt(6).title}>
            <Photo photo={photoAt(6)} class="rounded-3 border" ratio="1x1" />
          </a>
        </div>
        <div class="col-6">
          <div class="row g-2 g-md-3">
            <div class="col-6">
              <a data-fslightbox="gallery" href={`./static/photos/${photoAt(7).file}`} aria-label={photoAt(7).title}>
                <Photo photo={photoAt(7)} class="rounded-3 border" ratio="1x1" />
              </a>
            </div>
            <div class="col-6">
              <a data-fslightbox="gallery" href={`./static/photos/${photoAt(8).file}`} aria-label={photoAt(8).title}>
                <Photo photo={photoAt(8)} class="rounded-3 border" ratio="1x1" />
              </a>
            </div>
            <div class="col-6">
              <a data-fslightbox="gallery" href={`./static/photos/${photoAt(9).file}`} aria-label={photoAt(9).title}>
                <Photo photo={photoAt(9)} class="rounded-3 border" ratio="1x1" />
              </a>
            </div>
            <div class="col-6">
              <a data-fslightbox="gallery" href={`./static/photos/${photoAt(10).file}`} aria-label={photoAt(10).title}>
                <Photo photo={photoAt(10)} class="rounded-3 border" ratio="1x1" />
              </a>
            </div>
          </div>
        </div>
        <div class="col-12">
          <a data-fslightbox="gallery" href={`./static/photos/${photoAt(16).file}`} aria-label={photoAt(16).title}>
            <Photo photo={photoAt(16)} class="rounded-3 border" ratio="4x1" />
          </a>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="row g-2 g-md-3">
        <div class="col-6">
          <div class="row g-2 g-md-3">
            <div class="col-6">
              <a data-fslightbox="gallery" href={`./static/photos/${photoAt(14).file}`} aria-label={photoAt(14).title}>
                <Photo photo={photoAt(14)} class="rounded-3 border" ratio="1x1" />
              </a>
            </div>
            <div class="col-6">
              <a data-fslightbox="gallery" href={`./static/photos/${photoAt(15).file}`} aria-label={photoAt(15).title}>
                <Photo photo={photoAt(15)} class="rounded-3 border" ratio="1x1" />
              </a>
            </div>
            <div class="col-6">
              <a data-fslightbox="gallery" href={`./static/photos/${photoAt(12).file}`} aria-label={photoAt(12).title}>
                <Photo photo={photoAt(12)} class="rounded-3 border" ratio="1x1" />
              </a>
            </div>
            <div class="col-6">
              <a data-fslightbox="gallery" href={`./static/photos/${photoAt(13).file}`} aria-label={photoAt(13).title}>
                <Photo photo={photoAt(13)} class="rounded-3 border" ratio="1x1" />
              </a>
            </div>
          </div>
        </div>
        <div class="col-6">
          <a data-fslightbox="gallery" href={`./static/photos/${photoAt(1).file}`} aria-label={photoAt(1).title}>
            <Photo photo={photoAt(1)} class="rounded-3 border" ratio="1x1" />
          </a>
        </div>
        <div class="col-12">
          <a data-fslightbox="gallery" href={`./static/photos/${photoAt(4).file}`} aria-label={photoAt(4).title}>
            <Photo photo={photoAt(4)} class="rounded-3 border" ratio="4x1" />
          </a>
        </div>
        <div class="col-12">
          <a data-fslightbox="gallery" href={`./static/photos/${photoAt(17).file}`} aria-label={photoAt(17).title}>
            <Photo photo={photoAt(17)} class="rounded-3 border" ratio="3x1" />
          </a>
        </div>
      </div>
    </div>
  </div>
</DefaultLayout>