Galeria obrazów: kolejność, podpisy i zasady na urządzeniach mobilnych

Galeria obrazów grupuje wiele powiązanych nieruchomych obrazów w jedną uporządkowaną jednostkę redakcyjną. Sekwencja jest częścią znaczenia: czytelnik powinien rozumieć, dlaczego te obrazy należą do siebie, co każdy z nich wnosi i czy przejście od elementu 1 do elementu 2 reprezentuje czas, priorytet, punkt widzenia, czy zwykłą kolejność przeglądania.

Ten przykład używa siatki redakcyjnej, ponieważ wszystkie trzy widoki są równie ważne i mieszczą się bez ukrywania żadnego elementu. Kolejność przechodzi od identyfikacji do dwóch kontroli stanu. Podpisy określają, co każdy widok udowadnia; nie powtarzają po prostu „obraz złącza”.

Dlaczego ten element jest ważny

Ludzie inaczej oglądają zestaw niż stertę. Widoczna granica i przemyślana sekwencja mówią czytelnikowi, że obrazy wspólnie odpowiadają na jedno większe pytanie. Przegląd daje orientację, a następnie zdjęcia szczegółowe redukują niepewność. Taki postęp zapobiega otwieraniu przez czytelnika niepowiązanych obrazów, zapamiętywaniu ich pozycji i samodzielnemu konstruowaniu relacji.

Kolejność kontroluje oczekiwania. Zestaw chronologiczny obiecuje zmiany; zestaw produktowy obiecuje przegląd, skalę, cechy, warianty i stan. Kolejność według nazwy pliku lub daty przesłania może sprawić, że ważne dowody będą wyglądać na drugorzędne lub sugerować narrację, która nie istnieje.

Możliwość wyodrębniania maszynowego to zdolność oprogramowania do wyizolowania galerii bez utraty relacji między jej obrazami. Maszyna może zidentyfikować osobne pliki graficzne, ale nie może bezpiecznie wywnioskować, czy są one alternatywami, krokami, dowodami czy dekoracją. Tytuł galerii, zadeklarowana logika uporządkowania, stabilne pozycje elementów, indywidualne teksty alternatywne i widoczne podpisy dostarczają tej relacji w formie tekstowej. Te same pola mogą zasilać indeksowanie wyszukiwarki, inwentarze treści, kontrole dostępności i dane strukturalne bez polegania na wizji komputerowej.

Wspólne zasady pisania elementów regulują pierwszeństwo elementów typowanych, przenośne dyrektywy i mapowanie treści. Ta strona ma pierwszeństwo w zakresie limitów elementów, kolejności, podpisów i zachowania na urządzeniach mobilnych specyficznych dla galerii obrazów. Nie naśladuj galerii za pomocą luźnych obrazów lub ogólnego suwaka, gdy zastosowanie tego elementu jest właściwe.

Kiedy go używać

Użyj galerii obrazów, gdy dwa lub więcej obrazów to elementy równorzędne, które lepiej odpowiadają na jedno pytanie razem niż osobno. Każdy obraz musi dodawać odrębny widok, stan, etap, szczegół lub przykład. Mocne przypadki obejmują widoki produktów, dowody przed i po, krótką sekwencję procesu, orientację lokalizacji, portfolio projektowe lub kilka szczegółów wspierających jedną konkluzję recenzji.

Zastosuj test usunięcia do każdego elementu. Jeśli usunięcie obrazu nie zmienia niczego, co czytelnik może zdecydować, zweryfikować lub zrozumieć, usuń go z zestawu. Galeria nie jest powierzchnią magazynową dla każdego dostępnego zasobu.

Sytuacje graniczne wymagają innych elementów:

• Użyj pojedynczej figury lub imageboksa, gdy jeden obraz niesie przekaz, a proza go interpretuje.
• Użyj adnotowanego zrzutu ekranu , gdy czytelnicy muszą zlokalizować kilka kontrolek w obrębie jednego obrazu interfejsu. Nie dziel jednego ekranu na galerię niewyjaśnionych wycinków.
• Użyj tabeli porównawczej, gdy czytelnik musi porównać powtarzające się atrybuty w wielu opcjach. Obrazy mogą wspierać decyzję, ale nie mogą zastąpić kryteriów tekstowych.
• Użyj listy kroków, gdy czynności są treścią główną. Galeria może pokazywać stany wynikowe, ale nie może zamieniać wymaganych instrukcji w podpisy.
• Użyj suwaka produktów, gdy każda karta ma cenę, dostępność, ocenę i akcję. Galeria zawiera obrazy, a nie jednostki do kupienia.
• Użyj osobnych figur, gdy obrazy wspierają różne sekcje i nie łączy ich żadna znacząca sekwencja.

