Billedgalleri: Sortering, billedtekster og mobilregler

Et billedgalleri samler flere relaterede stillbilleder i en ordnet redaktionel enhed. Rækkefølgen er en del af meningen: en læser bør forstå, hvorfor disse billeder hører sammen, hvad hvert enkelt bidrager med, og om bevægelsen fra element 1 til element 2 repræsenterer tid, prioritet, synsvinkel eller blot gennemsynsrækkefølge.

Dette eksempel bruger et redaktionelt grid, fordi alle tre visninger er lige vigtige og passer uden at skjule noget element. Rækkefølgen går fra identifikation til to tilstandstjek. Billedteksterne angiver, hvad hver visning beviser; de gentager ikke blot “stikforbindelsesbillede.”

Hvorfor dette element er vigtigt

Folk undersøger et sæt anderledes end en bunke. En synlig afgrænsning og en bevidst rækkefølge fortæller læseren, at billederne sammen besvarer et større spørgsmål. Overblikket skaber orientering, og derefter reducerer detaljebillederne usikkerhed. Denne progression forhindrer læseren i at åbne uafhængige billeder, huske deres placering og selv konstruere relationen.

Sortering styrer forventninger. Et kronologisk sæt lover forandring; et produktsæt lover overblik, skala, funktioner, varianter og tilstand. Filnavn- eller uploadrækkefølge kan få vigtig dokumentation til at se sekundær ud eller antyde en fortælling, der ikke findes.

Maskinel udtrækbarhed er evnen for software til at isolere galleriet uden at miste relationen mellem dets billeder. En maskine kan identificere separate billedfiler, men den kan ikke sikkert afgøre, om de er alternativer, trin, dokumentation eller dekoration. En gallerititel, erklæret sorteringslogik, stabile elementpositioner, individuel alt-tekst og synlige billedtekster giver denne relation i tekst. De samme felter kan fodre søgeindeksering, indholdsinventarer, tilgængelighedstjek og struktureret data uden at stole på computersyn.

De fælles element skriveregler styrer præcedens for typede elementer, portable direktiver og brødtekstkortlægning. Denne side har forrang for billedgallerispecifikke elementbegrænsninger, sortering, billedtekster og mobiladfærd. Efterlign ikke et galleri med løse billeder eller en generisk slider, når dette elements formål er relevant.

Hvornår det skal bruges

Brug et billedgalleri, når to eller flere billeder er jævnbyrdige og besvarer ét spørgsmål bedre sammen end hver for sig. Hvert billede skal tilføje en tydelig visning, tilstand, stadie, detalje eller et eksempel. Stærke tilfælde omfatter produktvisninger, før-og-efter-dokumentation, en kort procesrækkefølge, lokationsorientering, et designportefølje eller flere detaljer, der understøtter én anmeldelseskonklusion.

Anvend fjernelsestesten på hvert element. Hvis fjernelse af et billede ikke ændrer noget, læseren kan beslutte, verificere eller forstå, så fjern det fra sættet. Et galleri er ikke en opbevaringsflade for alle tilgængelige aktiver.

Næsten-sammenfald har brug for forskellige elementer:

• Brug en enkelt figur eller imagebox, når ét billede bærer pointen, og prosaen fortolker den.
• Brug et kommenteret skærmbillede , når læsere skal finde flere kontroller inde i ét interfacebillede. Del ikke én skærm op i et galleri af uforklarede udsnit.
• Brug en sammenligningstabel, når læseren skal sammenligne gentagne attributter på tværs af mange muligheder. Billeder kan understøtte beslutningen, men de kan ikke erstatte tekstlige kriterier.
• Brug en trinliste, når handlinger er det primære indhold. Et galleri kan vise resulterende tilstande, men det må ikke gøre krævede instruktioner til billedtekster.
• Brug en produkt-slider, når hvert kort har pris, tilgængelighed, bedømmelse og en handling. Et galleri indeholder billeder, ikke købbare enheder.
• Brug separate figurer, når billederne understøtter forskellige afsnit og ikke deler en meningsfuld rækkefølge.

Hvor det skal placeres

Placer galleriet umiddelbart efter det afsnit, der angiver det spørgsmål, sættet vil besvare. Et produkttilstandsgalleri følger efter tilstandspåstanden; et casestudieforløb følger efter interventionen; et lokationsgalleri følger efter ankomstinformation.

Hold galleriets titel, valgfri introduktion, alle elementer, billedtekster, krediteringer og kontroller i én semantisk container. Indsæt ikke prosa, en annonce, et call to action eller et sideskift mellem elementer. Følg galleriet med fortolkningen eller næste beslutning, når billedteksterne ikke bærer den fuldstændigt.

