Bildegalleri: Rekkefølge, bildetekster og mobilregler

Et bildegalleri grupperer flere relaterte stillbilder i én ordnet redaksjonell enhet. Rekkefølgen er en del av meningen: en leser skal forstå hvorfor disse bildene hører sammen, hva hvert enkelt bidrar med, og om overgangen fra element 1 til element 2 representerer tid, prioritet, synsvinkel eller enkel blaerekefølge.

Dette eksemplet bruker et redaksjonelt rutenett fordi alle tre visningene er like viktige og passer uten å skjule noe element. Rekkefølgen går fra identifikasjon til to tilstandskontroller. Bildetekstene sier hva hver visning beviser; de gjentar ikke bare «kontaktbilde».

Hvorfor dette elementet betyr noe

Folk undersøker et sett annerledes enn en haug. En synlig avgrensning og en gjennomtenkt rekkefølge forteller leseren at bildene sammen svarer på ett større spørsmål. Oversikten skaper orientering, så reduserer detaljbildene usikkerhet. Denne progresjonen forhindrer at leseren åpner urelaterte bilder, husker plasseringene deres og konstruerer relasjonen på egen hånd.

Rekkefølge styrer forventninger. Et kronologisk sett lover endring; et produktsett lover oversikt, størrelse, funksjoner, varianter og tilstand. Filnavn- eller opplastingsrekkefølge kan få viktige bevis til å fremstå som sekundære eller antyde en fortelling som ikke finnes.

Maskinell uttrekkbarhet er evnen programvare har til å isolere galleriet uten å miste relasjonene mellom bildene. En maskin kan identifisere separate bildefiler, men den kan ikke trygt slutte seg til om de er alternativer, steg, bevis eller dekorasjon. En galleritittel, en oppgitt sorteringslogikk, stabile elementplasseringer, individuell alt-tekst og synlige bildetekster gir denne relasjonen i tekst. De samme feltene kan mate søkeindeksering, innholdsinventar, tilgjengelighetskontroller og strukturerte data uten å stole på datasyn.

De felles skrivereglene for elementer styrer prioritet for typed elementer, portable direktiver og kroppskartlegging. Denne siden har forrang for bildegalleri-spesifikke begrensninger for antall elementer, rekkefølge, bildetekster og mobilatferd. Ikke etterlign et galleri med løse bilder eller en generisk slider når dette elementets formål gjelder.

Når du skal bruke det

Bruk et bildegalleri når to eller flere bilder er jevnbyrdige og besvarer ett spørsmål bedre sammen enn hver for seg. Hvert bilde må tilføre en distinkt visning, tilstand, fase, detalj eller et eksempel. Gode tilfeller inkluderer produktvisninger, før/etter-bevis, en kort prosessekvens, stedsorientering, en designportefølje eller flere detaljer som underbygger én omtalekonklusjon.

Bruk fjerningstesten på hvert element. Hvis fjerning av et bilde ikke endrer noe leseren kan avgjøre, verifisere eller forstå, fjern det fra settet. Et galleri er ikke en lagringsflate for hver tilgjengelig ressurs.

Nære bommetilfeller trenger andre elementer:

• Bruk en enkelt figur eller imagebox når ett bilde bærer poenget og prosaen tolker det.
• Bruk et kommentert skjermbilde når lesere må finne flere kontroller innenfor ett grensesnittbilde. Ikke del opp én skjerm i et galleri med uforklarte beskjæringer.
• Bruk en sammenligningstabell når leseren må sammenligne gjentatte egenskaper på tvers av mange alternativer. Bilder kan støtte beslutningen, men kan ikke erstatte tekstlige kriterier.
• Bruk en stegliste når handlinger er primært innhold. Et galleri kan vise resulterende tilstander, men må ikke gjøre nødvendige instruksjoner om til bildetekster.
• Bruk en produktglider når hvert kort har pris, tilgjengelighet, vurdering og en handling. Et galleri inneholder bilder, ikke kjøpbare enheter.
• Bruk separate figurer når bildene underbygger ulike seksjoner og ikke deler noen meningsfull rekkefølge.

