Galéria obrázkov: Poradie, titulky a pravidlá pre mobilné zariadenia

Galéria obrázkov zoskupuje viacero súvisiacich statických obrázkov do jednej usporiadanej redakčnej jednotky. Poradie je súčasťou významu: čitateľ by mal pochopiť, prečo tieto obrázky patria k sebe, čo každý z nich prispieva a či presun od položky 1 k položke 2 predstavuje čas, prioritu, uhol pohľadu alebo jednoduché poradie prehliadania.

Tento príklad používa redakčnú mriežku, pretože všetky tri pohľady sú rovnako dôležité a zmestia sa bez skrytia žiadnej položky. Poradie prechádza od identifikácie k dvom kontrolám stavu. Titulky uvádzajú, čo každý pohľad dokazuje; neopakujú iba „obrázok konektora."

Prečo na tomto prvku záleží

Ľudia skúmajú sadu inak ako hromadu. Viditeľná hranica a zámerné poradie hovoria čitateľovi, že obrázky spoločne odpovedajú na jednu väčšiu otázku. Prehľad vytvára orientáciu, potom detailné obrázky znižujú neistotu. Táto postupnosť zabraňuje tomu, aby čitateľ otváral nesúvisiace obrázky, pamätal si ich pozície a sám si vytváral vzťah.

Poradie riadi očakávania. Chronologická sada sľubuje zmenu; sada produktov sľubuje prehľad, mierku, vlastnosti, varianty a stav. Poradie podľa názvu súboru alebo času nahratia môže spôsobiť, že dôležitý dôkaz vyzerá druhorado alebo naznačuje príbeh, ktorý neexistuje.

Strojová extrahovateľnosť je schopnosť softvéru izolovať galériu bez straty vzťahu medzi jej obrázkami. Stroj dokáže identifikovať jednotlivé obrazové súbory, ale bezpečne neurčí, či ide o alternatívy, kroky, dôkazy alebo dekoráciu. Názov galérie, deklarovaná logika poradia, stabilné pozície položiek, individuálny alternatívny text a viditeľné titulky poskytujú tento vzťah v textovej podobe. Rovnaké polia môžu napájať indexovanie vyhľadávačov, inventúry obsahu, kontroly prístupnosti a štruktúrované údaje bez spoliehania sa na počítačové videnie.

Spoločné pravidlá písania prvkov upravujú prioritu typovaných prvkov, prenosné direktívy a mapovanie tela. Táto stránka má prednosť pre obmedzenia počtu položiek v galérii obrázkov, poradie, titulky a správanie na mobile. Nenapodobňujte galériu pomocou voľných obrázkov alebo všeobecného posúvača, keď platí účel tohto prvku.

Kedy ho použiť

Použite galériu obrázkov, keď sú dva alebo viac obrázkov rovnocennými partnermi, ktorí spoločne odpovedajú na jednu otázku lepšie ako každý zvlášť. Každý obrázok musí prinášať odlišný pohľad, stav, fázu, detail alebo príklad. Silné prípady zahŕňajú pohľady na produkt, dôkazy pred a po, krátku postupnosť procesu, orientáciu lokality, dizajnové portfólio alebo niekoľko detailov podporujúcich jeden recenzný záver.

Aplikujte test odstránenia na každú položku. Ak odstránenie obrázka nezmení nič, čo čitateľ môže rozhodnúť, overiť alebo pochopiť, odstráňte ho zo sady. Galéria nie je úložiskom pre každý dostupný asset.

Takmer správne prípady vyžadujú iné prvky:

• Použite jednu figúru alebo imagebox, keď jeden obrázok nesie podstatu a próza ho interpretuje.
• Použite anotovanú snímku obrazovky , keď čitatelia musia nájsť niekoľko ovládacích prvkov v rámci jedného obrázku rozhrania. Nerozdeľujte jednu obrazovku na galériu nevysvetlených výrezov.
• Použite porovnávaciu tabuľku, keď čitateľ musí porovnávať opakujúce sa atribúty naprieč mnohými možnosťami. Obrázky môžu podporiť rozhodnutie, ale nenahrádzajú textové kritériá.
• Použite zoznam krokov, keď sú primárnym obsahom akcie. Galéria môže zobraziť výsledné stavy, ale nesmie premeniť požadované inštrukcie na titulky.
• Použite produktový posúvač, keď má každá karta cenu, dostupnosť, hodnotenie a akciu. Galéria obsahuje obrázky, nie kúpiteľné entity.
• Použite samostatné figúry, keď obrázky podporujú rôzne sekcie a nezdieľajú žiadne zmysluplné poradie.

