Galerie de imagini: Ordine, Legende și Reguli pentru Mobil

O galerie de imagini grupează mai multe imagini statice conexe într-o unitate editorială ordonată. Secvența face parte din semnificație: un cititor ar trebui să înțeleagă de ce aceste imagini aparțin împreună, ce contribuie fiecare și dacă trecerea de la elementul 1 la elementul 2 reprezintă timp, prioritate, punct de vedere sau o simplă ordine de răsfoire.

Acest exemplu folosește un grid editorial deoarece toate cele trei vederi sunt la fel de importante și se potrivesc fără a ascunde vreun element. Ordinea trece de la identificare la două verificări de stare. Legendele afirmă ce demonstrează fiecare vedere; ele nu repetă pur și simplu „imagine cu conector".

De ce contează acest element

Oamenii inspectează un set diferit față de o grămadă. O graniță vizibilă și o succesiune deliberată îi spun cititorului că imaginile răspund împreună la o întrebare mai mare. Vederea de ansamblu creează orientarea, apoi imaginile de detaliu reduc incertitudinea. Această progresie împiedică cititorul să deschidă imagini neconexe, să-și amintească pozițiile lor și să construiască singur relația dintre ele.

Ordonarea controlează așteptările. Un set cronologic promite schimbare; un set de produs promite vedere de ansamblu, scară, caracteristici, variante și stare. Ordinea după numele fișierului sau data încărcării poate face ca dovezile importante să pară secundare sau poate sugera o narațiune care nu există.

Extractibilitatea automată este capacitatea software-ului de a izola galeria fără a pierde relația dintre imaginile sale. Un program poate identifica fișiere imagine separate, dar nu poate deduce în siguranță dacă acestea sunt alternative, pași, dovezi sau elemente decorative. Un titlu al galeriei, o logică de ordonare declarată, poziții stabile ale elementelor, text alternativ individual și legende vizibile oferă această relație sub formă de text. Aceleași câmpuri pot alimenta indexarea în motoarele de căutare, inventarele de conținut, verificările de accesibilitate și datele structurate, fără a necesita viziune computerizată.

Regulile comune de redactare a elementelor guvernează precedența elementelor tipizate, directivele portabile și maparea conținutului. Această pagină are prioritate pentru limitele specifice ale elementelor din galeria de imagini, ordonare, legende și comportament pe mobil. Nu imita o galerie cu imagini disparate sau cu un derulant generic atunci când scopul acestui element se aplică.

Când să folosești acest element

Folosește o galerie de imagini atunci când două sau mai multe imagini sunt la același nivel și răspund mai bine împreună la o întrebare decât separat. Fiecare imagine trebuie să adauge o vedere, o stare, o etapă, un detaliu sau un exemplu distinct. Cazuri solide includ vederi de produs, dovezi înainte-și-după, o succesiune scurtă de proces, orientarea locației, un portofoliu de design sau mai multe detalii care susțin o concluzie dintr-o recenzie.

Aplică testul de eliminare fiecărui element. Dacă eliminarea unei imagini nu schimbă nimic din ceea ce cititorul poate decide, verifica sau înțelege, elimin-o din set. O galerie nu este o suprafață de stocare pentru fiecare resursă disponibilă.

Cazurile apropiate au nevoie de elemente diferite:

• Folosește o singură figură sau imagebox atunci când o singură imagine transmite ideea, iar textul o interpretează.
• Folosește o captură de ecran adnotată atunci când cititorii trebuie să localizeze mai multe controale în interiorul unei singure imagini de interfață. Nu împărți un ecran într-o galerie de decupaje neexplicate.
• Folosește un tabel comparativ atunci când cititorul trebuie să compare atribute repetate între mai multe opțiuni. Imaginile pot susține decizia, dar nu pot înlocui criteriile text.
• Folosește o listă de pași atunci când acțiunile sunt conținutul principal. O galerie poate afișa stările rezultate, dar nu trebuie să transforme instrucțiunile necesare în legende.
• Folosește un derulant de produse atunci când fiecare card are preț, disponibilitate, rating și o acțiune. O galerie conține imagini, nu entități cumpărabile.
• Folosește figuri separate atunci când imaginile susțin secțiuni diferite și nu împart o succesiune semnificativă.

Unde să îl plasezi

Plasează galeria imediat după paragraful care enunță întrebarea la care va răspunde setul. O galerie a stării produsului urmează afirmația despre stare; o succesiune de studiu de caz urmează intervenția; o galerie de locație urmează informațiile de sosire.

