Afbeeldingengalerij: Rangschikking, Bijschriften en Mobiele Regels

Een afbeeldingengalerij groepeert meerdere gerelateerde stilstaande afbeeldingen in één geordende redactionele eenheid. De volgorde maakt deel uit van de betekenis: een lezer moet begrijpen waarom deze afbeeldingen bij elkaar horen, wat elk bijdraagt en of de overgang van item 1 naar item 2 tijd, prioriteit, gezichtspunt of een eenvoudige bladervolgorde vertegenwoordigt.

Dit voorbeeld gebruikt een redactioneel raster omdat alle drie de weergaven even belangrijk zijn en passen zonder een item te verbergen. De volgorde gaat van identificatie naar twee conditiecontroles. De bijschriften geven aan wat elke weergave bewijst; ze herhalen niet alleen “connectorafbeelding”.

Waarom dit element ertoe doet

Mensen bekijken een set anders dan een stapel. Een zichtbare grens en een doordachte volgorde vertellen de lezer dat de afbeeldingen samen één grotere vraag beantwoorden. Het overzicht creëert oriëntatie, waarna de detailafbeeldingen onzekerheid verminderen. Die progressie voorkomt dat de lezer ongerelateerde afbeeldingen opent, hun posities onthoudt en zelf de relatie construeert.

Rangschikking stuurt verwachtingen. Een chronologische set belooft verandering; een productenset belooft overzicht, schaal, functies, varianten en conditie. Bestandsnaam- of uploadvolgorde kan belangrijk bewijs ondergeschikt laten lijken of een verhaal suggereren dat niet bestaat.

Machine-extraheerbaarheid is het vermogen van software om de galerij te isoleren zonder de relatie tussen de afbeeldingen te verliezen. Een machine kan losse afbeeldingsbestanden identificeren, maar kan niet veilig afleiden of ze alternatieven, stappen, bewijs of decoratie zijn. Een galerijtitel, aangegeven ordeningslogica, stabiele itemposities, individuele alt-tekst en zichtbare bijschriften bieden die relatie in tekst. Dezelfde velden kunnen zoekindexering, contentinventarissen, toegankelijkheidscontroles en gestructureerde gegevens voeden zonder afhankelijk te zijn van computervisie.

De gedeelde element-schrijfregels bepalen de voorrang van getypeerde elementen, draagbare richtlijnen en body-mapping. Deze pagina heeft voorrang voor afbeeldingengalerij-specifieke itemlimieten, rangschikking, bijschriften en mobiel gedrag. Imiteer geen galerij met losse afbeeldingen of een generieke schuifregelaar wanneer de toepassing van dit element van toepassing is.

Wanneer gebruiken

Gebruik een afbeeldingengalerij wanneer twee of meer afbeeldingen gelijkwaardig zijn en samen één vraag beter beantwoorden dan apart. Elke afbeelding moet een aparte weergave, toestand, fase, detail of voorbeeld toevoegen. Sterke gevallen zijn productweergaven, voor-en-na-bewijs, een korte procesreeks, locatie-oriëntatie, een designportfolio of meerdere details die één reviewconclusie ondersteunen.

Pas de verwijderingstest toe op elk item. Als het verwijderen van een afbeelding niets verandert wat de lezer kan beslissen, verifiëren of begrijpen, verwijder het dan uit de set. Een galerij is geen opslagoppervlak voor elk beschikbaar asset.

Bijna-passende gevallen hebben andere elementen nodig:

• Gebruik een enkele figuur of afbeeldingskader wanneer één afbeelding het punt draagt en de proza het interpreteert.
• Gebruik een geanoteerde schermafbeelding wanneer lezers meerdere bedieningselementen moeten vinden in één interfaceafbeelding. Splits één scherm niet op in een galerij van onverklaarde uitsneden.
• Gebruik een vergelijkingstabel wanneer de lezer herhaalde kenmerken over veel opties moet vergelijken. Afbeeldingen kunnen de beslissing ondersteunen, maar ze kunnen tekstuele criteria niet vervangen.
• Gebruik een stappenlijst wanneer handelingen de primaire inhoud zijn. Een galerij kan resulterende toestanden tonen, maar mag vereiste instructies niet omzetten in bijschriften.
• Gebruik een product-schuifregelaar wanneer elke kaart een prijs, beschikbaarheid, beoordeling en een actie heeft. Een galerij bevat afbeeldingen, geen aankoopbare entiteiten.
• Gebruik aparte figuren wanneer de afbeeldingen verschillende secties ondersteunen en geen betekenisvolle volgorde delen.

