Obrázková galerie: Řazení, popisky a pravidla pro mobilní zařízení

Obrázková galerie seskupuje několik souvisejících statických obrázků do jednoho seřazeného redakčního celku. Pořadí je součástí významu: čtenář by měl pochopit, proč tyto obrázky patří k sobě, co každý z nich přináší a zda přechod od položky 1 k položce 2 představuje čas, prioritu, úhel pohledu nebo jednoduché pořadí procházení.

Tento příklad používá redakční mřížku, protože všechny tři pohledy jsou stejně důležité a vejdou se bez skrývání některé položky. Pořadí postupuje od identifikace ke dvěma kontrolám stavu. Popisky uvádějí, co každý pohled dokazuje; neopakují pouze „obrázek konektoru".

Proč na tomto prvku záleží

Lidé si prohlížejí sadu jinak než hromadu. Viditelná hranice a promyšlené pořadí čtenáři napovídají, že obrázky společně odpovídají na jednu větší otázku. Přehled vytváří orientaci, poté detailní obrázky snižují nejistotu. Tento postup zabraňuje tomu, aby čtenář otevíral nesouvisející obrázky, pamatoval si jejich pozice a sám si konstruoval vztah mezi nimi.

Řazení řídí očekávání. Chronologická sada slibuje změnu; produktová sada slibuje přehled, měřítko, vlastnosti, varianty a stav. Pořadí podle názvu souboru nebo data nahrání může důležité důkazy učinit druhořadými nebo implikovat vyprávění, které neexistuje.

Strojová extrahovatelnost je schopnost softwaru izolovat galerii, aniž by ztratil vztah mezi jejími obrázky. Stroj dokáže identifikovat jednotlivé obrazové soubory, ale bezpečně neodvodí, zda se jedná o alternativy, kroky, důkazy nebo dekoraci. Název galerie, deklarovaná logika řazení, stabilní pozice položek, individuální alt text a viditelné popisky poskytují tento vztah v textové podobě. Stejná pole mohou napájet indexaci vyhledávání, inventáře obsahu, kontroly přístupnosti a strukturovaná data, aniž by se spoléhaly na počítačové vidění.

Sdílená pravidla pro psaní prvků určují prioritu typových prvků, přenositelné direktivy a mapování těla. Tato stránka má přednost pro omezení počtu položek galerie, řazení, popisky a chování na mobilu. Nenapodobujte galerii pomocí volných obrázků nebo obecného slideru, pokud platí účel tohoto prvku.

Kdy to použít

Použijte obrázkovou galerii, když dva nebo více obrázků jsou rovnocenné a společně odpovídají na jednu otázku lépe než samostatně. Každý obrázek musí přidat odlišný pohled, stav, fázi, detail nebo příklad. Silné případy zahrnují pohledy na produkt, důkazy před a po, krátkou posloupnost procesu, orientaci v lokalitě, designové portfolio nebo několik detailů podporujících jeden závěr recenze.

Na každou položku aplikujte test odstranění. Pokud odstranění obrázku nezmění nic, co se čtenář může rozhodnout, ověřit nebo pochopit, odstraňte jej ze sady. Galerie není úložný prostor pro všechny dostupné prostředky.

Téměř zásahy vyžadují jiné prvky:

• Použijte jednu figuru nebo imagebox, když jeden obrázek nese sdělení a próza jej interpretuje.
• Použijte anotovaný snímek obrazovky , když čtenáři potřebují najít několik ovládacích prvků v rámci jednoho obrázku rozhraní. Nerozdělujte jednu obrazovku do galerie nevysvětlených ořezů.
• Použijte srovnávací tabulku, když čtenář musí porovnávat opakované atributy napříč mnoha možnostmi. Obrázky mohou podpořit rozhodnutí, ale nemohou nahradit textová kritéria.
• Použijte seznam kroků, když jsou primárním obsahem akce. Galerie může zobrazovat výsledné stavy, ale nesmí přeměnit požadované instrukce na popisky.
• Použijte produktový slider, když má každá karta cenu, dostupnost, hodnocení a akci. Galerie obsahuje obrázky, nikoli zakoupitelné entity.
• Použijte samostatné figury, když obrázky podporují různé sekce a nesdílejí smysluplné pořadí.