Gdzie go umieścić

Umieść galerię bezpośrednio po akapicie, który określa pytanie, na które zestaw odpowie. Galeria stanu produktu następuje po stwierdzeniu o stanie; sekwencja studium przypadku następuje po interwencji; galeria lokalizacji następuje po informacjach o przybyciu.

Tytuł galerii, opcjonalny wstęp, wszystkie elementy, podpisy, informacje o autorstwie i kontrolki trzymaj w jednym semantycznym kontenerze. Nie wstawiaj prozy, reklamy, wezwania do działania ani podziału strony między elementy. Po galerii umieść interpretację lub kolejną decyzję, jeśli podpisy nie niosą jej w pełni.

Galeria nie może znajdować się bezpośrednio obok innej galerii, filmu, dużej tabeli, wykresu pełnoszerokiego, imageboksa ani niepowiązanego wezwania do działania. Dodaj wyjaśniającą prozę między gęstymi jednostkami wizualnymi lub połącz autentycznie równorzędne elementy.

Nie umieszczaj galerii wewnątrz kroku, elementu listy, wyróżnienia, komórki tabeli, akordeonu, klikalnej karty ani innej galerii. Nigdy nie oddzielaj twierdzenia od jego źródła ani ostrzeżenia od czynności, którą ogranicza. Zarezerwuj pierwszy obszar widoczny na ekranie dla bezpośredniej odpowiedzi, chyba że obrazy same są odpowiedzią.

Anatomia

Anatomia ma charakter semantyczny. Kolumny siatki, rozmiary miniatur, cienie, zaokrąglenia rogów i animacje należą do mechanizmu renderującego, a nie do modelu treści.

1. Kontener galerii: Grupuje tytuł, opis, elementy i kontrolki pod jedną dostępną nazwą.
2. Tytuł galerii: Określa wspólny temat lub pytanie w 3–10 słowach.
3. Wstęp: Opcjonalnie wyjaśnia sekwencję lub zadanie inspekcji w jednym zdaniu.
4. Uporządkowany element: Zachowuje stabilną kolejność źródłową niezależnie od układu na komputerze.
5. Obraz: Wykorzystuje istniejący, oczyszczony prawami zasób o określonej szerokości i wysokości.
6. Tekst alternatywny: Opisuje cel tego obrazu w zestawie, a nie kopiuje jego podpisu.
7. Podpis: Identyfikuje widok i wyjaśnia jego odrębny wkład.
8. Informacja o autorstwie: Podaje twórcę, źródło lub informacje o licencji, gdy jest to wymagane.
9. Kontrolki: W przypadku galerii interaktywnej widoczne przyciski obsługują wskaźnik, klawiaturę, przełączniki i dotyk.
10. Wskaźnik pozycji: Informuje „2 z 5" w tekście, gdy niektóre elementy są ukryte przed wzrokiem.
11. Kolejność mobilna: Zgodna z kolejnością DOM, numeracją, kolejnością klawiaturową i zamierzoną narracją.

Przykłady projektowe

Wybierz najmniej interaktywny wariant, który zachowuje relację. Każdy wariant utrzymuje pełne podpisy dostępne w tekście i używa tej samej kolejności źródłowej na każdym punkcie przełamania.

Siatka redakcyjna

Użyj siatki dla 2–6 obrazów o równej wadze, które mogą być wyświetlane razem. Na komputerze może mieć dwie lub trzy kolumny. Na urządzeniach mobilnych zwija się do jednej kolumny; nigdy nie zmniejsza trzech obrazów do nieczytelnych miniatur.

Pasek sekwencyjny

Użyj paska dla 3–8 obrazów z wyraźną progresją chronologiczną lub przestrzenną. Na wąskich ekranach może stać się poziomym obszarem przewijanym tylko wtedy, gdy istnieją widoczne kontrolki, wskaźnik pozycji, obsługa klawiatury i ułożony w stos rezerwowy wariant bez JavaScriptu. Nigdy nie sprawiaj, by przesunięcie było jedynym sposobem nawigacji.

Para porównawcza