Hvor du skal plassere det

Plasser galleriet rett etter avsnittet som angir spørsmålet settet skal besvare. Et produkt-tilstandsgalleri følger tilstandspåstanden; en casestudie-sekvens følger intervensjonen; et stedsgalleri følger ankomstinformasjonen.

Hold galleriets tittel, valgfri introduksjon, alle elementer, bildetekster, krediteringer og kontroller i én semantisk beholder. Ikke sett inn prosa, en annonse, en handlingsoppfordring eller et sideskift mellom elementer. Følg galleriet med tolkningen eller neste beslutning når bildetekstene ikke bærer det helt frem.

Et galleri kan ikke plasseres rett ved siden av et annet galleri, en video, en stor tabell, et bredt diagram, imagebox eller en urelatert handlingsoppfordring. Legg til forklarende prosa mellom tette visuelle enheter, eller kombiner ekte jevnbyrdige elementer.

Ikke plasser et galleri inne i et steg, listeelement, utropstekst, tabelcelle, trekkspillmeny, klikkbart kort eller et annet galleri. Skill aldri en påstand fra kilden eller en advarsel fra handlingen den begrenser. Reserver første visningsområde for det direkte svaret med mindre bildene er svaret.

Anatomi

Anatomi er semantisk. Rutenettkolonner, miniatyrbildestørrelser, skygger, hjørneradier og animasjon tilhører gjengiveren, ikke innholdsmodellen.

1. Galleribeholder: Grupperer tittelen, beskrivelsen, elementene og kontrollene under ett tilgjengelig navn.
2. Galleritittel: Angir det felles emnet eller spørsmålet på 3–10 ord.
3. Introduksjon: Forklarer valgfritt rekkefølgen eller inspeksjonsoppgaven i én setning.
4. Ordnede element: Bevarer stabil kilde-rekkefølge uavhengig av skrivebordsoppsettet.
5. Bilde: Bruker en eksisterende, rettighetsavklart ressurs med intrinsisk bredde og høyde.
6. Alternativ tekst: Beskriver dette bildets formål i settet, i stedet for å kopiere bildeteksten.
7. Bildetekst: Identifiserer visningen og forklarer dens distinkte bidrag.
8. Kreditering: Oppgir skaper, kilde eller lisensinformasjon når det er påkrevd.
9. Kontroller: For et interaktivt galleri støtter synlige knapper peker-, tastatur-, bryter- og berøringsinndata.
10. Posisjonsindikator: Kunngjør «2 av 5» i tekst når noen elementer er skjult fra visning.
11. Mobilrekkefølge: Samstemmer med DOM-rekkefølge, nummerering, tastaturrekkefølge og den tiltenkte fortellingen.

Designeksempler

Velg den minst interaktive varianten som bevarer relasjonen. Hver variant holder fullstendige bildetekster tilgjengelige i tekst og bruker samme kilde-rekkefølge ved alle brytepunkter.

Redaksjonelt rutenett

Bruk et rutenett for 2–6 bilder med lik vekt som kan vises sammen. Desktop kan bruke to eller tre kolonner. Mobil kollapser til én kolonne; det krymper aldri tre bilder til uleselige miniatyrbilder.

Sekvensiell stripe

Bruk en stripe for 3–8 bilder med en tydelig kronologisk eller romlig progresjon. På smale skjermer kan den bli et horisontalt rullbart område kun når synlige kontroller, en posisjonsindikator, tastaturbetjening og et stablet ikke-JavaScript-alternativ finnes. Gjør aldri sveiping til eneste navigasjonsmetode.

Sammenligningspar

Bruk nøyaktig to bilder for før/etter, original/revidert, eller to synsvinkler som må vurderes sammen. Bruk varige tekstetiketter, ikke farge eller plassering alene. Mobil stabler element 1 før element 2 og gjentar etikettene ved siden av bildene.

Primærbilde med detaljvisninger

Bruk dette for 3–12 produkt- eller gjenstandsvisninger når én oversikt forankrer settet og de resterende bildene svarer på ulike inspeksjonsspørsmål. Valg av et miniatyrbilde må oppdatere primærbildets alt-tekst, bildetekst, posisjon og kunngjort tilstand. Hvert bilde forblir tilgjengelig uten JavaScript.