Kam to umístit

Umístěte galerii bezprostředně za odstavec, který uvádí otázku, na niž sada odpoví. Galerie stavu produktu následuje po tvrzení o stavu; sekvence případové studie následuje po intervenci; lokalitní galerie následuje po informacích o příjezdu.

Udržujte název galerie, volitelný úvod, všechny položky, popisky, údaje o autorství a ovládací prvky v jednom sémantickém kontejneru. Nevkládejte prózu, reklamu, výzvu k akci ani zalomení stránky mezi položky. Za galerií následuje interpretace nebo další rozhodnutí, pokud popisky nenesou vše.

Galerie nesmí být umístěna přímo vedle jiné galerie, videa, velké tabulky, celošířkového grafu, imageboxu nebo nesouvisející výzvy k akci. Mezi husté vizuální jednotky vložte vysvětlující prózu nebo kombinujte skutečně rovnocenné prvky.

Nevkládejte galerii do kroku, položky seznamu, zvýrazněného bloku, buňky tabulky, accordionu, klikatelné karty ani jiné galerie. Nikdy neoddělujte tvrzení od jeho zdroje ani varování od akce, kterou omezuje. Vyhraďte první výřez pro přímou odpověď, pokud obrázky samy o sobě odpovědí nejsou.

Anatomie

Anatomie je sémantická. Sloupce mřížky, velikosti náhledů, stíny, poloměry rohů a animace patří do renderovacího systému, nikoli do obsahového modelu.

1. Kontejner galerie: Seskupuje název, popis, položky a ovládací prvky pod jedním přístupným názvem.
2. Název galerie: Uvádí sdílené téma nebo otázku ve 3–10 slovech.
3. Úvod: Volitelně vysvětluje sekvenci nebo úkol prohlížení v jedné větě.
4. Seřazená položka: Zachovává stabilní pořadí ve zdroji bez ohledu na rozložení na desktopu.
5. Obrázek: Používá existující prostředek s vyřešenými právy a přirozenou šířkou a výškou.
6. Alternativní text: Popisuje účel daného obrázku v sadě, nikoli kopíruje jeho popisek.
7. Popisek: Identifikuje pohled a vysvětluje jeho odlišný přínos.
8. Autorství: Poskytuje informace o tvůrci, zdroji nebo licenci, je-li to vyžadováno.
9. Ovládací prvky: U interaktivní galerie podporují viditelná tlačítka ukazovací zařízení, klávesnici, přepínače a dotykový vstup.
10. Indikátor pozice: Ohlašuje „2 z 5" textem, když jsou některé položky skryté.
11. Mobilní pořadí: Odpovídá pořadí v DOM, číslování, pořadí na klávesnici a zamýšlenému vyprávění.

Příklady designu

Zvolte nejméně interaktivní variantu, která zachovává vztah. Každá varianta ponechává kompletní popisky dostupné v textu a používá stejné pořadí ve zdroji při každém zlomu.

Redakční mřížka

Použijte mřížku pro 2–6 stejně důležitých obrázků, které se mohou zobrazit společně. Desktop může používat dva nebo tři sloupce. Na mobilu se sbalí do jednoho sloupce; nikdy nezmenšuje tři obrázky na nečitelné náhledy.

Sekvenční pás

Použijte pás pro 3–8 obrázků s explicitní chronologickou nebo prostorovou posloupností. Na úzkých obrazovkách se může stát horizontálně posouvatelnou oblastí pouze tehdy, pokud existují viditelné ovládací prvky, indikátor pozice, ovládání klávesnicí a skládaná záložní varianta bez JavaScriptu. Nikdy nedělejte přejetí jediným způsobem navigace.

Srovnávací pár

