Galleria Immagini: Ordine, Didascalie e Regole Mobile

Una galleria immagini raggruppa più immagini fisse correlate in un’unica unità editoriale ordinata. La sequenza è parte del significato: un lettore dovrebbe capire perché queste immagini stanno insieme, cosa ciascuna contribuisce e se passare dall’elemento 1 all’elemento 2 rappresenta tempo, priorità, punto di vista o semplice ordine di navigazione.

Questo esempio utilizza una griglia editoriale perché tutte e tre le inquadrature sono ugualmente importanti e si adattano senza nascondere alcun elemento. L’ordine procede dall’identificazione a due controlli delle condizioni. Le didascalie dichiarano cosa dimostra ogni inquadratura; non si limitano a ripetere “immagine del connettore”.

Perché questo elemento è importante

Le persone esaminano un set in modo diverso da un mucchio. Un confine visibile e una sequenza deliberata dicono al lettore che le immagini rispondono insieme a una domanda più ampia. La panoramica crea orientamento, poi le immagini di dettaglio riducono l’incertezza. Questa progressione impedisce al lettore di aprire immagini non correlate, ricordare le loro posizioni e costruire la relazione da solo.

L’ordinamento controlla le aspettative. Un set cronologico promette cambiamento; un set prodotto promette panoramica, scala, caratteristiche, varianti e condizioni. L’ordine del nome file o di caricamento può far sembrare secondarie prove importanti o implicare una narrazione che non esiste.

L’estraibilità automatica è la capacità del software di isolare la galleria senza perdere la relazione tra le sue immagini. Una macchina può identificare file immagine separati, ma non può dedurre in modo sicuro se siano alternative, passaggi, prove o decorazioni. Un titolo della galleria, una logica di ordinamento dichiarata, posizioni stabili degli elementi, testo alternativo individuale e didascalie visibili forniscono quella relazione in forma testuale. Gli stessi campi possono alimentare l’indicizzazione di ricerca, gli inventari dei contenuti, i controlli di accessibilità e i dati strutturati senza fare affidamento sulla visione artificiale.

Le regole di scrittura degli elementi condivise governano la precedenza degli elementi tipizzati, le direttive portabili e il mapping del corpo. Questa pagina ha precedenza per i limiti di elementi, ordinamento, didascalie e comportamento mobile specifici della galleria immagini. Non imitare una galleria con immagini sparse o uno slider generico quando lo scopo di questo elemento è applicabile.

Quando usarlo

Utilizza una galleria immagini quando due o più immagini sono pari che rispondono a una domanda meglio insieme che separatamente. Ogni immagine deve aggiungere un punto di vista, stato, fase, dettaglio o esempio distinto. I casi validi includono viste prodotto, prove prima/dopo, una breve sequenza di processo, orientamento della posizione, un portfolio di design o diversi dettagli a supporto di una conclusione di recensione.

Applica il test di rimozione a ogni elemento. Se rimuovere un’immagine non cambia nulla che il lettore possa decidere, verificare o comprendere, rimuovila dal set. Una galleria non è una superficie di archiviazione per ogni risorsa disponibile.

I casi simili ma diversi necessitano di elementi differenti:

• Utilizza una singola figura o imagebox quando un’immagine veicola il punto e la prosa lo interpreta.
• Utilizza uno screenshot annotato quando i lettori devono individuare diversi controlli all’interno di un’unica immagine dell’interfaccia. Non dividere uno schermo in una galleria di ritagli non spiegati.
• Utilizza una tabella comparativa quando il lettore deve confrontare attributi ripetuti tra molte opzioni. Le immagini possono supportare la decisione, ma non possono sostituire i criteri testuali.
• Utilizza un elenco di passaggi quando le azioni sono il contenuto principale. Una galleria può mostrare stati risultanti, ma non deve trasformare istruzioni necessarie in didascalie.
• Utilizza uno slider prodotto quando ogni scheda ha prezzo, disponibilità, valutazione e un’azione. Una galleria contiene immagini, non entità acquistabili.
• Utilizza figure separate quando le immagini supportano sezioni diverse e non condividono una sequenza significativa.