Mobil stablet standard

Bruk den stablede listen når interaktivitet ikke vesentlig vil forbedre forståelsen. Det er standarden for redaksjonelt innhold fordi alle elementer og bildetekster forblir synlige, lenkbare, utskrivbare og lesbare uten bevegelser.

Parametere

Kontrakten lagrer redaksjonell mening og ressursmetadata. Oppsett-tokener, kolonnebredder, mellomrom, kontrollikoner, overgangsvarighet og brytepunkter tilhører gjengiveren.

Bildetekster er påkrevd for bevis, rekkefølge som endrer betydning, sammenligningsetiketter og synlig rettighetsinformasjon. En produktvinkel kan utelate én kun når alt-teksten og konteksten skiller visningen. mobile=scroll er kun gyldig for strip eller primary-details med påkrevde kontroller.

Syntaks og kodeeksempler

Alle kartlegginger bevarer samme tittel, rekkefølge, elementfelt og alternativ. Produksjon må avvise eksempelstier inntil filene eksisterer.

Portable Markdown-direktiv

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

:::gallery-item{src="/cdn-assets/examples/connector-overview.webp" alt="Komplett svart industrikontakt på en nøytral overflate, orientert med låsetappen vendt oppover" width=1600 height=1200}
**1. Oversikt.** Hele kontakten etablerer form, størrelse og orientering.
:::

:::gallery-item{src="/cdn-assets/examples/connector-lock.webp" alt="Nærbilde av kontakten som viser en intakt opphøyd låsetapp uten synlig sprekk" width=1600 height=1200}
**2. Låsetapp.** Nærbildet bekrefter at holderen er intakt.
:::
:::

Den første overskriften blir title; hver elementkropp blir dens bildetekst. Kilde-rekkefølge er kanonisk, så mursteinslayout kan ikke omorganisere elementer for å fylle hull.

Hugo shortcode-kartlegging

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

{{< gallery-item src="/cdn-assets/examples/connector-overview.webp" alt="Komplett svart industrikontakt på en nøytral overflate, orientert med låsetappen vendt oppover" width="1600" height="1200" >}}
**1. Oversikt.** Hele kontakten etablerer form, størrelse og orientering.
{{< /gallery-item >}}

{{< gallery-item src="/cdn-assets/examples/connector-lock.webp" alt="Nærbilde av kontakten som viser en intakt opphøyd låsetapp uten synlig sprekk" width="1600" height="1200" >}}
**2. Låsetapp.** Nærbildet bekrefter at holderen er intakt.
{{< /gallery-item >}}
{{< /image-gallery >}}

Denne adapter-spesifikasjonen er ikke en registrert shortcode. Inntil godkjenning, bruk semantiske figurer i kilde-rekkefølge og ikke referer til manglende ressurser.

WordPress-blokk

<!-- wp:amicited/image-gallery {"layout":"grid","mobile":"stack","orderedBy":"viewpoint"} -->
<section aria-labelledby="condition-gallery">
  <h2 id="condition-gallery">Tre visninger som fastslår produktets tilstand</h2>
  <ol>
    <li><figure><img src="connector-overview.webp" width="1600" height="1200" alt="Komplett svart industrikontakt på en nøytral overflate, orientert med låsetappen vendt oppover"><figcaption><strong>Oversikt.</strong> Hele kontakten etablerer form, størrelse og orientering.</figcaption></figure></li>
    <li><figure><img src="connector-lock.webp" width="1600" height="1200" alt="Nærbilde av kontakten som viser en intakt opphøyd låsetapp uten synlig sprekk"><figcaption><strong>Låsetapp.</strong> Nærbildet bekrefter at holderen er intakt.</figcaption></figure></li>
  </ol>
</section>
<!-- /wp:amicited/image-gallery -->