Použijte přesně dva obrázky pro srovnání před a po, originál a upravenou verzi nebo dva úhly pohledu, které je třeba posuzovat společně. Používejte trvalé textové štítky, nikoli pouze barvu nebo pozici. Na mobilu se položka 1 zobrazí před položkou 2 a štítky se opakují vedle obrázků.

Hlavní obrázek s detailními pohledy

Použijte pro 3–12 pohledů na produkt nebo artefakt, když jeden přehled ukotvuje sadu a zbývající obrázky odpovídají na různé kontrolní otázky. Výběr náhledu musí aktualizovat alt text, popisek, pozici a ohlášený stav hlavního obrázku. Každý obrázek zůstává dosažitelný i bez JavaScriptu.

Mobilní skládaný výchozí stav

Použijte skládaný seznam, kdykoli by interaktivita podstatně nezlepšila porozumění. Je výchozí volbou pro redakční obsah, protože všechny položky a popisky zůstávají viditelné, odkazovatelné, tisknutelné a čitelné bez gest.

Parametry

Kontrakt ukládá redakční význam a metadata prostředků. Tokeny rozložení, šířky sloupců, mezery, ikony ovládacích prvků, trvání přechodů a body zlomu patří do renderovacího systému.

Popisky jsou povinné pro důkazy, pořadí měnící význam, srovnávací štítky a viditelné informace o právech. Produktový úhel může být vynechán pouze tehdy, pokud jeho alt text a kontext pohled rozlišují. mobile=scroll je platný pouze pro strip nebo primary-details s požadovanými ovládacími prvky.

Syntaxe a příklady kódu

Všechna mapování zachovávají stejný název, pořadí, pole položek a záložní řešení. Produkce musí odmítnout příkladové cesty, dokud soubory neexistují.

Přenositelná Markdown direktiva

:::image-gallery{layout=grid mobile=stack orderedBy=viewpoint}
## Tři pohledy, které 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. Přehled.** Kompletní konektor určuje tvar, měřítko a orientaci.
:::

:::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. Zajišťovací výstupek.** Detailní pohled potvrzuje, že příchytka je neporušená.
:::
:::

První nadpis se stává title; tělo každé položky se stává jejím popiskem. Pořadí ve zdroji je kanonické, takže masonry nesmí přeskupovat položky k vyplnění mezer.

Mapování na Hugo shortcode