Dove posizionarlo

Posiziona la galleria immediatamente dopo il paragrafo che enuncia la domanda a cui il set risponderà. Una galleria sulle condizioni del prodotto segue l’affermazione sulle condizioni; una sequenza di caso di studio segue l’intervento; una galleria di posizione segue le informazioni di arrivo.

Mantieni il titolo della galleria, l’introduzione opzionale, tutti gli elementi, le didascalie, i crediti e i controlli in un unico contenitore semantico. Non inserire prosa, pubblicità, invito all’azione o interruzioni di pagina tra gli elementi. Segui la galleria con l’interpretazione o la decisione successiva quando le didascalie non la veicolano completamente.

Una galleria non può essere posizionata direttamente accanto a un’altra galleria, video, tabella grande, grafico a larghezza intera, imagebox o invito all’azione non correlato. Aggiungi prosa esplicativa tra unità visive dense o combina elementi genuinamente pari.

Non inserire una galleria all’interno di un passaggio, elemento di elenco, callout, cella di tabella, accordion, scheda cliccabile o un’altra galleria. Non separare mai un’affermazione dalla sua fonte né un avviso dall’azione che limita. Riserva il primo viewport per la risposta diretta a meno che le immagini non siano la risposta.

Anatomia

L’anatomia è semantica. Le colonne della griglia, le dimensioni delle miniature, le ombre, i raggi degli angoli e le animazioni appartengono al renderer piuttosto che al modello di contenuto.

1. Contenitore galleria: Raggruppa titolo, descrizione, elementi e controlli sotto un unico nome accessibile.
2. Titolo galleria: Enuncia il soggetto o la domanda condivisa in 3–10 parole.
3. Introduzione: Spiega opzionalmente la sequenza o il compito di ispezione in una frase.
4. Elemento ordinato: Preserva l’ordine sorgente stabile indipendentemente dal layout desktop.
5. Immagine: Utilizza una risorsa esistente con diritti liberi, con larghezza e altezza intrinseche.
6. Testo alternativo: Descrive lo scopo di quell’immagine nel set anziché copiarne la didascalia.
7. Didascalia: Identifica l’inquadratura e spiega il suo contributo distinto.
8. Credito: Fornisce informazioni su creatore, fonte o licenza quando richiesto.
9. Controlli: Per una galleria interattiva, pulsanti visibili supportano input con puntatore, tastiera, interruttore e tocco.
10. Indicatore di posizione: Annuncia “2 di 5” in forma testuale quando alcuni elementi sono nascosti alla vista.
11. Ordine mobile: Corrisponde all’ordine DOM, alla numerazione, all’ordine da tastiera e alla narrazione prevista.

Esempi di design

Scegli la variante meno interattiva che preserva la relazione. Ogni variante mantiene le didascalie complete disponibili in forma testuale e utilizza lo stesso ordine sorgente a ogni punto di interruzione.

Griglia editoriale

Utilizza una griglia per 2–6 immagini di pari peso che possono apparire insieme. Il desktop può utilizzare due o tre colonne. Il mobile si riduce a una colonna; non riduce mai tre immagini in miniature illeggibili.

Striscia sequenziale

Utilizza una striscia per 3–8 immagini con una progressione cronologica o spaziale esplicita. Su schermi stretti può diventare una regione a scorrimento orizzontale solo quando esistono controlli visibili, un indicatore di posizione, funzionamento da tastiera e un fallback impilato non JavaScript. Non rendere mai lo scorrimento l’unico mezzo di navigazione.

Coppia di confronto

Utilizza esattamente due immagini per prima/dopo, originale/revisionato o due punti di vista che devono essere valutati insieme. Utilizza etichette testuali persistenti, non solo colore o posizione. Il mobile impila l’elemento 1 prima dell’elemento 2 e ripete le etichette accanto alle immagini.

Immagine principale con viste di dettaglio

Utilizza questa opzione per 3–12 viste di prodotto o manufatto quando una panoramica ancora il set e le immagini rimanenti rispondono a distinte domande di ispezione. La selezione di una miniatura deve aggiornare il testo alternativo, la didascalia, la posizione e lo stato annunciato dell’immagine principale. Ogni immagine rimane raggiungibile senza JavaScript.

