Regione Toscana Design System — Servizi Design System Core

Gallery: Aspect Video 

<section class="rtds-video-gallery">
    <div class="rtds-container rtds-space-y-4 md:rtds-space-y-6">
        <div>
            <div class="rtds-section-header">
                <div class="rtds-flex rtds-items-center rtds-gap-4 md:rtds-gap-6 rtds-content-01">
                    <div class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-2 md:rtds-gap-4">

                        <div class="rtds-vertical-divider rtds-w-4 md:rtds-w-6 lg:rtds-w-8">
                            <img class="rtds-w-full rtds-h-auto" src="../../images/vertical-divider.svg" alt="">
                        </div>

                        <h2 class="rtds-heading-3 md:rtds-heading-2">Galleria fotografica</h2>

                    </div>

                </div>
            </div>
        </div>
        <ul class="rtds-grid rtds-grid-cols-1 md:rtds-grid-cols-2 lg:rtds-grid-cols-3 xl:rtds-grid-cols-4 rtds-gap-4">

            <li>
                <a href="../../images/bubbles.jpg" class="rtds-lightbox rtds-lightbox--video" data-group="gallery">
                    <img src="../../images/bubbles.jpg" alt="Descrizione immagine 1">
                </a>
            </li>

            <li>
                <a href="../../images/card-image.jpg" class="rtds-lightbox rtds-lightbox--video" data-group="gallery">
                    <img src="../../images/card-image.jpg" alt="Descrizione immagine 2">
                </a>
            </li>

            <li>
                <a href="../../images/bubbles.jpg" class="rtds-lightbox rtds-lightbox--video" data-group="gallery">
                    <img src="../../images/bubbles.jpg" alt="Descrizione immagine 1">
                </a>
            </li>

            <li>
                <a href="../../images/card-image.jpg" class="rtds-lightbox rtds-lightbox--video" data-group="gallery">
                    <img src="../../images/card-image.jpg" alt="Descrizione immagine 2">
                </a>
            </li>

            <li>
                <a href="../../images/bubbles.jpg" class="rtds-lightbox rtds-lightbox--video" data-group="gallery">
                    <img src="../../images/bubbles.jpg" alt="Descrizione immagine 1">
                </a>
            </li>

            <li>
                <a href="../../images/card-image.jpg" class="rtds-lightbox rtds-lightbox--video" data-group="gallery">
                    <img src="../../images/card-image.jpg" alt="Descrizione immagine 2">
                </a>
            </li>

            <li>
                <a href="../../images/bubbles.jpg" class="rtds-lightbox rtds-lightbox--video" data-group="gallery">
                    <img src="../../images/bubbles.jpg" alt="Descrizione immagine 1">
                </a>
            </li>

            <li>
                <a href="../../images/card-image.jpg" class="rtds-lightbox rtds-lightbox--video" data-group="gallery">
                    <img src="../../images/card-image.jpg" alt="Descrizione immagine 2">
                </a>
            </li>

            <li>
                <a href="../../images/bubbles.jpg" class="rtds-lightbox rtds-lightbox--video" data-group="gallery">
                    <img src="../../images/bubbles.jpg" alt="Descrizione immagine 1">
                </a>
            </li>

            <li>
                <a href="../../images/card-image.jpg" class="rtds-lightbox rtds-lightbox--video" data-group="gallery">
                    <img src="../../images/card-image.jpg" alt="Descrizione immagine 2">
                </a>
            </li>

        </ul>
    </div>
</section>
 
<section class="rtds-video-gallery{% if classes %} {{ classes }}{% endif %}">
    <div class="rtds-container rtds-space-y-4 md:rtds-space-y-6">
    <div>
        {% render '@section-header' + sectionHeader.variant , sectionHeader.context, true %}
    </div>
    <ul class="rtds-grid {{ galleryGrid }} rtds-gap-4">
        {% for item in items %}
            <li>
                <a href="{{ item.image | path }}" class="rtds-lightbox{% if aspectVideo %} rtds-lightbox--video{% endif %}" data-group="{{ dataGroup }}">
                    <img src="{{ item.image | path }}" alt="{{ item.alt }}">
                </a>
            </li>
        {% endfor %}
        </ul>
    </div>
</section>
 