En WordPress-implementering kan bruke en innebygd galleriblokk kun hvis den bevarer alt-tekst per element, bildetekster, intrinsiske dimensjoner, kilde-rekkefølge og det tilgjengelige gruppenavnet. Å style en sekvens av bakgrunnsbilder oppfyller ikke kontrakten.

Eksempler

Bra: hvert visning løser en annen usikkerhet

Brukt utstyrstilstand — inspeksjonsrekkefølge

1. Hel enhet: Etablerer identitet og viser at kapslingen er komplett.
2. Serieplate: Bekrefter eksakt modell og merkespenning i lesbar fokus.
3. Strømkontakt: Viser rette pinner og en intakt låsetapp.
4. Sliteflate: Viser den dypeste synlige ripen ved siden av en linjal for skala.

Dette følger kjøperens inspeksjonslogikk. Hver bildetekst er verifiserbar, linjalen hindrer at et nærbilde overdriver skaden, og den stablede mobilvisningen bevarer rekkefølgen.

Dårlig: en karusell brukt som resursdumping

Vårt siste arrangement
Tolv nesten identiske scenebilder, ingen bildetekster, auto-fremvisning hvert fjerde sekund. Navigasjon vises kun ved sveving. Mobilversjonen viser en beskjært midtskive og godtar kun sveipebevegelser.

Verken medlemskap eller rekkefølge har en grunn. Tolv filnavn formidler ingenting til en skjermleser; auto-fremvisning hindrer inspeksjon; kun sveveavhengige kontroller ekskluderer tastatur- og berøringsbrukere; sveipe-only navigasjon skjuler tilgang; og beskjæringen kan fjerne motivet. Velg de få bildene som forteller en definert historie, skriv distinkte alternativer og bildetekster, stopp automatisk bevegelse, og bruk stablet mobilsom standard.

Skjemamarkering og tilgjengelighet

Et galleri får ikke automatisk spesiell søkebehandling. Merk kun relasjoner som den synlige siden og ressursene underbygger. Meningsfulle bilder kan kartlegges til ImageObject med stabil contentUrl, bildetekst, skaper- eller krediteringstekst, lisensinformasjon og representativ status når disse faktaene er kjent. Et eksplisitt ordnet galleri kan kartlegges til ItemList med position-verdier som samsvarer med kilde-rekkefølgen. Produktvisninger kan fylle den overordnede Product.image-egenskapen. Ikke opprett enheter for dekorative bilder, finn opp lisenser, eller påstå at hvert bilde er representativt.

Bruk innebygde <img>-elementer inni <figure>-elementer med synlig <figcaption> der det er påkrevd. Navngi seksjonen via overskriften. Bevar ordnede relasjoner med <ol> eller tilsvarende posisjonssemantikk; visuell plassering overstyrer aldri DOM-rekkefølgen.

Alternativ tekst beskriver formålet med hvert bilde i dette settet. Den bør ikke starte med «bilde av», gjenta bildeteksten ordrett, eller beskrive detaljer som er irrelevante for beslutningen. To fotografier av samme objekt krever forskjellig alt-tekst fordi hvert har et annet formål. Bruk alt="" kun når et bilde er virkelig overflødig og fjerning ikke ville fjerne bevis.

Interaktive varianter trenger navngitte forrige- og neste-knapper, tastaturaktivering, en tekstposisjonsindikator og en statuskunngjøring etter endringer. Auto-fremvisning er forbudt. Hold fokus på den aktiverte kontrollen, og bevar innhold uten JavaScript, ved 200 % zoom og med redusert bevegelse.

Skriveregler

Hvert galleri svarer på ett felles spørsmål. Angi hvorfor det finnes, ordne deretter etter fortelling, kronologi, prioritet, synsvinkel eller sammenligning — aldri opplastingsrekkefølge.