Użyj dokładnie dwóch obrazów do porównania przed i po, oryginału i wersji poprawionej lub dwóch punktów widzenia, które muszą być oceniane razem. Używaj trwałych etykiet tekstowych, a nie samego koloru lub pozycji. Na urządzeniach mobilnych element 1 znajduje się przed elementem 2, a etykiety powtarzają się obok obrazów.

Obraz główny z widokami szczegółowymi

Użyj tego dla 3–12 widoków produktu lub artefaktu, gdy jeden przegląd stanowi kotwicę zestawu, a pozostałe obrazy odpowiadają na odrębne pytania inspekcyjne. Wybór miniatury musi aktualizować tekst alternatywny obrazu głównego, podpis, pozycję i ogłoszony stan. Każdy obraz pozostaje osiągalny bez JavaScriptu.

Domyślny układ w stos na urządzeniach mobilnych

Używaj listy ułożonej w stos, gdy interaktywność nie poprawiłaby znacząco zrozumienia. Jest to domyślne rozwiązanie dla treści redakcyjnych, ponieważ wszystkie elementy i podpisy pozostają widoczne, linkowalne, drukowalne i czytelne bez gestów.

Parametry

Kontrakt przechowuje znaczenie redakcyjne i metadane zasobów. Tokeny układu, szerokości kolumn, odstępy, ikony kontrolek, czas trwania przejścia i punkty przełamania należą do mechanizmu renderującego.

Podpisy są wymagane dla dowodów, kolejności zmieniającej znaczenie, etykiet porównawczych i widocznych informacji o prawach. Widok produktu może pominąć podpis tylko wtedy, gdy jego tekst alternatywny i kontekst odróżniają ten widok. mobile=scroll jest dozwolone tylko dla strip lub primary-details z wymaganymi kontrolkami.

Składnia i przykłady kodu

Wszystkie mapowania zachowują ten sam tytuł, kolejność, pola elementów i wariant rezerwowy. Produkcja musi odrzucić przykładowe ścieżki, dopóki pliki nie istnieją.

Przenośna dyrektywa Markdown

:::image-gallery{layout=grid mobile=stack orderedBy=viewpoint}
## Trzy widoki określające stan 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. Przegląd.** Kompletne złącze pokazuje kształt, skalę i orientację.
:::

:::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. Zatrzask.** Widok z bliska potwierdza, że klips mocujący jest nienaruszony.
:::
:::

Pierwszy nagłówek staje się title; treść każdego elementu staje się jego podpisem. Kolejność źródłowa jest kanoniczna, więc murarka nie może zmieniać kolejności elementów w celu wypełnienia luk.

Mapowanie shortcode w Hugo