Păstrează titlul galeriei, introducerea opțională, toate elementele, legendele, creditele și controalele într-un singur container semantic. Nu insera text, reclamă, îndemn la acțiune sau întrerupere de pagină între elemente. Urmează galeriei cu interpretarea sau următoarea decizie atunci când legendele nu o transmit complet.

O galerie nu poate sta direct lângă o altă galerie, un videoclip, un tabel mare, un grafic pe lățimea paginii, un imagebox sau un îndemn la acțiune fără legătură. Adaugă text explicativ între unitățile vizuale dense sau combină elemente cu adevărat similare.

Nu pune o galerie în interiorul unui pas, al unui element de listă, al unui callout, al unei celule de tabel, al unui acordeon, al unui card clickabil sau al altei galerii. Nu separa niciodată o afirmație de sursa sa sau un avertisment de acțiunea pe care o limitează. Rezervă primul ecran pentru răspunsul direct, cu excepția cazului în care imaginile sunt răspunsul.

Anatomie

Anatomia este semantică. Coloanele de grid, dimensiunile miniaturilor, umbrele, colțurile rotunjite și animațiile aparțin motorului de randare, nu modelului de conținut.

1. Containerul galeriei: Grupează titlul, descrierea, elementele și controalele sub un singur nume accesibil.
2. Titlul galeriei: Enunță subiectul sau întrebarea comună în 3–10 cuvinte.
3. Introducerea: Explică opțional secvența sau sarcina de inspectare într-o singură propoziție.
4. Elementul ordonat: Păstrează ordinea sursă stabilă, indiferent de aspectul desktop.
5. Imaginea: Folosește o resursă existentă, cu drepturi de utilizare clarificate, având lățime și înălțime intrinseci.
6. Textul alternativ: Descrie scopul acelei imagini în set, fără a copia legenda acesteia.
7. Legenda: Identifică vederea și explică contribuția sa distinctă.
8. Creditul: Oferă informații despre creator, sursă sau licență atunci când este necesar.
9. Controalele: Pentru o galerie interactivă, butoane vizibile suportă intrarea cu indicator, tastatură, comutator și atingere.
10. Indicatorul de poziție: Anunță „2 din 5" în text atunci când unele elemente sunt ascunse din vedere.
11. Ordinea pe mobil: Se potrivește cu ordinea DOM, numerotarea, ordinea la tastatură și narațiunea intenționată.

Exemple de design

Alege varianta cu cel mai mic nivel de interactivitate care păstrează relația. Fiecare variantă menține legendele complete disponibile în text și folosește aceeași ordine sursă la fiecare punct de întrerupere.

Grid editorial

Folosește un grid pentru 2–6 imagini cu greutate egală care pot apărea împreună. Desktopul poate folosi două sau trei coloane. Mobilul se colapsează la o singură coloană; nu micșorează niciodată trei imagini până la miniaturi ilizibile.

Bandă secvențială

Folosește o bandă pentru 3–8 imagini cu o progresie cronologică sau spațială explicită. Pe ecrane înguste poate deveni o regiune cu derulare orizontală doar atunci când există controale vizibile, un indicator de poziție, operare cu tastatura și o soluție de rezervă stivuită fără JavaScript. Nu face niciodată glisarea singurul mijloc de navigare.

Pereche comparativă

Folosește exact două imagini pentru înainte-și-după, original-și-revizuit sau două puncte de vedere care trebuie judecate împreună. Folosește etichete text persistente, nu doar culoare sau poziție. Mobilul stivuiește elementul 1 înaintea elementului 2 și repetă etichetele lângă imagini.

Imagine principală cu vederi de detaliu

Folosește această variantă pentru 3–12 vederi de produs sau artefact atunci când o vedere de ansamblu ancorează setul, iar imaginile rămase răspund unor întrebări distincte de inspectare. Selectarea unei miniaturi trebuie să actualizeze textul alternativ, legenda, poziția și starea anunțată ale imaginii principale. Fiecare imagine rămâne accesibilă fără JavaScript.

Implicit stivuit pe mobil

Folosește lista stivuită ori de câte ori interactivitatea nu ar îmbunătăți semnificativ înțelegerea. Este opțiunea implicită pentru conținutul editorial, deoarece toate elementele și legendele rămân vizibile, accesibile prin linkuri, printabile și lizibile fără gesturi.

Parametri

Contractul stochează semnificația editorială și metadatele resurselor. Simbolurile de aspect, lățimile coloanelor, spațierile, pictogramele de control, durata tranziției și punctele de întrerupere aparțin motorului de randare.