{{< image-gallery layout="grid" mobile="stack" orderedBy="viewpoint" >}}
## Tři pohledy, které 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. Přehled.** Kompletní konektor určuje tvar, měřítko a orientaci.
{{< /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. Zajišťovací výstupek.** Detailní pohled potvrzuje, že příchytka je neporušená.
{{< /gallery-item >}}
{{< /image-gallery >}}

Tato specifikace adaptéru není registrovaný shortcode. Do schválení používejte sémantické figury v pořadí zdroje a neodkazujte na chybějící prostředky.

WordPress blok

<!-- wp:amicited/image-gallery {"layout":"grid","mobile":"stack","orderedBy":"viewpoint"} -->
<section aria-labelledby="condition-gallery">
  <h2 id="condition-gallery">Tři pohledy, které 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>Přehled.</strong> Kompletní konektor určuje tvar, měřítko a orientaci.</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>Zajišťovací výstupek.</strong> Detailní pohled potvrzuje, že příchytka je neporušená.</figcaption></figure></li>
  </ol>
</section>
<!-- /wp:amicited/image-gallery -->

WordPress implementace může použít nativní blok Galerie pouze pokud zachovává alt text pro každou položku, popisky, přirozené rozměry, pořadí ve zdroji a přístupný název skupiny. Stylování sekvence obrázků na pozadí nesplňuje kontrakt.

Příklady

Dobrý: každý pohled řeší jinou nejistotu

Stav použitého vybavení — kontrolní pořadí

1. Celá jednotka: Určuje identitu a ukazuje, že je kryt kompletní.
2. Výrobní štítek: Potvrzuje přesný model a jmenovité napětí v čitelném zaostření.
3. Napájecí konektor: Ukazuje rovné kolíky a neporušený zajišťovací výstupek.
4. Opotřebovaný povrch: Ukazuje nejhlubší viditelný škrábanec vedle pravítka pro měřítko.

Toto následuje kupcovu kontrolní logiku. Každý popisek je ověřitelný, pravítko brání tomu, aby detailní záběr zveličil poškození, a mobilní skládaný seznam zachovává pořadí.

Špatný: karusel používaný jako skládka prostředků

Naše poslední akce Dvanáct téměř identických fotografií z pódia, žádné popisky, automatické posouvání každé čtyři sekundy. Navigace se objeví pouze při najetí myší. Mobilní verze ukazuje oříznutý středový výřez a přijímá pouze gesta přejetí.

Členství ani pořadí nemá důvod. Dvanáct názvů souborů neříká čtečce obrazovky nic; automatické posouvání znemožňuje prohlížení; ovládání pouze při najetí myší vylučuje uživatele klávesnice a dotyku; navigace pouze přejetím skrývá přístup; a ořez může odstranit hlavní objekt. Vyberte několik snímků, které vyprávějí definovaný příběh, napište odlišné alternativy a popisky, zastavte automatický pohyb a jako výchozí nastavte mobilní skládaný seznam.

Značkování schémat a přístupnost

Galerie automaticky nezískává zvláštní zacházení ve vyhledávání. Značkujte pouze vztahy, které viditelná stránka a prostředky podporují. Smysluplné obrázky lze mapovat na ImageObject se stabilním contentUrl, popiskem, textem o tvůrci nebo autorství, informacemi o licenci a reprezentativním statusem, pokud jsou tyto skutečnosti známy. Explicitně seřazenou galerii lze mapovat na ItemList s použitím hodnot position, které odpovídají pořadí ve zdroji. Produktové pohledy mohou plnit vlastnost Product.image nadřazené stránky. Nevytvářejte entity pro dekorativní obrázky, nevymýšlejte licence a netvrďte, že každý obrázek je reprezentativní.

Používejte nativní prvky <img> uvnitř prvků <figure> s viditelným <figcaption>, je-li to vyžadováno. Pojmenujte sekci prostřednictvím jejího nadpisu. Zachovávejte seřazené vztahy pomocí <ol> nebo ekvivalentní sémantiky pozice; vizuální umístění nikdy nepřebíjí pořadí v DOM.

Alternativní text popisuje účel každého obrázku v této sadě. Neměl by začínat „obrázek", opakovat doslovně popisek ani popisovat detaily irelevantní pro rozhodnutí. Dvě fotografie stejného předmětu vyžadují odlišný alt text, protože každá má jiný účel. Použijte alt="" pouze tehdy, když je obrázek skutečně nadbytečný a jeho odstranění by neodstranilo důkaz.

Interaktivní varianty potřebují pojmenovaná tlačítka pro předchozí a následující, aktivaci klávesnicí, textový indikátor pozice a oznámení stavu po změnách. Automatické posouvání je zakázáno. Udržujte fokus na aktivovaném ovládacím prvku a zachovejte obsah bez JavaScriptu, při 200% zvětšení a s omezeným pohybem.

Pravidla psaní

Každá galerie odpovídá na jednu sdílenou otázku. Uveďte, proč existuje, poté řaďte podle vyprávění, chronologie, priority, úhlu pohledu nebo srovnání — nikdy podle pořadí nahrávání.

• Použijte 2–8 položek pro běžnou galerii; použijte přesně 2 pro srovnání a 3–12 pro primární sadu produkt/detail.
• Pište názvy ve 3–10 slovech a volitelné úvody v jedné větě o 8–30 slovech.
• Udržujte popisky na 5–30 slovech. Začněte s pohledem, stavem nebo štítkem položky, pokud to zlepšuje skenovatelnost, poté vysvětlete její přínos.
• Používejte paralelní strukturu popisků v celé sadě. Pokud první začíná štítkem stavu, ostatní by měly také.
• Udržujte alternativní text zaměřený na to, co nevidomý čtenář potřebuje z daného snímku; cílový rozsah 40–180 znaků, nikdy nepřekračujte 250.
• Zachovejte věcný, pozorovací tón. Uvádějte „těsnění dosedá zarovnaně" spíše než „úžasné těsnění vypadá perfektně."
• Identifikujte čas, měřítko, ořez, stav a zdroj, kdykoli omezují interpretaci.
• Použijte stejné srovnávací podmínky, když je vzhled důkazem: ekvivalentní ořez, úhel, měřítko, osvětlení a barevné zpracování.

Nikdy nevkládejte nadpis, odstavec, tabulku, seznam instrukcí, výzvu k akci, formulář, cenu, hodnocení, reference, rozbalovací panel, video, audio přehrávač ani produktovou kartu do popisku položky. Nikdy nevkládejte popisky do pixelů, nedělejte barvu jediným štítkem, neskrývejte materiálové vady ořezáváním, nevystavujte zákaznická data a nepublikujte obrázek bez potvrzených práv k použití.

Typy příspěvků, které ji používají

Řádky níže odpovídají frontmatter proměnné postTypes. Uvedení znamená, že typ příspěvku může galerii použít, pokud obrázky tvoří skutečnou sadu; nečiní prvek povinným na každé stránce.

Kontrolní seznam QA

• Název uvádí jednu sdílenou otázku nebo téma a každý obrázek přináší odlišnou odpověď.
• Počet položek odpovídá zvolené variantě a neobsahuje žádný nadbytečný snímek.
• orderedBy zaznamenává obhajitelné vyprávění, chronologii, prioritu, úhel pohledu nebo srovnávací pořadí.
• Pořadí ve zdroji, vizuální, klávesnicové, čtečky obrazovky, číslování a mobilní pořadí jsou shodná.
• Každé src před publikací odkazuje na existující statický obrázek s vyřešenými právy.
• Každý obrázek má přirozenou šířku a výšku, záměrnou alt hodnotu a smysluplný ořez.
• Důkazy, srovnání a seřazené položky mají stručné viditelné popisky s paralelní strukturou.
• Údaje o autorství a odkazy na licence jsou viditelné a přesné, je-li to vyžadováno.
• Srovnávací obrázky používají ekvivalentní měřítko, úhel, ořez, osvětlení a štítky, pokud není rozdíl uveden.
• Mobil používá čitelnou skládanou záložní variantu nebo kompletní přístupné ovládací prvky; přejetí není nikdy jediným vstupem.
• Interaktivní varianty mají viditelná tlačítka pro předchozí a následující, textový indikátor pozice, podporu klávesnice a žádné automatické posouvání.
• Galerie funguje bez JavaScriptu a při 200% zvětšení, respektuje omezení pohybu a nevytváří horizontální přetékání stránky.
• První důležitý obrázek není odložen, stavy pozdějšího načítání jsou oznámeny a vyhrazený prostor zabraňuje posunu rozložení.
• Žádná nezbytná instrukce, číslo, varování, štítek ani závěr neexistují pouze v pixelech.
• Galerie neobsahuje žádné video, produktovou kartu, formulář, cenu, hodnocení, referenci ani výzvu k akci.
• Strukturovaná data odpovídají viditelnému pořadí, popiskům, právům a vztahům entit, aniž by považovala dekoraci za obsah.
• Přenositelná Markdown, Hugo a WordPress mapování zachovávají stejná pole, pořadí položek a význam.

FAQ

Šablona academy vykresluje pět recenzovaných otázek uložených v [[faq]] frontmatter této stránky. Pokrývají počet položek, mobilní karusely, alternativní text a popisky, zakázaný smíšený obsah a strukturovaná data.

Úspěch znamená, že čtenář dokáže vysvětlit vztah mezi obrázky a přínos každé položky. Bez smysluplného pořadí, odlišných popisků a přístupné mobilní cesty je sada pouhým seznamem prostředků, nikoli galerií.