Default impilato mobile

Utilizza l’elenco impilato ogni volta che l’interattività non migliorerebbe materialmente la comprensione. È il default per i contenuti editoriali perché tutti gli elementi e le didascalie rimangono visibili, collegabili, stampabili e leggibili senza gesti.

Parametri

Il contratto memorizza il significato editoriale e i metadati delle risorse. I token di layout, le larghezze delle colonne, gli spazi, le icone di controllo, la durata della transizione e i punti di interruzione appartengono al renderer.

Le didascalie sono obbligatorie per prove, ordine che cambia il significato, etichette di confronto e informazioni sui diritti visibili. Un’angolazione di prodotto può ometterne una solo quando il testo alternativo e il contesto distinguono l’inquadratura. mobile=scroll è valido solo per strip o primary-details con i controlli richiesti.

Sintassi ed esempi di codice

Tutte le mappature preservano lo stesso titolo, ordine, campi elemento e fallback. La produzione deve rifiutare i percorsi di esempio fino a quando i file non esistono.

Direttiva Markdown portabile

:::image-gallery{layout=grid mobile=stack orderedBy=viewpoint}
## Three views that establish product condition

:::gallery-item{src="/cdn-assets/examples/connector-overview.webp" alt="Complete black industrial connector on a neutral surface, oriented with its locking tab facing upward" width=1600 height=1200}
**1. Overview.** The complete connector establishes shape, scale, and orientation.
:::

:::gallery-item{src="/cdn-assets/examples/connector-lock.webp" alt="Close view of the connector showing an intact raised locking tab with no visible crack" width=1600 height=1200}
**2. Locking tab.** The close view confirms that the retention clip is intact.
:::
:::

La prima intestazione diventa title; il corpo di ogni elemento diventa la sua didascalia. L’ordine sorgente è canonico, quindi masonry non può riordinare gli elementi per riempire gli spazi.

Mapping shortcode Hugo

{{< image-gallery layout="grid" mobile="stack" orderedBy="viewpoint" >}}
## Three views that establish product condition

{{< gallery-item src="/cdn-assets/examples/connector-overview.webp" alt="Complete black industrial connector on a neutral surface, oriented with its locking tab facing upward" width="1600" height="1200" >}}
**1. Overview.** The complete connector establishes shape, scale, and orientation.
{{< /gallery-item >}}

{{< gallery-item src="/cdn-assets/examples/connector-lock.webp" alt="Close view of the connector showing an intact raised locking tab with no visible crack" width="1600" height="1200" >}}
**2. Locking tab.** The close view confirms that the retention clip is intact.
{{< /gallery-item >}}
{{< /image-gallery >}}

Questa specifica di adattatore non è uno shortcode registrato. Fino all’approvazione, utilizza figure semantiche in ordine sorgente e non fare riferimento a risorse mancanti.

Blocco WordPress

<!-- wp:amicited/image-gallery {"layout":"grid","mobile":"stack","orderedBy":"viewpoint"} -->
<section aria-labelledby="condition-gallery">
  <h2 id="condition-gallery">Three views that establish product condition</h2>
  <ol>
    <li><figure><img src="connector-overview.webp" width="1600" height="1200" alt="Complete black industrial connector on a neutral surface, oriented with its locking tab facing upward"><figcaption><strong>Overview.</strong> The complete connector establishes shape, scale, and orientation.</figcaption></figure></li>
    <li><figure><img src="connector-lock.webp" width="1600" height="1200" alt="Close view of the connector showing an intact raised locking tab with no visible crack"><figcaption><strong>Locking tab.</strong> The close view confirms that the retention clip is intact.</figcaption></figure></li>
  </ol>
</section>
<!-- /wp:amicited/image-gallery -->

Un’implementazione WordPress può utilizzare un blocco Galleria nativo solo se preserva il testo alternativo per elemento, le didascalie, le dimensioni intrinseche, l’ordine sorgente e il nome del gruppo accessibile. Applicare stili a una sequenza di immagini di sfondo non soddisfa il contratto.

Esempi

Buono: ogni inquadratura risolve una diversa incertezza

Condizione attrezzatura usata — ordine di ispezione

1. Unità completa: Stabilisce l’identità e mostra che la scocca è integra.
2. Targhetta matricola: Conferma il modello esatto e la tensione nominale con messa a fuoco leggibile.
3. Connettore di alimentazione: Mostra perni diritti e una linguetta di blocco integra.
4. Superficie di usura: Mostra il graffio più profondo visibile accanto a un righello per scala.

Questo segue la logica di ispezione dell’acquirente. Ogni didascalia è verificabile, il righello impedisce a un primo piano di esagerare il danno e la pila mobile preserva l’ordine.

Cattivo: un carosello usato come discarica di risorse

Il nostro ultimo evento Dodici fotografie di scena quasi identiche, nessuna didascalia, avanzamento automatico ogni quattro secondi. La navigazione appare solo al passaggio del mouse. La versione mobile mostra una fetta centrale ritagliata e accetta solo gesti di scorrimento.

Né l’appartenenza né l’ordine hanno una ragione. Dodici nomi file non comunicano nulla a un lettore di schermo; l’avanzamento automatico impedisce l’ispezione; i controlli solo al passaggio del mouse escludono utenti da tastiera e tocco; la navigazione solo tramite scorrimento nasconde l’accesso; e il ritaglio può rimuovere il soggetto. Seleziona i pochi fotogrammi che raccontano una storia definita, scrivi alternative e didascalie distinte, ferma il movimento automatico e utilizza come default una pila mobile.

Marcatura Schema e accessibilità

Una galleria non ottiene automaticamente un trattamento speciale nei risultati di ricerca. Marca solo le relazioni che la pagina visibile e le risorse supportano. Le immagini significative possono essere mappate a ImageObject con contentUrl stabile, didascalia, testo del creatore o credito, informazioni sulla licenza e stato rappresentativo quando questi fatti sono noti. Una galleria esplicitamente ordinata può essere mappata a ItemList, utilizzando valori position che corrispondono all’ordine sorgente. Le viste prodotto possono popolare la proprietà Product.image del genitore. Non creare entità per immagini decorative, inventare licenze o affermare che ogni immagine è rappresentativa.

Utilizza elementi <img> nativi all’interno di elementi <figure> con <figcaption> visibile dove richiesto. Denomina la sezione tramite la sua intestazione. Preserva le relazioni ordinate con <ol> o semantica di posizione equivalente; il posizionamento visivo non sostituisce mai l’ordine DOM.

Il testo alternativo descrive lo scopo di ogni immagine in questo set. Non dovrebbe iniziare con “immagine di,” ripetere la didascalia testualmente o descrivere dettagli irrilevanti per la decisione. Due fotografie dello stesso oggetto richiedono testo alternativo diverso perché ciascuna ha uno scopo diverso. Utilizza alt="" solo quando un’immagine è veramente ridondante e rimuoverla non eliminerebbe prove.

Le varianti interattive necessitano di pulsanti denominati precedente e successivo, attivazione da tastiera, un indicatore di posizione testuale e un annuncio di stato dopo le modifiche. L’avanzamento automatico è vietato. Mantieni il focus sul controllo attivato e preserva il contenuto senza JavaScript, con zoom al 200% e con movimento ridotto.

Regole di scrittura

Ogni galleria risponde a una domanda condivisa. Dichiara perché esiste, poi ordina per narrazione, cronologia, priorità, punto di vista o confronto — mai per ordine di caricamento.