Waar plaatsen

Plaats de galerij direct na de alinea die de vraag stelt die de set zal beantwoorden. Een productconditie-galerij volgt op de conditieclaim; een casestudy-reeks volgt op de interventie; een locatiegalerij volgt op aankomstinformatie.

Houd de galerijtitel, optionele inleiding, alle items, bijschriften, credits en bedieningselementen in één semantische container. Plaats geen proza, advertentie, call-to-action of pagina-einde tussen items. Laat de galerij volgen door de interpretatie of volgende beslissing wanneer de bijschriften dit niet volledig dragen.

Een galerij mag niet direct naast een andere galerij, video, grote tabel, grafiek op volledige breedte, afbeeldingskader of niet-gerelateerde call-to-action staan. Voeg verklarende proza toe tussen dichte visuele eenheden of combineer echte gelijkwaardige elementen.

Plaats geen galerij in een stap, lijstitem, kader, tabelcel, accordeon, aanklikbare kaart of een andere galerij. Splits nooit een claim van de bron of een waarschuwing van de actie die deze beperkt. Reserveer het eerste viewport voor het directe antwoord, tenzij de afbeeldingen het antwoord zijn.

Anatomie

De anatomie is semantisch. Rasterkolommen, miniatuurafmetingen, schaduwen, hoekrondingen en animatie behoren tot de renderer in plaats van het contentmodel.

1. Galerijcontainer: Groepeert de titel, beschrijving, items en bedieningselementen onder één toegankelijke naam.
2. Galerijtitel: Geeft het gedeelde onderwerp of de vraag weer in 3–10 woorden.
3. Inleiding: Legt optioneel de volgorde of inspectietaak uit in één zin.
4. Geordend item: Behoudt een stabiele bronvolgorde ongeacht de desktoplay-out.
5. Afbeelding: Gebruikt een bestaand, rechtenvrij asset met intrinsieke breedte en hoogte.
6. Alternatieve tekst: Beschrijft het doel van die afbeelding in de set in plaats van het bijschrift te kopiëren.
7. Bijschrift: Identificeert de weergave en legt de specifieke bijdrage uit.
8. Credit: Vermeldt maker, bron of licentie-informatie wanneer vereist.
9. Bedieningselementen: Voor een interactieve galerij ondersteunen zichtbare knoppen aanwijzer-, toetsenbord-, schakel- en aanraakinvoer.
10. Positie-indicator: Kondigt “2 van 5” aan in tekst wanneer sommige items niet zichtbaar zijn.
11. Mobiele volgorde: Komt overeen met DOM-volgorde, nummering, toetsenbordvolgorde en het beoogde verhaal.

Designvoorbeelden

Kies de minst interactieve variant die de relatie behoudt. Elke variant houdt volledige bijschriften beschikbaar in tekst en gebruikt dezelfde bronvolgorde bij elk breekpunt.

Redactioneel raster

Gebruik een raster voor 2–6 gelijkwaardig gewogen afbeeldingen die samen kunnen verschijnen. Desktop mag twee of drie kolommen gebruiken. Mobiel valt terug naar één kolom; het krimpt nooit drie afbeeldingen tot onleesbare miniaturen.

Sequentiële strip

Gebruik een strip voor 3–8 afbeeldingen met een expliciete chronologische of ruimtelijke progressie. Op smalle schermen kan het een horizontaal scrollbaar gebied worden, alleen wanneer er zichtbare bedieningselementen, een positie-indicator, toetsenbordbediening en een gestapelde fallback zonder JavaScript zijn. Maak vegen nooit de enige navigatiemethode.

Vergelijkingspaar

Gebruik precies twee afbeeldingen voor voor-en-na, origineel-en-aangepast, of twee gezichtspunten die samen moeten worden beoordeeld. Gebruik blijvende tekstlabels, niet alleen kleur of positie. Mobiel stapelt item 1 vóór item 2 en herhaalt de labels naast de afbeeldingen.

Primaire afbeelding met detailweergaven