Legendele sunt obligatorii pentru dovezi, ordine care schimbă semnificația, etichete de comparație și informații vizibile privind drepturile. Un unghi de produs poate renunța la una doar atunci când textul său alternativ și contextul diferențiază vederea. mobile=scroll este valabil doar pentru strip sau primary-details cu controalele necesare.

Sintaxă și exemple de cod

Toate mapările păstrează același titlu, ordine, câmpuri ale elementelor și soluție de rezervă. Producția trebuie să respingă căile exemplu până când fișierele există.

Directivă Markdown portabilă

:::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.
:::
:::

Primul titlu devine title; corpul fiecărui element devine legenda acestuia. Ordinea sursă este canonică, așadar zidăria nu poate reordona elementele pentru a umple goluri.

Mapare scurtcod 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 >}}

Această specificație de adaptor nu este un scurtcod înregistrat. Până la aprobare, folosește figuri semantice în ordinea sursă și nu face referire la resurse lipsă.

Bloc 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 -->

O implementare WordPress poate folosi un bloc Galerie nativ doar dacă păstrează textul alternativ per element, legendele, dimensiunile intrinseci, ordinea sursă și numele accesibil al grupului. Stilizarea unei succesiuni de imagini de fundal nu îndeplinește contractul.

Exemple

Bun: fiecare vedere rezolvă o incertitudine diferită

Starea echipamentului folosit — ordinea de inspectare

1. Unitatea completă: Stabilește identitatea și arată că carcasa este intactă.
2. Plăcuța seriei: Confirmă modelul exact și tensiunea nominală într-o focalizare lizibilă.
3. Conectorul de alimentare: Arată pini drepți și o clemă de blocare intactă.
4. Suprafața de uzură: Arată cea mai adâncă zgârietură vizibilă lângă o riglă pentru scară.

Aceasta urmează logica de inspectare a cumpărătorului. Fiecare legendă este verificabilă, rigla împiedică un prim-plan să exagereze deteriorarea, iar stiva pe mobil păstrează ordinea.

Rău: un carusel folosit ca depozit de resurse

Cel mai recent eveniment al nostru
Douăsprezece fotografii de scenă aproape identice, fără legende, avansare automată la fiecare patru secunde. Navigarea apare doar la hover. Versiunea mobilă arată o felie centrală decupată și acceptă doar gesturi de glisare.

Nici apartenența, nici ordinea nu au un motiv. Douăsprezece nume de fișiere nu transmit nimic unui cititor cu ecran; avansarea automată împiedică inspectarea; controalele doar la hover exclud utilizatorii de tastatură și atingere; navigarea doar prin glisare ascunde accesul; iar decupajul poate elimina subiectul. Selectează câteva cadre care spun o poveste definită, scrie alternative și legende distincte, oprește mișcarea automată și folosește implicit o stivă pe mobil.

Marcare schema și accesibilitate

O galerie nu primește automat un tratament special în căutare. Marchează doar relațiile pe care pagina vizibilă și resursele le susțin. Imaginile semnificative pot fi mapate la ImageObject cu contentUrl stabil, legendă, textul creatorului sau credit, informații de licență și stare reprezentativă atunci când aceste date sunt cunoscute. O galerie ordonată explicit poate fi mapată la ItemList, folosind valori position care corespund ordinii sursă. Vederile de produs pot popula proprietatea Product.image a părintelui. Nu crea entități pentru imagini decorative, nu inventa licențe și nu pretinde că fiecare imagine este reprezentativă.

Folosește elemente <img> native în interiorul elementelor <figure> cu <figcaption> vizibil atunci când este necesar. Denumește secțiunea prin titlul său. Păstrează relațiile ordonate cu <ol> sau semantică de poziție echivalentă; plasarea vizuală nu suprascrie niciodată ordinea DOM.

Textul alternativ descrie scopul fiecărei imagini în acest set. Nu ar trebui să înceapă cu „imagine cu", să repete legenda textual sau să descrie detalii irelevante pentru decizie. Două fotografii ale aceluiași obiect necesită text alternativ diferit, deoarece fiecare are un scop diferit. Folosește alt="" doar atunci când o imagine este cu adevărat redundantă și eliminarea ei nu ar elimina dovezi.

Variantele interactive au nevoie de butoane denumite înainte și înapoi, activare de la tastatură, un indicator text de poziție și o anunțare a stării după modificări. Avansarea automată este interzisă. Menține focalizarea pe controlul activat și păstrează conținutul fără JavaScript, la mărirea de 200% și cu mișcare redusă.

Reguli de redactare

Fiecare galerie răspunde la o singură întrebare comună. Enunță de ce există, apoi ordonează după narațiune, cronologie, prioritate, punct de vedere sau comparație — niciodată după ordinea de încărcare.

