PhotoGallery
O PhotoGallery mostra um conjunto de fotos do negócio, do produto ou do espaço. Ela tem título e as fotos, em uma de
duas formas:
mosaic: fotos em colunas, com alturas diferentes. É a padrão.carousel: uma faixa de slides com rolagem por encaixe e, a partir de duas fotos, miniaturas que levam a cada slide. O carrossel não usa script; ele precisa de umidde seção único na página, porque as miniaturas apontam para âncoras que começam com esseid.
PhotoGallery
Pasta: ui/sections/photo-gallery
Variantes
| Id | Variante | Tom |
|---|---|---|
photo-gallery-mosaic-captions | mosaic | light |
photo-gallery-mosaic-plain | mosaic | gray |
photo-gallery-carousel-captions-light | carousel | light |
photo-gallery-carousel-plain-gray | carousel | gray |
Propriedades
| Propriedade | Tipo | Obrigatória | Descrição |
|---|---|---|---|
variant | "mosaic" | "carousel" | Não | The `carousel` needs a page-unique `id`: the thumbnails link to `#<id>-<n>`. |
title | string | Sim | — |
intro | string | Não | — |
photos | readonly GalleryPhoto[] | Sim | — |
priority | boolean | Não | The gallery is the largest image of the first screen: the first slide (carousel) or photo (mosaic) loads eagerly (LCP). |
tone | Tone | Não | — |
density | Density | Não | — |
width | Width | Não | — |
id | string | Não | — |
Onde aparece nos templates
Seção intitulada “Onde aparece nos templates”mosaic:templates/one-page/files/src/data/content.ts:113etemplates/landing-page/models/lancamento/files/src/data/content.ts:59.carousel:templates/multi-page/models/catalogo/files/src/pages/item.ts:104, na página de cada item, com as fotos do item.
A primeira foto da galeria carrega antes das outras, porque é a maior imagem da primeira tela.
Captura da primeira variante do catálogo (mosaic com legendas, em 1280 px):
A mesma variante em 360 px:
