Bildergalerie: Reihenfolge, Bildunterschriften und mobile Regeln

Eine Bildergalerie fasst mehrere zusammengehörige Standbilder in einer geordneten redaktionellen Einheit zusammen. Die Reihenfolge ist bedeutungstragend: Der Leser sollte verstehen, warum diese Bilder zusammengehören, was jedes einzelne beiträgt und ob der Übergang von Element 1 zu Element 2 Zeit, Priorität, Perspektive oder eine einfache Durchlaufreihenfolge darstellt.

Dieses Beispiel verwendet ein redaktionelles Raster, weil alle drei Ansichten gleich wichtig sind und passen, ohne ein Element zu verstecken. Die Reihenfolge bewegt sich von der Identifikation zu zwei Zustandsprüfungen. Die Bildunterschriften geben an, was jede Ansicht belegt; sie wiederholen nicht lediglich „Steckerbild".

Warum dieses Element wichtig ist

Menschen betrachten eine geordnete Sammlung anders als einen Haufen. Eine sichtbare Abgrenzung und eine durchdachte Reihenfolge vermitteln dem Leser, dass die Bilder gemeinsam eine größere Frage beantworten. Die Übersicht schafft Orientierung, dann reduzieren die Detailaufnahmen die Unsicherheit. Dieser Fortschritt verhindert, dass der Leser nicht zusammenhängende Bilder öffnen, sich deren Positionen merken und die Beziehung selbst konstruieren muss.

Die Reihenfolge steuert Erwartungen. Eine chronologische Abfolge verspricht Veränderung; eine Produktabfolge verspricht Übersicht, Maßstab, Merkmale, Varianten und Zustand. Die Dateinamen- oder Upload-Reihenfolge kann wichtige Belege nebensächlich erscheinen lassen oder eine Erzählung suggerieren, die nicht existiert.

Maschinelle Extraktierbarkeit ist die Fähigkeit von Software, die Galerie zu isolieren, ohne die Beziehung zwischen ihren Bildern zu verlieren. Eine Maschine kann einzelne Bilddateien identifizieren, aber nicht sicher ableiten, ob es sich um Alternativen, Schritte, Belege oder Dekoration handelt. Ein Galerietitel, eine deklarierte Ordnungslogik, stabile Elementpositionen, individueller Alt-Text und sichtbare Bildunterschriften liefern diese Beziehung in Textform. Dieselben Felder können die Suchindexierung, Inhaltsinventare, Barrierefreiheitsprüfungen und strukturierte Daten versorgen, ohne auf Computer Vision angewiesen zu sein.

Die gemeinsamen Element-Schreibregeln regeln die Priorität typisierter Elemente, portable Direktiven und das Body-Mapping. Diese Seite hat Vorrang für bildergaleriespezifische Elementlimits, Reihenfolge, Bildunterschriften und mobiles Verhalten. Ahmen Sie keine Galerie mit losen Bildern oder einem generischen Slider nach, wenn der Zweck dieses Elements zutrifft.

Wann es zu verwenden ist

Verwenden Sie eine Bildergalerie, wenn zwei oder mehr Bilder gleichrangig sind und gemeinsam eine Frage besser beantworten als einzeln. Jedes Bild muss eine eigene Ansicht, einen eigenen Zustand, ein eigenes Stadium, Detail oder Beispiel hinzufügen. Starke Anwendungsfälle sind Produktansichten, Vorher-Nachher-Belege, eine kurze Prozesssequenz, Standortorientierung, ein Design-Portfolio oder mehrere Details, die ein Bewertungsurteil stützen.

Wenden Sie den Entfernungstest auf jedes Element an. Wenn das Entfernen eines Bildes nichts ändert, was der Leser entscheiden, überprüfen oder verstehen kann, entfernen Sie es aus der Sammlung. Eine Galerie ist keine Ablagefläche für jedes verfügbare Asset.

Beinahe-Treffer benötigen andere Elemente:

• Verwenden Sie eine einzelne Figur oder Imagebox, wenn ein Bild die Aussage trägt und der Fließtext sie interpretiert.
• Verwenden Sie einen kommentierten Screenshot , wenn Leser mehrere Bedienelemente innerhalb eines Interface-Bildes lokalisieren müssen. Teilen Sie keinen Bildschirm in eine Galerie unerklärter Ausschnitte auf.
• Verwenden Sie eine Vergleichstabelle, wenn der Leser wiederkehrende Attribute über viele Optionen vergleichen muss. Bilder können die Entscheidung unterstützen, aber sie können textliche Kriterien nicht ersetzen.
• Verwenden Sie eine Schrittliste, wenn Handlungen der primäre Inhalt sind. Eine Galerie kann resultierende Zustände zeigen, aber sie darf erforderliche Anweisungen nicht in Bildunterschriften verwandeln.
• Verwenden Sie einen Produkt-Slider, wenn jede Karte Preis, Verfügbarkeit, Bewertung und eine Aktion enthält. Eine Galerie enthält Bilder, keine kaufbaren Einheiten.
• Verwenden Sie separate Figuren, wenn die Bilder verschiedene Abschnitte unterstützen und keine sinnvolle Reihenfolge teilen.

Wo es zu platzieren ist

Platzieren Sie die Galerie unmittelbar nach dem Absatz, der die Frage formuliert, die die Sammlung beantworten wird. Eine Produktzustandsgalerie folgt der Zustandsbehauptung; eine Fallstudien-Sequenz folgt der Intervention; eine Standortgalerie folgt den Ankunftsinformationen.

Halten Sie den Galerietitel, eine optionale Einleitung, alle Elemente, Bildunterschriften, Quellenangaben und Bedienelemente in einem semantischen Container. Fügen Sie zwischen den Elementen keinen Fließtext, keine Werbung, keinen Aufruf zum Handeln und keinen Seitenumbruch ein. Lassen Sie auf die Galerie die Interpretation oder die nächste Entscheidung folgen, wenn die Bildunterschriften dies nicht vollständig leisten.

Eine Galerie darf nicht direkt neben einer anderen Galerie, einem Video, einer großen Tabelle, einem vollbreiten Diagramm, einer Imagebox oder einem nicht zusammenhängenden Aufruf zum Handeln stehen. Fügen Sie erklärenden Fließtext zwischen dichten visuellen Einheiten ein oder kombinieren Sie echte gleichrangige Elemente.

Setzen Sie keine Galerie in einen Schritt, ein Listenelement, einen Callout, eine Tabellenzelle, ein Akkordeon, eine anklickbare Karte oder eine andere Galerie. Trennen Sie niemals eine Behauptung von ihrer Quelle oder eine Warnung von der Handlung, die sie einschränkt. Reservieren Sie den ersten Viewport für die direkte Antwort, es sei denn, die Bilder sind die Antwort.

Anatomie

Die Anatomie ist semantisch. Rasterspalten, Thumbnail-Größen, Schatten, Eckenradien und Animationen gehören zum Renderer und nicht zum Inhaltsmodell.

1. Galerie-Container: Fasst Titel, Beschreibung, Elemente und Bedienelemente unter einem barrierefreien Namen zusammen.
2. Galerietitel: Gibt das gemeinsame Thema oder die Frage in 3–10 Wörtern an.
3. Einleitung: Erklärt optional die Reihenfolge oder die Prüfaufgabe in einem Satz.
4. Geordnetes Element: Bewahrt die stabile Quellreihenfolge unabhängig vom Desktop-Layout.
5. Bild: Verwendet ein bestehendes, rechtegeklärtes Asset mit intrinsischer Breite und Höhe.
6. Alternativtext: Beschreibt den Zweck dieses Bildes in der Sammlung, anstatt seine Bildunterschrift zu kopieren.
7. Bildunterschrift: Identifiziert die Ansicht und erklärt ihren spezifischen Beitrag.
8. Quellenangabe: Liefert Informationen zu Ersteller, Quelle oder Lizenz, falls erforderlich.
9. Bedienelemente: Bei einer interaktiven Galerie unterstützen sichtbare Schaltflächen Zeiger, Tastatur, Schalter und Touch-Eingabe.
10. Positionsanzeiger: Gibt „2 von 5" in Textform aus, wenn einige Elemente nicht sichtbar sind.
11. Mobile Reihenfolge: Entspricht der DOM-Reihenfolge, Nummerierung, Tastatur-Reihenfolge und der beabsichtigten Erzählung.

Gestaltungsbeispiele

Wählen Sie die am wenigsten interaktive Variante, die die Beziehung bewahrt. Jede Variante hält vollständige Bildunterschriften im Text verfügbar und verwendet bei jedem Breakpoint dieselbe Quellreihenfolge.

Redaktionelles Raster

Verwenden Sie ein Raster für 2–6 gleich gewichtete Bilder, die zusammen erscheinen können. Der Desktop kann zwei oder drei Spalten verwenden. Mobilgeräte reduzieren auf eine Spalte; sie verkleinern niemals drei Bilder zu unlesbaren Thumbnails.

Sequenzieller Streifen

Verwenden Sie einen Streifen für 3–8 Bilder mit einer expliziten chronologischen oder räumlichen Abfolge. Auf schmalen Bildschirmen kann dies zu einem horizontal scrollbaren Bereich werden, nur wenn sichtbare Bedienelemente, ein Positionsanzeiger, Tastaturbedienung und ein gestapelter Nicht-JavaScript-Fallback vorhanden sind. Machen Sie Wischen niemals zum einzigen Navigationsmittel.

Vergleichspaar

Verwenden Sie genau zwei Bilder für Vorher-Nachher, Original-und-Überarbeitet oder zwei Perspektiven, die zusammen beurteilt werden müssen. Verwenden Sie dauerhafte Textbeschriftungen, nicht nur Farbe oder Position. Mobilgeräte stapeln Element 1 vor Element 2 und wiederholen die Beschriftungen neben den Bildern.

Primärbild mit Detailansichten

Verwenden Sie dies für 3–12 Produkt- oder Objektansichten, wenn eine Übersicht die Sammlung verankert und die übrigen Bilder unterschiedliche Prüffragen beantworten. Die Auswahl eines Thumbnails muss den Alt-Text, die Bildunterschrift, die Position und den angekündigten Zustand des Primärbildes aktualisieren. Jedes Bild bleibt ohne JavaScript erreichbar.

Gestapelter mobiler Standard

Verwenden Sie die gestapelte Liste immer dann, wenn Interaktivität das Verständnis nicht wesentlich verbessern würde. Sie ist der Standard für redaktionelle Inhalte, da alle Elemente und Bildunterschriften sichtbar, verlinkbar, druckbar und ohne Gesten lesbar bleiben.

Parameter

Der Vertrag speichert redaktionelle Bedeutung und Asset-Metadaten. Layout-Token, Spaltenbreiten, Abstände, Steuersymbole, Übergangsdauer und Breakpoints gehören zum Renderer.

Bildunterschriften sind erforderlich für Belege, bedeutungsändernde Reihenfolge, Vergleichsbeschriftungen und sichtbare Rechteinformationen. Ein Produktwinkel kann nur dann darauf verzichten, wenn sein Alt-Text und Kontext die Ansicht unterscheiden. mobile=scroll ist nur gültig für strip oder primary-details mit den erforderlichen Bedienelementen.

Syntax und Codebeispiele

Alle Zuordnungen bewahren denselben Titel, dieselbe Reihenfolge, dieselben Elementfelder und denselben Fallback. Die Produktion muss Beispielpfade ablehnen, bis die Dateien existieren.

Portable Markdown-Direktive

:::image-gallery{layout=grid mobile=stack orderedBy=viewpoint}
## Three views that establish product condition

:::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. Overview.** The complete connector establishes shape, scale, and orientation.
:::