{
  "dataGroup": "gallery",
  "sectionHeader": {
    "variant": "--divider-left",
    "context": {
      "heading": "Galleria fotografica"
    }
  },
  "galleryGrid": "rtds-grid-cols-1 md:rtds-grid-cols-2 lg:rtds-grid-cols-3 xl:rtds-grid-cols-4",
  "items": [
    {
      "image": "/images/bubbles.jpg",
      "alt": "Descrizione immagine 1"
    },
    {
      "image": "/images/card-image.jpg",
      "alt": "Descrizione immagine 2"
    },
    {
      "image": "/images/bubbles.jpg",
      "alt": "Descrizione immagine 1"
    },
    {
      "image": "/images/card-image.jpg",
      "alt": "Descrizione immagine 2"
    },
    {
      "image": "/images/bubbles.jpg",
      "alt": "Descrizione immagine 1"
    },
    {
      "image": "/images/card-image.jpg",
      "alt": "Descrizione immagine 2"
    },
    {
      "image": "/images/bubbles.jpg",
      "alt": "Descrizione immagine 1"
    },
    {
      "image": "/images/card-image.jpg",
      "alt": "Descrizione immagine 2"
    },
    {
      "image": "/images/bubbles.jpg",
      "alt": "Descrizione immagine 1"
    },
    {
      "image": "/images/card-image.jpg",
      "alt": "Descrizione immagine 2"
    }
  ],
  "aspectVideo": true
}
  • Content: 
    .tobii__slide figure>figcaption {
        --caption-color: var(--color-content-inverse);
        font-size: var(--fontsize-text-sm);
    }
@media (min-width: 768px) {
    .tobii__slide figure>figcaption {
        font-size: var(--fontsize-text-base);
    }
}
.rtds-lightbox {
    display: block;
}
.rtds-lightbox:where(:not(.rtds-lightbox--video)) {
    aspect-ratio: 3 / 2;
}
.rtds-lightbox:where(.rtds-lightbox--video) {
    aspect-ratio: 16 / 9;
}
.rtds-lightbox img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
}
  • URL: /components/raw/gallery/gallery.built.css
  • Filesystem Path: components/04-organisms/gallery/gallery.built.css
  • Size: 625 Bytes
  • Content: 
    @layer components {
    .tobii__slide figure>figcaption {
        --caption-color: var(--color-content-inverse);
        @apply rtds-text-sm md:rtds-text-base;
    }

    .rtds-lightbox {
        @apply rtds-block;
    }

    .rtds-lightbox:where(:not(.rtds-lightbox--video)) {
        @apply rtds-aspect-3-2;
    }

    .rtds-lightbox:where(.rtds-lightbox--video) {
        @apply rtds-aspect-video;
    }

    .rtds-lightbox img {
        @apply rtds-w-full rtds-h-full rtds-object-cover rtds-object-center;
    }
}
  • URL: /components/raw/gallery/gallery.css
  • Filesystem Path: components/04-organisms/gallery/gallery.css
  • Size: 517 Bytes
  • Content: 
    let _tobiiInstance = null;

document.addEventListener('DOMContentLoaded', () => {
    /* INITIALIZE TOBII GALLERY */
    const lightboxElements = document.querySelectorAll('.rtds-lightbox');

    if (lightboxElements.length > 0) {
        // Destroy previous instance (div.tobii persists in body across story renders)
        if (_tobiiInstance) {
            try { _tobiiInstance.destroy(); } catch (e) {}
            _tobiiInstance = null;
        }
        _tobiiInstance = new Tobii({
            selector: '.rtds-lightbox',
            zoom: false,
            navLabel: ["Immagine precedente", "Immagine successiva"],
            closeLabel: "Esci dalla gallery",
            dialogTitle: "Lightbox - Dettaglio immagine galleria",
            loadingIndicatorLabel: "Caricamento in corso"
        });
    }
});
  • URL: /components/raw/gallery/gallery.js
  • Filesystem Path: components/04-organisms/gallery/gallery.js
  • Size: 817 Bytes

Componente Gallery

Galleria di immagini con lightbox. Supporta gallerie fotografiche standard e gallerie video con aspect ratio 16:9. Il lightbox è basato sulla libreria tobii-lightbox.

Comportamento

Il componente è renderizzato come una <section class="rtds-video-gallery"> contenente una lista <ul> di link immagine. Ogni link apre il lightbox tobii quando cliccato o attivato da tastiera.

I link hanno classe rtds-lightbox; nella variante aspect-video viene aggiunta la classe rtds-lightbox--video che applica un aspect ratio 16:9 all’elemento invece del 3:2 predefinito.

Varianti

Varianti di Aspect Ratio

  • default: Galleria fotografica standard — le immagini hanno aspect ratio 3:2 (rtds-aspect-3-2)
  • aspect-video: Galleria video — le immagini hanno aspect ratio 16:9 (rtds-aspect-video); attivata con aspectVideo: true nel context

Parametri di configurazione

Contesto di sviluppo Fractal/Nunjucks — Questa sezione riguarda esclusivamente i parametri del context .config.yml usati durante lo sviluppo nella libreria.