Kam ho umiestniť

Umiestnite galériu hneď za odsek, ktorý uvádza otázku, na ktorú sada odpovedá. Galéria stavu produktu nasleduje po tvrdení o stave; postupnosť prípadovej štúdie nasleduje po intervencii; galéria lokality nasleduje po informáciách o príchode.

Názov galérie, voliteľný úvod, všetky položky, titulky, informácie o autorstve a ovládacie prvky ponechajte v jednom sémantickom kontajneri. Nevkladajte prózu, reklamu, výzvu na akciu ani zlom stránky medzi položky. Po galérii nasledujte interpretáciou alebo ďalším rozhodnutím, ak titulky nenesú všetko úplne.

Galéria nesmie byť umiestnená priamo vedľa inej galérie, videa, veľkej tabuľky, celošírkového grafu, imageboxu alebo nesúvisiacej výzvy na akciu. Medzi husté vizuálne jednotky vložte vysvetľujúcu prózu alebo skombinujte skutočne súvisiace prvky.

Neumiestňujte galériu do kroku, položky zoznamu, výzvy, bunky tabuľky, akordeónu, klikateľnej karty ani inej galérie. Nikdy neoddeľujte tvrdenie od jeho zdroja ani varovanie od akcie, ktorú obmedzuje. Vyhraďte prvé zobrazenie pre priamu odpoveď, pokiaľ obrázky nie sú samotnou odpoveďou.

Anatómia

Anatómia je sémantická. Stĺpce mriežky, veľkosti náhľadov, tiene, polomery rohov a animácie patria do vykresľovača, nie do obsahového modelu.

1. Kontajner galérie: Zoskupuje názov, popis, položky a ovládacie prvky pod jeden prístupný názov.
2. Názov galérie: Uvádza spoločnú tému alebo otázku v 3–10 slovách.
3. Úvod: Voliteľne vysvetľuje poradie alebo úlohu skúmania v jednej vete.
4. Usporiadaná položka: Zachováva stabilné poradie zdroja bez ohľadu na rozloženie na počítači.
5. Obrázok: Používa existujúci asset s vyriešenými právami a so šírkou a výškou v pixeloch.
6. Alternatívny text: Popisuje účel daného obrázka v sade, nie kopíruje jeho titulok.
7. Titulok: Identifikuje pohľad a vysvetľuje jeho odlišný prínos.
8. Informácie o autorstve: Poskytuje údaje o tvorcovi, zdroji alebo licencii, ak je to potrebné.
9. Ovládacie prvky: Pre interaktívnu galériu viditeľné tlačidlá podporujúce ukazovateľ, klávesnicu, prepínač a dotykový vstup.
10. Indikátor polohy: Oznamuje „2 z 5" v texte, keď sú niektoré položky skryté.
11. Poradie na mobile: Zodpovedá DOM poradiu, číslovaniu, poradiu klávesnice a zamýšľanému rozprávaniu.

Príklady dizajnu

Vyberte najmenej interaktívny variant, ktorý zachováva vzťah. Každý variant ponecháva kompletnétitulky dostupné v texte a používa rovnaké poradie zdroja pri každej veľkosti obrazovky.

Redakčná mriežka

Použite mriežku pre 2–6 rovnako vážených obrázkov, ktoré sa môžu zobraziť spoločne. Počítač môže použiť dva alebo tri stĺpce. Na mobile sa zbalí do jedného stĺpca; nikdy nezmenší tri obrázky na nečitateľné náhľady.

Sekvenčný pás

Použite pás pre 3–8 obrázkov s explicitnou chronologickou alebo priestorovou postupnosťou. Na úzkych obrazovkách sa môže stať horizontálne posúvateľnou oblasťou len vtedy, keď existujú viditeľné ovládacie prvky, indikátor polohy, ovládanie klávesnicou a prehľadná alternatíva bez JavaScriptu. Nikdy nerobte potiahnutie jediným spôsobom navigácie.