:::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. Locking tab.** The close view confirms that the retention clip is intact.
:::
:::

Die erste Überschrift wird zu title; jeder Element-Body wird zu seiner Bildunterschrift. Die Quellreihenfolge ist kanonisch, daher darf Masonry die Elemente nicht neu anordnen, um Lücken zu füllen.

Hugo-Shortcode-Zuordnung

{{< image-gallery layout="grid" mobile="stack" orderedBy="viewpoint" >}}
## Three views that establish product condition

{{< 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. Overview.** The complete connector establishes shape, scale, and orientation.
{{< /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. Locking tab.** The close view confirms that the retention clip is intact.
{{< /gallery-item >}}
{{< /image-gallery >}}

Diese Adapter-Spezifikation ist kein registrierter Shortcode. Verwenden Sie bis zur Genehmigung semantische Figuren in Quellreihenfolge und referenzieren Sie keine fehlenden Assets.

WordPress-Block

<!-- wp:amicited/image-gallery {"layout":"grid","mobile":"stack","orderedBy":"viewpoint"} -->
<section aria-labelledby="condition-gallery">
  <h2 id="condition-gallery">Three views that establish product condition</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>Overview.</strong> The complete connector establishes shape, scale, and orientation.</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>Locking tab.</strong> The close view confirms that the retention clip is intact.</figcaption></figure></li>
  </ol>
</section>
<!-- /wp:amicited/image-gallery -->

Eine WordPress-Implementierung darf einen nativen Gallery-Block nur verwenden, wenn er pro Element Alt-Text, Bildunterschriften, intrinsische Abmessungen, Quellreihenfolge und den barrierefreien Gruppennamen bewahrt. Das Stylen einer Abfolge von Hintergrundbildern erfüllt den Vertrag nicht.

Beispiele

Gut: Jede Ansicht löst eine andere Unsicherheit auf

Zustand gebrauchter Ausrüstung — Prüfreihenfolge

1. Gesamtgerät: Stellt die Identität fest und zeigt, dass das Gehäuse vollständig ist.
2. Typenschild: Bestätigt das genaue Modell und die Nennspannung in lesbarer Schärfe.
3. Stromanschluss: Zeigt gerade Stifte und eine intakte Verriegelungslasche.
4. Verschleißfläche: Zeigt den tiefsten sichtbaren Kratzer neben einem Lineal zur Maßstabsangabe.

Dies folgt der Prüflogik des Käufers. Jede Bildunterschrift ist überprüfbar, das Lineal verhindert, dass eine Nahaufnahme den Schaden übertreibt, und der mobile Stapel bewahrt die Reihenfolge.

Schlecht: Ein Karussell als Asset-Depot

Unser letztes Event Zwölf nahezu identische Bühnenfotos, keine Bildunterschriften, automatischer Wechsel alle vier Sekunden. Navigation erscheint nur bei Hover. Die mobile Version zeigt einen beschnittenen Mittelausschnitt und akzeptiert nur Wischgesten.

Weder Zugehörigkeit noch Reihenfolge haben einen Grund. Zwölf Dateinamen vermitteln einem Screenreader nichts; automatischer Wechsel verhindert die Betrachtung; Nur-Hover-Steuerung schließt Tastatur- und Touch-Nutzer aus; Nur-Wischen-Navigation versteckt den Zugang; und der Beschnitt kann das Motiv entfernen. Wählen Sie die wenigen Aufnahmen aus, die eine definierte Geschichte erzählen, schreiben Sie unterschiedliche Alternativtexte und Bildunterschriften, stoppen Sie die automatische Bewegung und verwenden Sie standardmäßig einen mobilen Stapel.

Schema-Markup und Barrierefreiheit

Eine Galerie erhält nicht automatisch eine besondere Suchbehandlung. Markieren Sie nur Beziehungen, die die sichtbare Seite und die Assets unterstützen. Aussagekräftige Bilder können auf ImageObject mit stabiler contentUrl, Bildunterschrift, Ersteller- oder Quellenangabe, Lizenzinformationen und repräsentativem Status abgebildet werden, wenn diese Fakten bekannt sind. Eine explizit geordnete Galerie kann auf ItemList abgebildet werden, wobei position-Werte der Quellreihenfolge entsprechen. Produktansichten können die Eigenschaft Product.image des übergeordneten Elements befüllen. Erstellen Sie keine Entitäten für dekorative Bilder, erfinden Sie keine Lizenzen und behaupten Sie nicht, dass jedes Bild repräsentativ ist.

Verwenden Sie native <img>-Elemente innerhalb von <figure>-Elementen mit sichtbarem <figcaption>, wo erforderlich. Benennen Sie den Abschnitt durch seine Überschrift. Bewahren Sie geordnete Beziehungen mit <ol> oder gleichwertiger Positionssemantik; die visuelle Platzierung überschreibt niemals die DOM-Reihenfolge.

Alternativtext beschreibt den Zweck jedes Bildes in dieser Sammlung. Er sollte nicht mit „Bild von" beginnen, die Bildunterschrift wörtlich wiederholen oder Details beschreiben, die für die Entscheidung irrelevant sind. Zwei Fotografien desselben Objekts benötigen unterschiedlichen Alt-Text, da jedes einen anderen Zweck hat. Verwenden Sie alt="" nur, wenn ein Bild wirklich redundant ist und seine Entfernung keinen Beleg entfernen würde.

Interaktive Varianten benötigen benannte Vor- und Zurück-Schaltflächen, Tastaturaktivierung, einen textbasierten Positionsanzeiger und eine Statusmeldung nach Änderungen. Automatischer Wechsel ist untersagt. Halten Sie den Fokus auf dem aktivierten Bedienelement und bewahren Sie den Inhalt ohne JavaScript, bei 200 % Zoom und mit reduzierter Bewegung.

Schreibregeln

Jede Galerie beantwortet eine gemeinsame Frage. Geben Sie an, warum sie existiert, und ordnen Sie sie dann nach Erzählung, Chronologie, Priorität, Perspektive oder Vergleich – niemals nach Upload-Reihenfolge.

• Verwenden Sie 2–8 Elemente für eine normale Galerie; genau 2 für einen Vergleich und 3–12 für ein primäres Produkt-/Detailset.
• Schreiben Sie Titel in 3–10 Wörtern und optionale Einleitungen in einem Satz von 8–30 Wörtern.
• Halten Sie Bildunterschriften auf 5–30 Wörter. Beginnen Sie mit der Ansicht, dem Zustand oder der Elementbezeichnung, wenn dies das Scannen verbessert, und erklären Sie dann den Beitrag.
• Verwenden Sie eine parallele Bildunterschriftenstruktur innerhalb der Sammlung. Wenn die erste mit einer Zustandsbezeichnung beginnt, sollten die anderen dies auch tun.
• Halten Sie den Alternativtext fokussiert auf das, was ein nicht-sehender Leser von diesem spezifischen Bild benötigt; zielen Sie auf 40–180 Zeichen und überschreiten Sie niemals 250.
• Bewahren Sie einen sachlichen, beobachtenden Ton. Sagen Sie „die Dichtung sitzt bündig" anstelle von „die erstaunliche Dichtung sieht perfekt aus."
• Geben Sie Zeit, Maßstab, Beschnitt, Zustand und Quelle an, sobald sie die Interpretation einschränken.
• Verwenden Sie dieselben Vergleichsbedingungen, wenn das Erscheinungsbild ein Beleg ist: gleicher Beschnitt, Winkel, Maßstab, Beleuchtung und Farbbehandlung.

Setzen Sie niemals eine Überschrift, einen Absatz, eine Tabelle, eine Liste mit Anweisungen, einen Aufruf zum Handeln, ein Formular, einen Preis, eine Bewertung, ein Testimonial, einen ausklappbaren Bereich, ein Video, einen Audioplayer oder eine Produktkarte in eine Element-Bildunterschrift. Brennen Sie Bildunterschriften niemals in Pixel ein, machen Sie Farbe nicht zum einzigen Label, verdecken Sie keine Materialmängel durch Beschnitt, legen Sie keine Kundendaten offen und veröffentlichen Sie kein Bild ohne bestätigte Nutzungsrechte.

Beitragstypen, die es verwenden

Die folgenden Zeilen spiegeln die postTypes-Frontmatter wider. Die Aufnahme bedeutet, dass der Beitragstyp eine Galerie verwenden kann, wenn die Bilder eine echte Sammlung bilden; sie macht das Element nicht auf jeder Seite verpflichtend.

QA-Checkliste

• Der Titel nennt eine gemeinsame Frage oder ein gemeinsames Thema, und jedes Bild liefert eine eigene Antwort.
• Die Anzahl der Elemente entspricht der gewählten Variante und enthält kein redundantes Bild.
• orderedBy dokumentiert eine vertretbare Erzähl-, Chronologie-, Prioritäts-, Perspektiven- oder Vergleichsreihenfolge.
• Quell-, visuelle, Tastatur-, Screenreader-, Nummerierungs- und mobile Reihenfolgen stimmen alle überein.
• Jeder src verweist vor der Veröffentlichung auf ein bestehendes, rechtegeklärtes Standbild.
• Jedes Bild hat intrinsische Breite und Höhe, einen absichtlichen Alt-Wert und einen sinnvollen Beschnitt.
• Belege, Vergleiche und geordnete Elemente haben präzise sichtbare Bildunterschriften mit paralleler Struktur.
• Quellenangaben und Lizenzlinks sind sichtbar und korrekt, wo erforderlich.
• Vergleichsbilder verwenden gleichen Maßstab, Winkel, Beschnitt, Beleuchtung und Beschriftungen, es sei denn, ein Unterschied wird offengelegt.
• Mobilgeräte verwenden einen lesbaren gestapelten Fallback oder vollständige barrierefreie Bedienelemente; Wischen ist niemals die einzige Eingabemöglichkeit.
• Interaktive Varianten haben sichtbare Vor- und Zurück-Schaltflächen, einen textbasierten Positionsanzeiger, Tastaturunterstützung und keinen automatischen Wechsel.
• Die Galerie funktioniert ohne JavaScript und bei 200 % Zoom, respektiert reduzierte Bewegung und erzeugt keinen horizontalen Seitenüberlauf.
• Das erste wichtige Bild wird nicht verzögert, spätere Ladezustände werden angekündigt und reservierter Platz verhindert Layout-Verschiebungen.
• Keine wesentliche Anweisung, Nummer, Warnung, Bezeichnung oder Schlussfolgerung existiert nur in Pixeln.
• Die Galerie enthält kein Video, keine Produktkarte, kein Formular, keinen Preis, keine Bewertung, kein Testimonial und keinen Aufruf zum Handeln.
• Strukturierte Daten stimmen mit sichtbarer Reihenfolge, Bildunterschriften, Rechten und Entitätsbeziehungen überein, ohne Dekoration als Inhalt zu behandeln.
• Portable Markdown-, Hugo- und WordPress-Zuordnungen bewahren dieselben Felder, Elementreihenfolge und Bedeutung.

FAQ

Die Academy-Vorlage rendert die fünf überprüften Fragen, die in der [[faq]]-Frontmatter dieser Seite gespeichert sind. Sie decken die Anzahl der Bilder, mobile Karussells, Alternativtext und Bildunterschriften, verbotene gemischte Inhalte und strukturierte Daten ab.

Erfolg bedeutet, dass ein Leser die Beziehung zwischen den Bildern und den Beitrag jedes Elements erklären kann. Ohne sinnvolle Reihenfolge, eindeutige Bildunterschriften und einen barrierefreien mobilen Pfad ist die Sammlung eine Asset-Liste und keine Galerie.