{{< image-gallery layout="grid" mobile="stack" orderedBy="viewpoint" >}}
## Trzy widoki określające stan 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. Przegląd.** Kompletne złącze pokazuje kształt, skalę i orientację.
{{< /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. Zatrzask.** Widok z bliska potwierdza, że klips mocujący jest nienaruszony.
{{< /gallery-item >}}
{{< /image-gallery >}}

Ta specyfikacja adaptera nie jest zarejestrowanym shortcode. Do czasu zatwierdzenia używaj semantycznych figur w kolejności źródłowej i nie odwołuj się do brakujących zasobów.

Blok WordPress

<!-- wp:amicited/image-gallery {"layout":"grid","mobile":"stack","orderedBy":"viewpoint"} -->
<section aria-labelledby="condition-gallery">
  <h2 id="condition-gallery">Trzy widoki określające stan 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>Przegląd.</strong> Kompletne złącze pokazuje kształt, skalę i orientację.</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>Zatrzask.</strong> Widok z bliska potwierdza, że klips mocujący jest nienaruszony.</figcaption></figure></li>
  </ol>
</section>
<!-- /wp:amicited/image-gallery -->

Implementacja WordPress może używać natywnego bloku Galerii tylko wtedy, gdy zachowuje tekst alternatywny, podpisy, oryginalne wymiary, kolejność źródłową i dostępną nazwę grupy dla każdego elementu. Stylizowanie sekwencji obrazów tła nie spełnia kontraktu.

Przykłady

Prawidłowo: każdy widok usuwa inną niepewność

Stan używanego sprzętu — kolejność inspekcji

1. Pełna jednostka: Określa tożsamość i pokazuje, że obudowa jest kompletna.
2. Tabliczka znamionowa: Potwierdza dokładny model i napięcie znamionowe w czytelnym zbliżeniu.
3. Złącze zasilania: Pokazuje proste piny i nienaruszony zatrzask.
4. Powierzchnia zużycia: Pokazuje najgłębszą widoczną rysę obok linijki dla skali.

Jest to zgodne z logiką inspekcji kupującego. Każdy podpis jest weryfikowalny, linijka zapobiega wyolbrzymianiu uszkodzeń przez zbliżenie, a układ w stos na urządzeniach mobilnych zachowuje kolejność.

Nieprawidłowo: karuzela używana jako zrzut zasobów

Nasze ostatnie wydarzenie
Dwanaście prawie identycznych zdjęć sceny, bez podpisów, automatycznie przewijających się co cztery sekundy. Nawigacja pojawia się tylko po najechaniu kursorem. Wersja mobilna pokazuje przycięty środkowy wycinek i akceptuje tylko gesty przesunięcia.

Ani przynależność, ani kolejność nie mają uzasadnienia. Dwanaście nazw plików nic nie mówi czytelnikowi ekranu; automatyczne przewijanie uniemożliwia inspekcję; kontrolki widoczne tylko po najechaniu wykluczają użytkowników klawiatury i dotyku; nawigacja wyłącznie przez przesunięcie ukrywa dostęp; a przycięcie może usunąć obiekt. Wybierz kilka ujęć, które opowiadają określoną historię, napisz odrębne teksty alternatywne i podpisy, zatrzymaj automatyczny ruch i domyślnie stosuj układ w stos na urządzeniach mobilnych.

Znaczniki schematu i dostępność

Galeria nie automatycznie otrzymuje specjalnego traktowania w wyszukiwarkach. Oznaczaj tylko relacje, które widoczna strona i zasoby wspierają. Znaczące obrazy można mapować na ImageObject ze stabilnym contentUrl, podpisem, tekstem twórcy lub informacją o autorstwie, informacją o licencji i statusem reprezentatywnym, gdy te fakty są znane. Jawnie uporządkowana galeria może być mapowana na ItemList, używając wartości position zgodnych z kolejnością źródłową. Widoki produktów mogą wypełniać właściwość Product.image elementu nadrzędnego. Nie twórz encji dla obrazów dekoracyjnych, nie wymyślaj licencji ani nie twierdź, że każdy obraz jest reprezentatywny.

Używaj natywnych elementów <img> wewnątrz elementów <figure> z widocznym <figcaption>, gdy jest to wymagane. Nazwij sekcję poprzez jej nagłówek. Zachowaj uporządkowane relacje za pomocą <ol> lub równoważnej semantyki pozycji; układ wizualny nigdy nie nadpisuje kolejności DOM.

Tekst alternatywny opisuje cel każdego obrazu w tym zestawie. Nie powinien zaczynać się od „obraz", powtarzać dosłownie podpisu ani opisywać szczegółów nieistotnych dla decyzji. Dwa zdjęcia tego samego obiektu wymagają różnych tekstów alternatywnych, ponieważ każde ma inny cel. Używaj alt="" tylko wtedy, gdy obraz jest naprawdę zbędny, a jego usunięcie nie usunęłoby dowodów.

Warianty interaktywne potrzebują nazwanych przycisków poprzedni/następny, aktywacji klawiaturowej, tekstowego wskaźnika pozycji i komunikatu o stanie po zmianach. Automatyczne przewijanie jest zabronione. Utrzymuj fokus na aktywowanej kontrolce i zachowaj zawartość bez JavaScriptu, przy 200% powiększenia i przy zredukowanym ruchu.

Zasady pisania

Każda galeria odpowiada na jedno wspólne pytanie. Określ, dlaczego istnieje, a następnie uporządkuj według narracji, chronologii, priorytetu, punktu widzenia lub porównania — nigdy według kolejności przesyłania.

• Używaj 2–8 elementów dla zwykłej galerii; użyj dokładnie 2 dla porównania i 3–12 dla głównego zestawu produkt/szczegóły.
• Pisz tytuły w 3–10 słowach i opcjonalne wstępy w jednym zdaniu liczącym 8–30 słów.
• Utrzymuj podpisy w granicach 5–30 słów. Zacznij od widoku, stanu lub etykiety elementu, gdy poprawia to skanowalność, a następnie wyjaśnij jego wkład.
• Stosuj równoległą strukturę podpisów w całym zestawie. Jeśli pierwszy zaczyna się od etykiety stanu, pozostałe również powinny.
• Skup tekst alternatywny na tym, czego czytelnik niewidzący potrzebuje z danej klatki; celuj w 40–180 znaków i nigdy nie przekraczaj 250.
• Zachowaj rzeczowy, obserwacyjny ton. Mów „uszczelka leży równo", a nie „niesamowita uszczelka wygląda idealnie".
• Określaj czas, skalę, przycięcie, stan i źródło, gdy ograniczają one interpretację.
• Stosuj te same warunki porównania, gdy wygląd jest dowodem: równoważne przycięcie, kąt, skala, oświetlenie i obróbka kolorystyczna.

Nigdy nie umieszczaj nagłówka, akapitu, tabeli, listy instrukcji, wezwania do działania, formularza, ceny, oceny, opinii, rozwijanego ujawnienia, filmu, odtwarzacza audio ani karty produktu wewnątrz podpisu elementu. Nigdy nie wbudowuj podpisów w piksele, nie używaj koloru jako jedynej etykiety, nie ukrywaj istotnych wad przez przycięcie, nie ujawniaj danych klienta ani nie publikuj obrazu bez potwierdzonych praw do użytkowania.

Typy postów, które go używają

Wiersze poniżej odzwierciedlają frontmatter postTypes. Obecność oznacza, że typ posta może użyć galerii, gdy obrazy tworzą rzeczywisty zestaw; nie czyni elementu obowiązkowym na każdej stronie.

Lista kontrolna QA

• Tytuł określa jedno wspólne pytanie lub temat, a każdy obraz wnosi odrębną odpowiedź.
• Liczba elementów odpowiada wybranemu wariantowi i nie zawiera zbędnych klatek.
• orderedBy rejestruje uzasadnioną kolejność narracji, chronologii, priorytetu, punktu widzenia lub porównania.
• Kolejność źródłowa, wizualna, klawiaturowa, czytnika ekranu, numeracji i mobilna są zgodne.
• Każdy src wskazuje na istniejący, oczyszczony prawami nieruchomy obraz przed publikacją.
• Każdy obraz ma nierozdzielczą szerokość i wysokość, celową wartość alt i znaczące przycięcie.
• Dowody, porównania i uporządkowane elementy mają zwięzłe widoczne podpisy o równoległej strukturze.
• Informacje o autorstwie i linki do licencji są widoczne i dokładne, gdy jest to wymagane.
• Obrazy porównawcze używają równoważnej skali, kąta, przycięcia, oświetlenia i etykiet, chyba że różnica jest ujawniona.
• Wersja mobilna używa czytelnego wariantu w stosie lub pełnych dostępnych kontrolek; przesunięcie nigdy nie jest jedynym rodzajem interakcji.
• Warianty interaktywne mają widoczne przyciski poprzedni/następny, tekstowy wskaźnik pozycji, obsługę klawiatury i brak automatycznego przewijania.
• Galeria działa bez JavaScriptu i przy 200% powiększenia, respektuje ograniczenie ruchu i nie powoduje poziomego przepełnienia strony.
• Pierwszy ważny obraz nie jest opóźniony, późniejsze stany ładowania są komunikowane, a zarezerwowane miejsce zapobiega przesunięciom układu.
• Żadna istotna instrukcja, liczba, ostrzeżenie, etykieta ani konkluzja nie istnieje wyłącznie w pikselach.
• Galeria nie zawiera filmu, karty produktu, formularza, ceny, oceny, opinii ani wezwania do działania.
• Dane strukturalne są zgodne z widoczną kolejnością, podpisami, prawami i relacjami encji, bez traktowania dekoracji jako treści.
• Mapowania w przenośnym Markdown, Hugo i WordPress zachowują te same pola, kolejność elementów i znaczenie.

FAQ

Szablon academy renderuje pięć sprawdzonych pytań przechowywanych w [[faq]] frontmatter tej strony. Obejmują one liczbę elementów, karuzele mobilne, tekst alternatywny i podpisy, zakazaną mieszaną zawartość oraz dane strukturalne.

Sukces oznacza, że czytelnik potrafi wyjaśnić relację między obrazami i wkład każdego elementu. Bez znaczącej kolejności, odrębnych podpisów i dostępnej ścieżki mobilnej zestaw jest listą zasobów, a nie galerią.