Gebruik dit voor 3–12 product- of artefactweergaven wanneer één overzicht de set verankert en de overige afbeeldingen verschillende inspectievragen beantwoorden. Het selecteren van een miniatuur moet de alt-tekst, het bijschrift, de positie en de aangekondigde toestand van de primaire afbeelding bijwerken. Elke afbeelding blijft bereikbaar zonder JavaScript.

Mobiel gestapelde standaard

Gebruik de gestapelde lijst wanneer interactiviteit het begrip niet wezenlijk verbetert. Het is de standaard voor redactionele content omdat alle items en bijschriften zichtbaar, linkbaar, afdrukbaar en leesbaar blijven zonder gebaren.

Parameters

Het contract slaat redactionele betekenis en asset-metadata op. Lay-outtokens, kolombreedtes, tussenruimtes, bedieningspictogrammen, overgangsduur en breekpunten behoren tot de renderer.

Bijschriften zijn vereist voor bewijs, betekenisveranderende volgorde, vergelijkingslabels en zichtbare rechteninformatie. Een producthoek mag er slechts één weglaten wanneer de alt-tekst en context de weergave onderscheiden. mobile=scroll is alleen geldig voor strip of primary-details met de vereiste bedieningselementen.

Syntax en codevoorbeelden

Alle toewijzingen behouden dezelfde titel, volgorde, itemvelden en fallback. Productie moet voorbeeldpaden afwijzen totdat de bestanden bestaan.

Draagbare Markdown-richtlijn

:::image-gallery{layout=grid mobile=stack orderedBy=viewpoint}
## Drie weergaven die de productconditie vaststellen

:::gallery-item{src="/cdn-assets/examples/connector-overview.webp" alt="Complete zwarte industriële connector op een neutraal oppervlak, georiënteerd met de vergrendelingslip naar boven" width=1600 height=1200}
**1. Overzicht.** De complete connector toont vorm, schaal en oriëntatie.
:::

:::gallery-item{src="/cdn-assets/examples/connector-lock.webp" alt="Close-up van de connector met een intacte verhoogde vergrendelingslip zonder zichtbare barst" width=1600 height=1200}
**2. Vergrendelingslip.** De close-up bevestigt dat de borgclip intact is.
:::
:::

De eerste kop wordt title; elke itembody wordt het bijschrift. De bronvolgorde is canoniek, dus masonry mag items niet herordenen om gaten op te vullen.

Hugo shortcode-toewijzing

{{< image-gallery layout="grid" mobile="stack" orderedBy="viewpoint" >}}
## Drie weergaven die de productconditie vaststellen

{{< gallery-item src="/cdn-assets/examples/connector-overview.webp" alt="Complete zwarte industriële connector op een neutraal oppervlak, georiënteerd met de vergrendelingslip naar boven" width="1600" height="1200" >}}
**1. Overzicht.** De complete connector toont vorm, schaal en oriëntatie.
{{< /gallery-item >}}

{{< gallery-item src="/cdn-assets/examples/connector-lock.webp" alt="Close-up van de connector met een intacte verhoogde vergrendelingslip zonder zichtbare barst" width="1600" height="1200" >}}
**2. Vergrendelingslip.** De close-up bevestigt dat de borgclip intact is.
{{< /gallery-item >}}
{{< /image-gallery >}}

Deze adapter-specificatie is geen geregistreerde shortcode. Gebruik tot goedkeuring semantische figuren in bronvolgorde en verwijs niet naar ontbrekende assets.

WordPress-blok

<!-- wp:amicited/image-gallery {"layout":"grid","mobile":"stack","orderedBy":"viewpoint"} -->
<section aria-labelledby="condition-gallery">
  <h2 id="condition-gallery">Drie weergaven die de productconditie vaststellen</h2>
  <ol>
    <li><figure><img src="connector-overview.webp" width="1600" height="1200" alt="Complete zwarte industriële connector op een neutraal oppervlak, georiënteerd met de vergrendelingslip naar boven"><figcaption><strong>Overzicht.</strong> De complete connector toont vorm, schaal en oriëntatie.</figcaption></figure></li>
    <li><figure><img src="connector-lock.webp" width="1600" height="1200" alt="Close-up van de connector met een intacte verhoogde vergrendelingslip zonder zichtbare barst"><figcaption><strong>Vergrendelingslip.</strong> De close-up bevestigt dat de borgclip intact is.</figcaption></figure></li>
  </ol>
</section>
<!-- /wp:amicited/image-gallery -->