Et galleri må ikke placeres direkte ved siden af et andet galleri, video, stor tabel, fuldbredde-diagram, imagebox eller ikke-relateret call to action. Tilføj forklarende prosa mellem tætte visuelle enheder, eller kombiner ægte jævnbyrdige.

Placer ikke et galleri inde i et trin, listeelement, callout, tabelcelle, accordion, klikbart kort eller et andet galleri. Del aldrig en påstand fra dens kilde eller en advarsel fra den handling, den begrænser. Reserver det første viewport til det direkte svar, medmindre billederne er svaret.

Anatomi

Anatomi er semantisk. Grid-kolonner, miniaturebilledstørrelser, skygger, hjørneradius og animation tilhører fremviseren snarere end indholdsmodellen.

1. Galleribeholder: Samler titel, beskrivelse, elementer og kontroller under ét tilgængeligt navn.
2. Gallerititel: Angiver det fælles emne eller spørgsmål på 3–10 ord.
3. Introduktion: Forklarer eventuelt rækkefølgen eller inspektionsopgaven i én sætning.
4. Ordnet element: Bevarer stabil kildeorden uanset skrivebordslayoutet.
5. Billede: Bruger et eksisterende, rettighedsafklaret aktiv med iboende bredde og højde.
6. Alternativ tekst: Beskriver billedets formål i sættet frem for at kopiere dets billedtekst.
7. Billedtekst: Identificerer visningen og forklarer dets distinkte bidrag.
8. Kreditering: Giver oplysninger om skaber, kilde eller licens, når det kræves.
9. Kontroller: For et interaktivt galleri understøtter synlige knapper markør-, tastatur-, kontakt- og berøringsinput.
10. Positionsindikator: Annoncerer “2 af 5” i tekst, når nogle elementer er skjult fra visning.
11. Mobilorden: Matcher DOM-orden, nummerering, tastaturorden og den tilsigtede fortælling.

Designeksempler

Vælg den mindst interaktive variant, der bevarer relationen. Hver variant holder komplette billedtekster tilgængelige i tekst og bruger samme kildeorden ved alle breakpoints.

Redaktionelt grid

Brug et grid til 2–6 lige vægtede billeder, der kan vises sammen. Desktop kan bruge to eller tre kolonner. Mobil kollapser til én kolonne; det formindsker aldrig tre billeder til ulæselige miniaturebilleder.

Sekventiel stribe

Brug en stribe til 3–8 billeder med en eksplicit kronologisk eller rumlig progression. På smalle skærme kan det blive til et vandret scrollbart område kun, når synlige kontroller, en positionsindikator, tastaturbetjening og et stablet ikke-JavaScript-fallback findes. Gør aldrig swipe til det eneste navigationsmiddel.

Sammenligningspar

Brug præcis to billeder til før-og-efter, original-og-revideret eller to synsvinkler, der skal vurderes sammen. Brug vedvarende tekstetiketter, ikke kun farve eller position. Mobil stabler element 1 før element 2 og gentager etiketterne ved siden af billederne.

Primært billede med detaljevisninger

Brug dette til 3–12 produkt- eller genstandsvisninger, når ét overblik forankrer sættet, og de resterende billeder besvarer forskellige inspektionsspørgsmål. Valg af et miniaturebillede skal opdatere det primære billedes alt-tekst, billedtekst, position og annoncerede tilstand. Hvert billede forbliver tilgængeligt uden JavaScript.

Mobil stablet standard

Brug den stablede liste, når interaktivitet ikke ville forbedre forståelsen væsentligt. Det er standarden for redaktionelt indhold, fordi alle elementer og billedtekster forbliver synlige, linkbare, udskrivbare og læsbare uden gestik.

Parametre

Kontrakten gemmer redaktionel mening og aktivmetadata. Layout-tokens, kolonnebredder, mellemrum, kontrolikoner, overgangsvarighed og breakpoints tilhører fremviseren.

Billedtekster er påkrævet for dokumentation, meningsændrende rækkefølge, sammenligningsetiketter og synlige rettighedsoplysninger. En produktvinkel kan undlade én, kun når dens alt-tekst og kontekst adskiller visningen. mobile=scroll er kun gyldig for strip eller primary-details med de påkrævede kontroller.

Syntaks og kodeeksempler

Alle kortlægninger bevarer samme titel, rækkefølge, elementfelter og fallback. Produktion må afvise eksempelstier, indtil filerne findes.

Portabelt Markdown-direktiv

:::image-gallery{layout=grid mobile=stack orderedBy=viewpoint}
## Tre visninger, der fastslår produktets tilstand

:::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. Overblik.** Den komplette stikforbindelse viser form, skala og orientering.
:::

:::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. Låsetap.** Nærbilledet bekræfter, at låseclipsen er intakt.
:::
:::