• Utilizza 2–8 elementi per una galleria normale; usa esattamente 2 per un confronto e 3–12 per un set prodotto/dettaglio principale.
• Scrivi titoli in 3–10 parole e introduzioni opzionali in una frase di 8–30 parole.
• Mantieni le didascalie tra 5–30 parole. Inizia con l’inquadratura, lo stato o l’etichetta dell’elemento quando questo migliora la scansione, poi spiega il suo contributo.
• Utilizza una struttura di didascalie parallela all’interno del set. Se la prima inizia con un’etichetta di stato, anche le altre dovrebbero farlo.
• Mantieni il testo alternativo focalizzato su ciò di cui un lettore non vedente ha bisogno da quella specifica inquadratura; punta a 40–180 caratteri e non superare mai 250.
• Mantieni un tono fattuale e osservativo. Dichiara “la guarnizione aderisce in modo uniforme” piuttosto che “la straordinaria guarnizione sembra perfetta.”
• Identifica tempo, scala, ritaglio, stato e fonte ogni volta che vincolano l’interpretazione.
• Utilizza le stesse condizioni di confronto quando l’aspetto è una prova: ritaglio, angolazione, scala, illuminazione e trattamento colore equivalenti.

Non inserire mai un’intestazione, paragrafo, tabella, elenco di istruzioni, invito all’azione, modulo, prezzo, valutazione, testimonianza, disclosure espandibile, video, lettore audio o scheda prodotto all’interno di una didascalia di elemento. Non incorporare mai le didascalie nei pixel, rendere il colore l’unica etichetta, nascondere difetti materiali attraverso il ritaglio, esporre dati del cliente o pubblicare un’immagine senza diritti di utilizzo confermati.

Tipi di post che la utilizzano

Le righe seguenti rispecchiano il frontmatter postTypes. L’inclusione significa che il tipo di post può utilizzare una galleria quando le immagini formano un vero set; non rende l’elemento obbligatorio su ogni pagina.

Checklist QA

• Il titolo enuncia una domanda o un soggetto condiviso, e ogni immagine fornisce una risposta distinta.
• Il conteggio degli elementi corrisponde alla variante selezionata e non contiene fotogrammi ridondanti.
• orderedBy registra un ordine difendibile di narrazione, cronologia, priorità, punto di vista o confronto.
• Gli ordini sorgente, visivo, da tastiera, screen reader, numerico e mobile corrispondono tutti.
• Ogni src risolve a un’immagine fissa esistente con diritti liberi prima della pubblicazione.
• Ogni immagine ha larghezza e altezza intrinseche, un valore alt intenzionale e un ritaglio significativo.
• Prove, confronti ed elementi ordinati hanno didascalie visibili concise con struttura parallela.
• Crediti e link di licenza sono visibili e accurati dove richiesto.
• Le immagini di confronto utilizzano scala, angolazione, ritaglio, illuminazione ed etichette equivalenti, a meno che una differenza non sia dichiarata.
• Il mobile utilizza un fallback impilato leggibile o controlli accessibili completi; lo scorrimento non è mai l’unico input.
• Le varianti interattive hanno pulsanti visibili precedente e successivo, un indicatore di posizione testuale, supporto da tastiera e nessun avanzamento automatico.
• La galleria funziona senza JavaScript e con zoom al 200%, rispetta il movimento ridotto e non crea overflow orizzontale della pagina.
• La prima immagine importante non è differita, gli stati di caricamento successivo sono annunciati e lo spazio riservato previene spostamenti del layout.
• Nessuna istruzione essenziale, numero, avviso, etichetta o conclusione esiste solo nei pixel.
• La galleria non contiene video, schede prodotto, moduli, prezzi, valutazioni, testimonianze o inviti all’azione.
• I dati strutturati corrispondono all’ordine visibile, alle didascalie, ai diritti e alle relazioni tra entità senza trattare la decorazione come contenuto.
• Le mappature Markdown portabile, Hugo e WordPress preservano gli stessi campi, l’ordine degli elementi e il significato.

FAQ

Il template academy renderizza le cinque domande revisionate memorizzate nel frontmatter [[faq]] di questa pagina. Coprono il conteggio degli elementi, i caroselli mobile, il testo alternativo e le didascalie, i contenuti misti proibiti e i dati strutturati.

Il successo significa che un lettore può spiegare la relazione tra le immagini e il contributo di ogni elemento. Senza un ordine significativo, didascalie distinte e un percorso mobile accessibile, il set è un elenco di risorse piuttosto che una galleria.