Porovnávací pár

Použite presne dva obrázky na porovnanie pred a po, originál a revíziu, alebo dva uhly pohľadu, ktoré sa musia posudzovať spoločne. Použite trvalé textové označenia, nie len farbu alebo pozíciu. Na mobile je položka 1 pred položkou 2 a označenia sa opakujú vedľa obrázkov.

Hlavný obrázok s detailnými pohľadmi

Použite pre 3–12 pohľadov na produkt alebo artefakt, keď jeden prehľad ukotvuje sadu a zvyšné obrázky odpovedajú na odlišné otázky skúmania. Výber náhľadu musí aktualizovať alternatívny text hlavného obrázka, titulok, pozíciu a oznámený stav. Každý obrázok zostáva dosiahnuteľný bez JavaScriptu.

Prehľadný zoznam na mobile ako predvolený

Použite prehľadný zoznam vždy, keď by interaktivita vecne nezlepšila porozumenie. Je predvoleným riešením pre redakčný obsah, pretože všetky položky a titulky zostávajú viditeľné, odkazovateľné, tlačiteľné a čitateľné bez gest.

Parametre

Kontrakt uchováva redakčný význam a metadáta assetov. Tokeny rozloženia, šírky stĺpcov, medzery, ikony ovládacích prvkov, trvanie prechodu a zlomové body patria do vykresľovača.

Titulky sú povinné pre dôkazy, poradie meniace význam, porovnávacie označenia a viditeľné informácie o právach. Produktový uhol môže jeden vynechať len vtedy, keď jeho alternatívny text a kontext dostatočne odlišujú pohľad. mobile=scroll je platný len pre strip alebo primary-details s požadovanými ovládacími prvkami.

Syntax a príklady kódu

Všetky mapovania zachovávajú rovnaký názov, poradie, polia položiek a alternatívne riešenie. Produkcia musí zamietnuť príkladové cesty, kým súbory neexistujú.

Prenosná Markdown direktíva

:::image-gallery{layout=grid mobile=stack orderedBy=viewpoint}
## Tri pohľady, ktoré určujú stav produktu

:::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. Prehľad.** Kompletný konektor určuje tvar, mierku a orientáciu.
:::

:::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. Poistná západka.** Detailný pohľad potvrdzuje, že príchytka je neporušená.
:::
:::

Prvý nadpis sa stáva title; telo každej položky sa stáva jej titulkom. Poradie zdroja je kánonické, takže murované rozloženie nesmie preskupovať položky na vyplnenie medzier.

Mapovanie Hugo shortcode

{{< image-gallery layout="grid" mobile="stack" orderedBy="viewpoint" >}}
## Tri pohľady, ktoré určujú stav produktu