Den første overskrift bliver title; hver elements brødtekst bliver dens billedtekst. Kildeorden er kanonisk, så masonry må ikke omorganisere elementer for at udfylde huller.

Hugo shortcode-kortlægning

{{< image-gallery layout="grid" mobile="stack" orderedBy="viewpoint" >}}
## Tre visninger, der fastslår produktets tilstand

{{< 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. Overblik.** Den komplette stikforbindelse viser form, skala og orientering.
{{< /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. Låsetap.** Nærbilledet bekræfter, at låseclipsen er intakt.
{{< /gallery-item >}}
{{< /image-gallery >}}

Denne adapterspecifikation er ikke en registreret shortcode. Indtil godkendelse, brug semantiske figurer i kildeorden og referér ikke til manglende aktiver.

WordPress-blok

<!-- wp:amicited/image-gallery {"layout":"grid","mobile":"stack","orderedBy":"viewpoint"} -->
<section aria-labelledby="condition-gallery">
  <h2 id="condition-gallery">Tre visninger, der fastslår produktets tilstand</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>Overblik.</strong> Den komplette stikforbindelse viser form, skala og orientering.</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>Låsetap.</strong> Nærbilledet bekræfter, at låseclipsen er intakt.</figcaption></figure></li>
  </ol>
</section>
<!-- /wp:amicited/image-gallery -->

En WordPress-implementering må kun bruge en indbygget Galleri-blok, hvis den bevarer alt-tekst pr. element, billedtekster, iboende dimensioner, kildeorden og det tilgængelige gruppenavn. At style en sekvens af baggrundsbilleder opfylder ikke kontrakten.

Eksempler

Godt: hver visning afklarer en forskellig usikkerhed

Brugt udstyrstilstand — inspektionsrækkefølge

1. Hel enhed: Fastslår identitet og viser, at kabinettet er komplet.
2. Typeskilt: Bekræfter den præcise model og mærkespænding i læselig fokus.
3. Strømstik: Viser lige ben og en intakt låsetap.
4. Slidflade: Viser den dybeste synlige ridse ved siden af en lineal for skala.

Dette følger køberens inspektionslogik. Hver billedtekst er verificerbar, linealen forhindrer et nærbillede i at overdrive skader, og mobilstakken bevarer rækkefølgen.

Dårligt: en karrusel brugt som aktivdump

Vores seneste arrangement Tolv næsten identiske scenefotografier, ingen billedtekster, auto-fremrykning hvert fjerde sekund. Navigation vises kun ved hover. Mobilversionen viser et beskåret centerudsnit og accepterer kun swipe-bevægelser.

Hverken medlemskab eller rækkefølge har en grund. Tolv filnavne formidler intet til en skærmlæser; auto-fremrykning forhindrer inspektion; kun-hover-kontroller udelukker tastatur- og berørings-brugere; kun-swipe-navigation skjuler adgang; og beskarringen kan fjerne motivet. Vælg de få billeder, der fortæller en defineret historie, skriv distinkte alternativer og billedtekster, stop automatisk bevægelse, og brug som standard en mobil stak.

Skema-markup og tilgængelighed

Et galleri får ikke automatisk særlig søgebehandling. Markup kun relationer, som den synlige side og aktiver understøtter. Meningsfulde billeder kan kortlægges til ImageObject med stabil contentUrl, billedtekst, skaber- eller krediteringstekst, licensinformation og repræsentativ status, når disse fakta er kendte. Et eksplicit ordnet galleri kan kortlægges til ItemList med position-værdier, der matcher kildeorden. Produktvisninger kan udfylde den overordnede Product.image-egenskab. Opret ikke entiteter for dekorative billeder, opfind ikke licenser, eller påstå ikke at hvert billede er repræsentativt.

Brug native <img>-elementer inde i <figure>-elementer med synlig <figcaption>, hvor det kræves. Navngiv sektionen via dens overskrift. Bevar ordnede relationer med <ol> eller tilsvarende positionssemantik; visuel placering tilsidesætter aldrig DOM-orden.

Alternativ tekst beskriver formålet med hvert billede i dette sæt. Den bør ikke starte med “billede af,” gentage billedteksten ordret eller beskrive detaljer, der er irrelevante for beslutningen. To fotografier af samme objekt kræver forskellig alt-tekst, fordi hver har et andet formål. Brug alt="" kun når et billede er ægte redundant, og fjernelse ikke ville fjerne dokumentation.

Interaktive varianter har brug for navngivne forrige- og næste-knapper, tastaturaktivering, en tekstpositionsindikator og en statusmeddelelse efter ændringer. Auto-fremrykning er forbudt. Bevar fokus på den aktiverede kontrol, og bevar indhold uden JavaScript, ved 200 % zoom og med reduceret bevægelse.

Skriveregler

Hvert galleri besvarer ét fælles spørgsmål. Angiv hvorfor det findes, og sortér derefter efter fortælling, kronologi, prioritet, synsvinkel eller sammenligning—aldrig upload-rækkefølge.

• Brug 2–8 elementer til et normalt galleri; brug præcis 2 til en sammenligning og 3–12 til et primært produkt/detaljesæt.
• Skriv titler på 3–10 ord og valgfri introduktioner på én sætning med 8–30 ord.
• Hold billedtekster på 5–30 ord. Begynd med visningen, tilstanden eller elementets etiket, når det forbedrer skanning, forklar derefter dets bidrag.
• Brug parallel billedtekststruktur på tværs af sættet. Hvis den første starter med en tilstandsetiket, bør de andre også gøre det.
• Hold alternativ tekst fokuseret på, hvad en ikke-visuel læser har brug for fra den specifikke ramme; sigt efter 40–180 tegn og overskrid aldrig 250.
• Bevar en faktuel, observerende tone. Sig “forseglingen sidder plant” frem for “den fantastiske forsegling ser perfekt ud.”
• Identificér tid, skala, beskæring, tilstand og kilde, når de begrænser fortolkning.
• Brug de samme sammenligningsbetingelser, når udseende er dokumentation: tilsvarende beskæring, vinkel, skala, belysning og farvebehandling.

Sæt aldrig en overskrift, et afsnit, en tabel, en instruktionsliste, et call to action, en formular, en pris, en bedømmelse, et vidnesbyrd, en udvidelig meddelelse, en video, en lydafspiller eller et produktkort inde i en elementbilledtekst. Indbag aldrig billedtekster i pixels, gør farve til den eneste etiket, skjul materielle defekter gennem beskæring, eksponér kundedata, eller publicér et billede uden bekræftede brugsrettigheder.

Posttyper, der bruger det

Rækkerne nedenfor afspejler postTypes frontmatter. Inklusion betyder, at posttypen kan bruge et galleri, når billederne udgør et ægte sæt; det gør ikke elementet obligatorisk på hver side.

QA-tjekliste

• Titlen angiver ét fælles spørgsmål eller emne, og hvert billede bidrager med et tydeligt svar.
• Antallet af elementer matcher den valgte variant og indeholder ingen redundante billeder.
• orderedBy registrerer en forsvarlig fortællings-, kronologi-, prioritets-, synsvinkel- eller sammenligningsorden.
• Kilde-, visuel-, tastatur-, skærmlæser-, nummererings- og mobilordener matcher alle.
• Hver src peger på et eksisterende, rettighedsafklaret stillbillede før publicering.
• Hvert billede har iboende bredde og højde, en bevidst alt-værdi og en meningsfuld beskæring.
• Dokumentation, sammenligninger og ordnede elementer har kortfattede synlige billedtekster med parallel struktur.
• Krediteringer og licenslinks er synlige og nøjagtige, hvor det kræves.
• Sammenligningsbilleder bruger tilsvarende skala, vinkel, beskæring, belysning og etiketter, medmindre en forskel er oplyst.
• Mobil bruger et læsbart stablet fallback eller komplette tilgængelige kontroller; swipe er aldrig det eneste input.
• Interaktive varianter har synlige forrige- og næste-knapper, en tekstpositionsindikator, tastaturunderstøttelse og ingen auto-fremrykning.
• Galleriet fungerer uden JavaScript og ved 200 % zoom, respekterer reduceret bevægelse og skaber ikke vandret sideoverflow.
• Det første vigtige billede er ikke udskudt, senere indlæsningstilstande annonceres, og reserveret plads forhindrer layout-skift.
• Ingen væsentlig instruktion, nummer, advarsel, etiket eller konklusion findes kun i pixels.
• Galleriet indeholder ingen video, produktkort, formular, pris, bedømmelse, vidnesbyrd eller call to action.
• Struktureret data matcher synlig orden, billedtekster, rettigheder og entitetsrelationer uden at behandle dekoration som indhold.
• Portabel Markdown, Hugo og WordPress-kortlægninger bevarer de samme felter, elementorden og mening.

FAQ

Akademiskabelonen gengiver de fem gennemgåede spørgsmål, der er gemt i denne sides [[faq]] frontmatter. De dækker antal elementer, mobilkarruseller, alternativ tekst og billedtekster, forbudt blandet indhold og struktureret data.

Succes betyder, at en læser kan forklare relationen mellem billederne og hvert elements bidrag. Uden meningsfuld orden, tydelige billedtekster og en tilgængelig mobil sti er sættet en aktivliste snarere end et galleri.