• Bruk 2–8 elementer for et vanlig galleri; bruk nøyaktig 2 for en sammenligning og 3–12 for et primært produkt/detaljsett.
• Skriv titler på 3–10 ord og valgfrie introduksjoner i én setning på 8–30 ord.
• Hold bildetekster på 5–30 ord. Start med visningen, tilstanden eller elementets etikett når det forbedrer skanning, forklar deretter bidraget.
• Bruk parallell bildetekststruktur i hele settet. Hvis den første starter med en tilstandsetikett, bør de andre også gjøre det.
• Hold alternativ tekst fokusert på hva en ikke-visuell leser trenger fra den spesifikke rammen; mål 40–180 tegn og overskrid aldri 250.
• Oppretthold en faktabasert, observasjonell tone. Si «tetningen sitter plant» i stedet for «den fantastiske tetningen ser perfekt ut».
• Identifiser tid, størrelse, beskjæring, tilstand og kilde når de begrenser tolkning.
• Bruk de samme sammenligningsforholdene når utseende er bevis: tilsvarende beskjæring, vinkel, skala, belysning og fargebehandling.

Sett aldri en overskrift, et avsnitt, en tabell, en instruksjonsliste, en handlingsoppfordring, et skjema, en pris, en vurdering, en anbefaling, en utvidbar avsløring, en video, en lydspiller eller et produktkort inne i en elementbildetekst. Bak aldri bildetekster inn i piksler, gjør farge til den eneste etiketten, skjul materielle defekter gjennom beskjæring, eksponer kundedata, eller publiser et bilde uten bekreftede bruksrettigheter.

Innholdstyper som bruker det

Radene nedenfor gjenspeiler postTypes i frontmatter. Inkludering betyr at innholdstypen kan bruke et galleri når bildene utgjør et reelt sett; det gjør ikke elementet obligatorisk på hver side.

QA-sjekkliste

• Tittelen angir ett felles spørsmål eller emne, og hvert bilde bidrar med et distinkt svar.
• Antall elementer samsvarer med den valgte varianten og inneholder ingen overflødige rammer.
• orderedBy registrerer en forsvarlig fortelling, kronologi, prioritet, synsvinkel eller sammenligningsrekkefølge.
• Kilde-, visuell-, tastatur-, skjermleser-, nummererings- og mobilrekkefølger samsvarer alle.
• Hver src leder til en eksisterende, rettighetsavklart stillbildefil før publisering.
• Hvert bilde har intrinsisk bredde og høyde, en bevisst alt-verdi og en meningsfull beskjæring.
• Bevis, sammenligninger og ordnede elementer har konsise synlige bildetekster med parallell struktur.
• Krediteringer og lisenslenker er synlige og nøyaktige der det er påkrevd.
• Sammenligningsbilder bruker tilsvarende skala, vinkel, beskjæring, belysning og etiketter med mindre en forskjell er oppgitt.
• Mobil bruker et lesbart stablet alternativ eller fullstendige tilgjengelige kontroller; sveiping er aldri den eneste inndataen.
• Interaktive varianter har synlige forrige- og neste-knapper, en tekstposisjonsindikator, tastaturstøtte og ingen auto-fremvisning.
• Galleriet fungerer uten JavaScript og ved 200 % zoom, respekterer redusert bevegelse og skaper ikke horisontalt sideoverløp.
• Det første viktige bildet utsettes ikke, senere lastetilstander kunngjøres, og reservert plass forhindrer layoutendring.
• Ingen essensiell instruksjon, tall, advarsel, etikett eller konklusjon finnes kun i piksler.
• Galleriet inneholder ingen video, produktkort, skjema, pris, vurdering, anbefaling eller handlingsoppfordring.
• Strukturerte data samsvarer med synlig rekkefølge, bildetekster, rettigheter og enhetsrelasjoner uten å behandle dekorasjon som innhold.
• Portable Markdown-, Hugo- og WordPress-kartlegginger bevarer de samme feltene, elementrekkefølgen og meningen.

FAQ

Akademimalen gjengir de fem gjennomgåtte spørsmålene som er lagret i denne sidens [[faq]]-frontmatter. De dekker antall elementer, mobilkaruseller, alternativ tekst og bildetekster, forbudt blandet innhold og strukturerte data.

Suksess betyr at en leser kan forklare relasjonen mellom bildene og hvert elements bidrag. Uten meningsfull rekkefølge, distinkte bildetekster og en tilgjengelig mobil vei, er settet en ressursliste snarere enn et galleri.