Parametri Base

  • dataGroup (stringa, obbligatorio): Valore dell’attributo data-group su ogni link lightbox — raggruppa le immagini nella stessa galleria per la navigazione interna al lightbox (es. 'gallery')
  • galleryGrid (stringa, obbligatorio): Classi Tailwind per la griglia CSS della lista (es. 'rtds-grid-cols-1 md:rtds-grid-cols-2 lg:rtds-grid-cols-3 xl:rtds-grid-cols-4')
  • aspectVideo (booleano, opzionale): Se true, aggiunge la classe rtds-lightbox--video ai link, impostando aspect ratio 16:9; default: assente (aspect ratio 3:2)

Parametro sectionHeader

  • sectionHeader (oggetto, obbligatorio): Configurazione per il componente @section-header interno
    • variant (stringa): Variante di @section-header da renderizzare (es. '--divider-left')
    • context (oggetto): Context passato a @section-header
      • heading (stringa): Titolo della sezione (es. 'Galleria fotografica')

Parametro items

  • items (array, obbligatorio): Lista delle immagini da mostrare in galleria
    • image (stringa): Percorso dell’immagine (usato sia per href del link lightbox che per src del tag <img>)
    • alt (stringa): Testo alternativo dell’immagine

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

  • 1.1.1 Contenuti non testuali — ogni <img> nella galleria deve avere alt descrittivo
  • 2.1.1 Tastiera — la libreria tobii-lightbox gestisce la navigazione da tastiera nel lightbox
  • 1.3.1 Informazioni e correlazioni — la galleria è strutturata come <section> con lista <ul> semantica

Struttura e semantica

  • Il componente è renderizzato come <section class="rtds-video-gallery"> — identifica la galleria come regione autonoma della pagina
  • La lista <ul> contiene elementi <li> con un link <a class="rtds-lightbox"> e un <img> per ogni immagine
  • L’attributo data-group sui link raggruppa le immagini per la navigazione nel lightbox
Tasto Azione
Tab / Shift+Tab Sposta il focus tra i link delle immagini
Enter Apre il lightbox sull’immagine focalizzata
Escape Chiude il lightbox (gestito da tobii-lightbox)
Arrow Left / Arrow Right Naviga tra le immagini nel lightbox

Gestione del focus

  • Focus trap: la libreria tobii-lightbox gestisce il focus trap all’interno del lightbox aperto
  • Focus restoration: alla chiusura del lightbox il focus ritorna sul link che lo ha aperto
  • Focus visibile: lo stile :focus-visible è sempre visibile e non viene rimosso via CSS

Screen reader

  • Ogni <img> deve avere alt che descriva il contenuto dell’immagine; il parametro alt in items è obbligatorio per la conformità WCAG 1.1.1
  • La libreria tobii-lightbox gestisce gli annunci ARIA per l’apertura e la chiusura del lightbox

Stili CSS

Classi Base

  • .rtds-lightbox: Elemento link della galleria — display: block; senza modificatore applica aspect ratio 3:2

Classi Modificatori

  • .rtds-lightbox--video: Variante video — applica rtds-aspect-video (16:9) invece del 3:2 predefinito

Classi Elementi (BEM)

  • .rtds-lightbox img: Immagine interna al link — width: 100%, height: 100%, object-fit: cover

Esempi di utilizzo

<!-- Galleria fotografica (aspect ratio 3:2) -->
<section class="rtds-video-gallery">
  <div class="rtds-container rtds-space-y-4 md:rtds-space-y-6">
    <div>
      <!-- section-header -->
    </div>
    <ul class="rtds-grid rtds-grid-cols-1 md:rtds-grid-cols-2 lg:rtds-grid-cols-3 xl:rtds-grid-cols-4 rtds-gap-4">
      <li>
        <a href="/images/foto.jpg" class="rtds-lightbox" data-group="gallery">
          <img src="/images/foto.jpg" alt="Descrizione immagine">
        </a>
      </li>
    </ul>
  </div>
</section>

<!-- Galleria video (aspect ratio 16:9) -->
<section class="rtds-video-gallery">
  <div class="rtds-container rtds-space-y-4 md:rtds-space-y-6">
    <div>
      <!-- section-header -->
    </div>
    <ul class="rtds-grid rtds-grid-cols-1 md:rtds-grid-cols-2 rtds-gap-4">
      <li>
        <a href="/images/video-thumb.jpg" class="rtds-lightbox rtds-lightbox--video" data-group="gallery">
          <img src="/images/video-thumb.jpg" alt="Anteprima video">
        </a>
      </li>
    </ul>
  </div>
</section>

Note

  • Il componente usa la classe rtds-video-gallery sull’elemento <section> radice anche nella variante fotografica (non solo video). Questo è il nome della classe CSS del componente indipendentemente dalla variante usata.
  • Richiede la libreria tobii-lightbox caricata in pagina
  • Il parametro galleryGrid deve contenere le classi Tailwind complete per la griglia; non esiste un default implicito nel template oltre a rtds-grid
  • Il parametro image in items viene usato sia come href del link (URL in lightbox) che come src dell’immagine thumbnail
  • Documentazione tobii-lightbox