Een WordPress-implementatie mag een native Gallery-blok alleen gebruiken als het per-item alt-tekst, bijschriften, intrinsieke afmetingen, bronvolgorde en de toegankelijke groepsnaam behoudt. Het stylen van een reeks achtergrondafbeeldingen voldoet niet aan het contract.

Voorbeelden

Goed: elke weergave lost een andere onzekerheid op

Conditie gebruikte apparatuur — inspectievolgorde

1. Volledige eenheid: Stelt identiteit vast en toont dat de behuizing compleet is.
2. Typeplaatje: Bevestigt het exacte model en de nominale spanning in leesbare scherpte.
3. Voedingsconnector: Toont rechte pinnen en een intacte vergrendelingslip.
4. Slijtageoppervlak: Toont de diepste zichtbare kras naast een liniaal voor schaal.

Dit volgt de inspectielogica van de koper. Elk bijschrift is verifieerbaar, de liniaal voorkomt dat een close-up schade overdrijft en de mobiele stapel behoudt de volgorde.

Slecht: een carrousel gebruikt als asset-dump

Ons laatste evenement Twaalf bijna identieke podiumfoto’s, geen bijschriften, elke vier seconden automatisch doorschuivend. Navigatie verschijnt alleen bij hover. De mobiele versie toont een gecentreerde uitsnede en accepteert alleen veeggebaren.

Noch het lidmaatschap noch de volgorde heeft een reden. Twaalf bestandsnamen zeggen niets tegen een schermlezer; automatisch doorschuiven voorkomt inspectie; hover-only bedieningselementen sluiten toetsenbord- en aanraakgebruikers uit; alleen-vegen navigatie verbergt toegang; en de uitsnede kan het onderwerp verwijderen. Selecteer de weinige frames die een gedefinieerd verhaal vertellen, schrijf duidelijke alternatieven en bijschriften, stop automatische beweging en gebruik standaard een mobiele stapel.

Schema-markup en toegankelijkheid

Een galerij krijgt niet automatisch een speciale zoekbehandeling. Markeer alleen relaties die de zichtbare pagina en assets ondersteunen. Betekenisvolle afbeeldingen kunnen worden toegewezen aan ImageObject met stabiele contentUrl, bijschrift, maker- of credittekst, licentie-informatie en representatieve status wanneer die feiten bekend zijn. Een expliciet geordende galerij kan worden toegewezen aan ItemList, met position-waarden die overeenkomen met de bronvolgorde. Productweergaven kunnen de eigenschap Product.image van de ouder vullen. Maak geen entiteiten voor decoratieve afbeeldingen, verzin geen licenties en beweer niet dat elke afbeelding representatief is.

Gebruik native <img>-elementen in <figure>-elementen met zichtbare <figcaption> waar vereist. Noem de sectie via de kop. Behoud geordende relaties met <ol> of gelijkwaardige positiesemantiek; visuele plaatsing vervangt nooit de DOM-volgorde.

Alternatieve tekst beschrijft het doel van elke afbeelding in deze set. Het moet niet beginnen met “afbeelding van”, het bijschrift letterlijk herhalen of details beschrijven die niet relevant zijn voor de beslissing. Twee foto’s van hetzelfde object hebben verschillende alt-tekst nodig omdat elk een ander doel heeft. Gebruik alt="" alleen wanneer een afbeelding werkelijk overbodig is en het verwijderen ervan geen bewijs zou wegnemen.

Interactieve varianten hebben benoemde vorige en volgende knoppen nodig, toetsenbordactivering, een tekstpositie-indicator en een statusaankondiging na wijzigingen. Automatisch doorschuiven is verboden. Houd focus op het geactiveerde bedieningselement en behoud content zonder JavaScript, bij 200% zoom en met verminderde beweging.

Schrijfregels

Elke galerij beantwoordt één gedeelde vraag. Geef aan waarom deze bestaat, orden dan op verhaal, chronologie, prioriteit, gezichtspunt of vergelijking — nooit op uploadvolgorde.