• Folosește 2–8 elemente pentru o galerie normală; folosește exact 2 pentru o comparație și 3–12 pentru un set principal produs/detaliu.
• Scrie titluri în 3–10 cuvinte și introduceri opționale într-o singură propoziție de 8–30 de cuvinte.
• Menține legendele la 5–30 de cuvinte. Începe cu vederea, starea sau eticheta elementului atunci când acest lucru îmbunătățește scanarea, apoi explică contribuția.
• Folosește o structură paralelă a legendelor în întregul set. Dacă prima începe cu o etichetă de stare, celelalte ar trebui să facă la fel.
• Menține textul alternativ concentrat pe ceea ce are nevoie un cititor nevăzător de la acel cadru specific; țintește 40–180 de caractere și nu depăși niciodată 250.
• Menține un ton factual și observațional. Spune „garnitura este la nivel" în loc de „garnitura uimitoare arată perfect".
• Identifică timpul, scara, decupajul, starea și sursa ori de câte ori acestea constrâng interpretarea.
• Folosește aceleași condiții de comparație atunci când aspectul este o dovadă: decupaj, unghi, scară, iluminare și tratament cromatic echivalente.

Nu pune niciodată un titlu, paragraf, tabel, listă de instrucțiuni, îndemn la acțiune, formular, preț, rating, testimonial, conținut expandabil, videoclip, player audio sau card de produs în interiorul legendei unui element. Nu încorpora niciodată legende în pixeli, nu face din culoare singura etichetă, nu ascunde defecte materiale prin decupare, nu expune datele clienților și nu publica o imagine fără drepturi de utilizare confirmate.

Tipuri de postări care îl folosesc

Rândurile de mai jos oglindesc frontmatterul postTypes. Includerea înseamnă că tipul de postare poate folosi o galerie atunci când imaginile formează un set real; nu face elementul obligatoriu pe fiecare pagină.

Listă de verificare QA

• Titlul enunță o singură întrebare sau temă comună, iar fiecare imagine contribuie cu un răspuns distinct.
• Numărul de elemente se potrivește cu varianta selectată și nu conține niciun cadru redundant.
• orderedBy înregistrează o ordine justificabilă: narațiune, cronologie, prioritate, punct de vedere sau comparație.
• Ordinea sursă, vizuală, la tastatură, pe cititorul de ecran, numerotată și pe mobil se potrivesc toate.
• Fiecare src se rezolvă la o imagine statică existentă, cu drepturi de utilizare clarificate, înainte de publicare.
• Fiecare imagine are lățime și înălțime intrinseci, o valoare alt intenționată și un decupaj semnificativ.
• Dovezile, comparațiile și elementele ordonate au legende vizibile concise cu structură paralelă.
• Creditele și linkurile de licență sunt vizibile și exacte acolo unde este necesar.
• Imaginile de comparație folosesc scară, unghi, decupaj, iluminare și etichete echivalente, cu excepția cazului în care o diferență este dezvăluită.
• Mobilul folosește o soluție de rezervă stivuită lizibilă sau controale accesibile complete; glisarea nu este niciodată singura metodă de introducere.
• Variantele interactive au butoane vizibile înainte și înapoi, un indicator text de poziție, suport pentru tastatură și fără avansare automată.
• Galeria funcționează fără JavaScript și la mărirea de 200%, respectă mișcarea redusă și nu creează revărsare orizontală a paginii.
• Prima imagine importantă nu este amânată, stările de încărcare ulterioare sunt anunțate, iar spațiul rezervat previne schimbarea aspectului.
• Nicio instrucțiune esențială, număr, avertisment, etichetă sau concluzie nu există doar în pixeli.
• Galeria nu conține niciun videoclip, card de produs, formular, preț, rating, testimonial sau îndemn la acțiune.
• Datele structurate corespund ordinii vizibile, legendelor, drepturilor și relațiilor entităților, fără a trata decorațiunile ca și conținut.
• Mapările Markdown portabil, Hugo și WordPress păstrează aceleași câmpuri, ordinea elementelor și semnificația.

Întrebări frecvente

Șablonul academy redă cele cinci întrebări revizuite stocate în frontmatterul [[faq]] al acestei pagini. Acestea acoperă numărul de elemente, caruselurile pe mobil, textul alternativ și legendele, conținutul mixt interzis și datele structurate.

Succesul înseamnă că un cititor poate explica relația dintre imagini și contribuția fiecărui element. Fără o ordine semnificativă, legende distincte și o cale accesibilă pe mobil, setul este o listă de resurse, nu o galerie.