{{< 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. Prehľad.** Kompletný konektor určuje tvar, mierku a orientáciu.
{{< /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. Poistná západka.** Detailný pohľad potvrdzuje, že príchytka je neporušená.
{{< /gallery-item >}}
{{< /image-gallery >}}

Táto špecifikácia adaptéra nie je registrovaný shortcode. Do schválenia používajte sémantické figúry v poradí zdroja a neodkazujte na chýbajúce assety.

WordPress blok

<!-- wp:amicited/image-gallery {"layout":"grid","mobile":"stack","orderedBy":"viewpoint"} -->
<section aria-labelledby="condition-gallery">
  <h2 id="condition-gallery">Tri pohľady, ktoré určujú stav produktu</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>Prehľad.</strong> Kompletný konektor určuje tvar, mierku a orientáciu.</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>Poistná západka.</strong> Detailný pohľad potvrdzuje, že príchytka je neporušená.</figcaption></figure></li>
  </ol>
</section>
<!-- /wp:amicited/image-gallery -->

WordPress implementácia môže použiť natívny blok Galérie len vtedy, ak zachováva alternatívny text každej položky, titulky, natívne rozmery, poradie zdroja a prístupný názov skupiny. Štylizovanie sekvencie obrázkov na pozadí nespĺňa kontrakt.

Príklady

Dobrý: každý pohľad rieši inú neistotu

Stav použitého zariadenia — inšpekčné poradie

1. Celá jednotka: Určuje identitu a ukazuje, že kryt je kompletný.
2. Výrobný štítok: Potvrdzuje presný model a menovité napätie v čitateľnom zaostrení.
3. Napájací konektor: Ukazuje rovné kolíky a neporušenú poistnú západku.
4. Opotrebená plocha: Ukazuje najhlbšiu viditeľnú škrabku vedľa pravítka pre mierku.

Toto nasleduje inšpekčnú logiku kupujúceho. Každý titulok je overiteľný, pravítko zabraňuje tomu, aby detailný záber zveličil poškodenie, a mobilný zoznam zachováva poradie.

Zlý: karusel použitý ako skladisko assetov

Naše najnovšie podujatie
Dvanásť takmer identických fotografií z pódia, bez titulkov, automaticky sa posúvajúcich každé štyri sekundy. Navigácia sa zobrazí len pri umiestnení kurzora. Mobilná verzia ukazuje orezaný stredový výrez a akceptuje len gestá potiahnutia.

Členstvo ani poradie nemajú dôvod. Dvanásť názvov súborov nehovorí nič čítačke obrazovky; automatické posúvanie bráni skúmaniu; ovládacie prvky len pri umiestnení kurzora vylučujú používateľov klávesnice a dotyku; navigácia len potiahnutím skrýva prístup; a orezanie môže odstrániť objekt. Vyberte niekoľko záberov, ktoré rozprávajú definovaný príbeh, napíšte odlišné alternatívy a titulky, zastavte automatický pohyb a predvolene použite mobilný zoznam.

Značkovanie schémy a prístupnosť

Galéria automaticky nezískava špeciálne zaobchádzanie vo vyhľadávaní. Značkujte len vzťahy, ktoré viditeľná stránka a assety podporujú. Zmysluplné obrázky môžu byť mapované na ImageObject so stabilným contentUrl, titulkom, textom o autorstve alebo zdroji, licenčnými informáciami a reprezentatívnym stavom, ak sú tieto skutočnosti známe. Explicitne usporiadaná galéria môže byť mapovaná na ItemList s použitím hodnôt position, ktoré zodpovedajú poradiu zdroja. Pohľady na produkt môžu vyplniť vlastnosť Product.image rodiča. Nevytvárajte entity pre dekoratívne obrázky, nevymýšľajte licencie ani netvrdte, že každý obrázok je reprezentatívny.

Používajte natívne prvky <img> v rámci prvkov <figure> s viditeľným <figcaption>, ak je to potrebné. Pomenujte sekciu prostredníctvom jej nadpisu. Zachovajte usporiadané vzťahy pomocou <ol> alebo ekvivalentných sémantík pozície; vizuálne umiestnenie nikdy neprevažuje nad DOM poradím.

Alternatívny text popisuje účel každého obrázka v tejto sade. Nemal by začínať slovami „obrázok", opakovať titulok doslovne ani popisovať detaily irelevantné pre rozhodnutie. Dve fotografie toho istého objektu vyžadujú odlišný alternatívny text, pretože každá má iný účel. Použite alt="" len vtedy, keď je obrázok skutočne redundantný a jeho odstránenie by neodstránilo dôkaz.

Interaktívne varianty potrebujú pomenované tlačidlá prechodu, aktiváciu klávesnicou, textový indikátor polohy a oznámenie stavu po zmenách. Automatické posúvanie je zakázané. Udržujte zameranie na aktivovanom ovládacom prvku a zachovajte obsah bez JavaScriptu, pri 200% zväčšení a so zníženým pohybom.

Pravidlá písania

Každá galéria odpovedá na jednu spoločnú otázku. Uveďte, prečo existuje, potom usporiadajte podľa rozprávania, chronológie, priority, uhla pohľadu alebo porovnania – nikdy podľa poradia nahratia.

• Použite 2–8 položiek pre bežnú galériu; použite presne 2 pre porovnanie a 3–12 pre hlavnú sadu produktov/detailov.
• Píšte názvy v 3–10 slovách a voliteľné úvody v jednej vete o 8–30 slovách.
• Udržujte titulky na 5–30 slovách. Začnite s pohľadom, stavom alebo označením položky, keď to zlepšuje skenovanie, potom vysvetlite jej prínos.
• Používajte paralelnú štruktúru titulkov v rámci sady. Ak prvý začína označením stavu, ostatné by mali tiež.
• Udržujte alternatívny text zameraný na to, čo nevidomý čitateľ potrebuje z daného záberu; cieľte na 40–180 znakov a nikdy nepresahujte 250.
• Zachovajte faktický, pozorovací tón. Uveďte „tesnenie je v rovine" radšej ako „úžasné tesnenie vyzerá perfektne."
• Identifikujte čas, mierku, orezy, stav a zdroj vždy, keď obmedzujú interpretáciu.
• Použite rovnaké podmienky porovnania, keď je vzhľad dôkazom: ekvivalentný orezy, uhol, mierku, osvetlenie a farebné spracovanie.

Nikdy nevkladajte nadpis, odsek, tabuľku, zoznam inštrukcií, výzvu na akciu, formulár, cenu, hodnotenie, svedectvo, rozbaľovacie zverejnenie, video, audio prehrávač ani produktovú kartu do titulku položky. Nikdy nevkladajte titulky do pixelov, nerobte farbu jediným označením, neskrývajte materiálne chyby orezaním, nevystavujte údaje zákazníkov ani nepublikujte obrázok bez potvrdených práv na použitie.

Typy príspevkov, ktoré ho používajú

Riadky nižšie odzrkadľujú postTypes frontmatter. Zahrnutie znamená, že typ príspevku môže použiť galériu, keď obrázky tvoria skutočnú sadu; nerobí prvok povinným na každej stránke.

Kontrolný zoznam QA

• Názov uvádza jednu spoločnú otázku alebo tému a každý obrázok prispieva odlišnou odpoveďou.
• Počet položiek zodpovedá vybranému variantu a neobsahuje žiadny redundantný záber.
• orderedBy zaznamenáva obhájiteľné rozprávanie, chronológiu, prioritu, uhol pohľadu alebo porovnávacie poradie.
• Poradie zdroja, vizuálne, klávesnicové, čítačky obrazovky, číslovanie a mobilné poradie sú rovnaké.
• Každé src pred publikovaním odkazuje na existujúci statický obrázok s vyriešenými právami.
• Každý obrázok má natívnu šírku a výšku, zámernú hodnotu alt a zmysluplný orezy.
• Dôkazy, porovnania a usporiadané položky majú stručné viditeľné titulky s paralelnou štruktúrou.
• Informácie o autorstve a odkazy na licencie sú viditeľné a presné tam, kde je to potrebné.
• Porovnávacie obrázky používajú ekvivalentnú mierku, uhol, orezy, osvetlenie a označenia, pokiaľ nie je rozdiel zverejnený.
• Mobil používa čitateľnú prehľadnú alternatívu alebo kompletný prístupný ovládací prvok; potiahnutie nie je nikdy jediným vstupom.
• Interaktívne varianty majú viditeľné tlačidlá prechodu, textový indikátor polohy, podporu klávesnice a žiadne automatické posúvanie.
• Galéria funguje bez JavaScriptu a pri 200% zväčšení, rešpektuje znížený pohyb a nevytvára horizontálne pretekanie stránky.
• Prvý dôležitý obrázok nie je odložený, neskoršie stavy načítania sú oznámené a vyhradené miesto zabraňuje posunu rozloženia.
• Žiadna podstatná inštrukcia, číslo, varovanie, označenie ani záver neexistujú len v pixeloch.
• Galéria neobsahuje žiadne video, produktovú kartu, formulár, cenu, hodnotenie, svedectvo ani výzvu na akciu.
• Štruktúrované údaje zodpovedajú viditeľnému poradiu, titulkom, právam a vzťahom entít bez toho, aby sa dekorácia považovala za obsah.
• Prenosné Markdown, Hugo a WordPress mapovania zachovávajú rovnaké polia, poradie položiek a význam.

FAQ

Šablóna academy vykresľuje päť recenzovaných otázok uložených v [[faq]] frontmatter tejto stránky. Pokrývajú počet položiek, mobilné karusely, alternatívny text a titulky, zakázaný zmiešaný obsah a štruktúrované údaje.

Úspech znamená, že čitateľ vie vysvetliť vzťah medzi obrázkami a prínos každej položky. Bez zmysluplného poradia, odlišných titulkov a prístupnej mobilnej cesty je sada zoznamom assetov, nie galériou.