• Gebruik 2–8 items voor een normale galerij; gebruik precies 2 voor een vergelijking en 3–12 voor een primaire product-/detailset.
• Schrijf titels in 3–10 woorden en optionele inleidingen in één zin van 8–30 woorden.
• Houd bijschriften op 5–30 woorden. Begin met de weergave, toestand of het itemlabel wanneer dat het scannen verbetert, leg daarna de bijdrage uit.
• Gebruik een parallelle bijschriftstructuur in de set. Als de eerste begint met een toestandslabel, moeten de anderen dat ook doen.
• Houd alternatieve tekst gericht op wat een niet-visuele lezer van dat specifieke frame nodig heeft; streef naar 40–180 tekens en overschrijd nooit 250.
• Hanteer een feitelijke, observerende toon. Zeg “de afdichting zit gelijk” in plaats van “de geweldige afdichting ziet er perfect uit.”
• Vermeld tijd, schaal, uitsnede, toestand en bron wanneer deze de interpretatie beperken.
• Gebruik dezelfde vergelijkingsomstandigheden wanneer uiterlijk bewijs is: gelijkwaardige uitsnede, hoek, schaal, belichting en kleurbehandeling.

Plaats nooit een kop, alinea, tabel, instructielijst, call-to-action, formulier, prijs, beoordeling, getuigenis, uitklapbare openbaarmaking, video, audiospeler of productkaart in een itembijschrift. Verwerk nooit bijschriften in pixels, maak kleur het enige label, verberg materiaalgebreken door uitsnede, stel klantgegevens bloot of publiceer een afbeelding zonder bevestigde gebruiksrechten.

Posttypes die het gebruiken

De onderstaande rijen weerspiegelen de postTypes frontmatter. Opname betekent dat het posttype een galerij kan gebruiken wanneer de afbeeldingen een echte set vormen; het maakt het element niet verplicht op elke pagina.

QA-checklist

• De titel geeft één gedeelde vraag of onderwerp, en elke afbeelding draagt een afzonderlijk antwoord bij.
• Het aantal items komt overeen met de geselecteerde variant en bevat geen overbodig frame.
• orderedBy registreert een verdedigbaar verhaal, chronologie, prioriteit, gezichtspunt of vergelijkingsvolgorde.
• Bron-, visuele, toetsenbord-, schermlezer-, nummerings- en mobiele volgordes komen allemaal overeen.
• Elke src verwijst naar een bestaande, rechtenvrije stilstaande afbeelding vóór publicatie.
• Elke afbeelding heeft intrinsieke breedte en hoogte, een bewuste alt-waarde en een betekenisvolle uitsnede.
• Bewijs, vergelijkingen en geordende items hebben beknopte zichtbare bijschriften met parallelle structuur.
• Credits en licentielinks zijn zichtbaar en nauwkeurig waar vereist.
• Vergelijkingsafbeeldingen gebruiken gelijkwaardige schaal, hoek, uitsnede, belichting en labels, tenzij een verschil is aangegeven.
• Mobiel gebruikt een leesbare gestapelde fallback of volledige toegankelijke bedieningselementen; vegen is nooit de enige invoermethode.
• Interactieve varianten hebben zichtbare vorige en volgende knoppen, een tekstpositie-indicator, toetsenbordondersteuning en geen automatisch doorschuiven.
• De galerij werkt zonder JavaScript en bij 200% zoom, respecteert verminderde beweging en creëert geen horizontale pagina-overflow.
• De eerste belangrijke afbeelding wordt niet uitgesteld, latere laadtoestanden worden aangekondigd en gereserveerde ruimte voorkomt lay-outverschuiving.
• Geen essentiële instructie, nummer, waarschuwing, label of conclusie bestaat alleen in pixels.
• De galerij bevat geen video, productkaart, formulier, prijs, beoordeling, getuigenis of call-to-action.
• Gestructureerde gegevens komen overeen met zichtbare volgorde, bijschriften, rechten en entiteitsrelaties zonder decoratie als content te behandelen.
• Draagbare Markdown-, Hugo- en WordPress-toewijzingen behouden dezelfde velden, itemvolgorde en betekenis.

FAQ

De academiesjabloon geeft de vijf beoordeelde vragen weer die zijn opgeslagen in de [[faq]] frontmatter van deze pagina. Ze behandelen het aantal items, mobiele carrousels, alternatieve tekst en bijschriften, verboden gemengde content en gestructureerde gegevens.

Succes betekent dat een lezer de relatie tussen de afbeeldingen en de bijdrage van elk item kan uitleggen. Zonder betekenisvolle volgorde, duidelijke bijschriften en een toegankelijk mobiel pad is de set een assetlijst in plaats van een galerij.