M12 — Image Gallery
Galeria de imagens organizada num grid em forma de tijolo, com título e descrição introdutórios. Ao clicar numa imagem, esta abre em ecrã inteiro, permitindo ao utilizador percorrer todas as fotografias em detalhe.
| Campo | Valor |
|---|---|
| Módulo | M12 — Image Gallery |
| Estado | Rascunho |
| Figma Desktop | Abrir no Figma |
| Figma Mobile | Abrir no Figma |
| Figma Variantes | Abrir no Figma |
| Zoho Task | P894-T484 |
| Criada | 2026-04-21 |
| Aprovada | — |
| Aprovada por | — |
Screenshots de Referência
Section titled “Screenshots de Referência”Desktop (1440px)
Section titled “Desktop (1440px)”
Mobile (375px)
Section titled “Mobile (375px)”
Todas as variantes e temas
Section titled “Todas as variantes e temas”
Links Figma: Desktop | Mobile | Todas as variantes
Descrição Geral
Section titled “Descrição Geral”O módulo Image Gallery apresenta uma coleção de fotografias organizadas num grid dinâmico em forma de tijolo (as imagens alternam entre orientação horizontal e vertical para criar um ritmo visual interessante).
Quando o utilizador clica em qualquer imagem, abre-se uma vista em ecrã inteiro (lightbox) onde pode ver a imagem em tamanho grande e navegar para a imagem seguinte ou anterior, com setas, teclado ou gesto de deslizar no telemóvel.
Este módulo aparece tipicamente em páginas de apresentação de quartos, restaurantes, spa, áreas comuns e na galeria geral do hotel, onde a fotografia é o elemento principal de comunicação.
Variantes
Section titled “Variantes”Variante 1 — Grid com 4 colunas (padrão em computador)
Section titled “Variante 1 — Grid com 4 colunas (padrão em computador)”Como utilizador, quero ver várias fotografias organizadas num grid amplo, para ter uma visão geral do local ou serviço e escolher rapidamente as imagens que quero ver em detalhe.
Elementos visíveis:
- Título grande no topo (alinhado ao centro da coluna de texto)
- Texto descritivo debaixo do título
- Grid de imagens com 4 colunas, dispostas em tijolo (imagens horizontais e verticais alternadas para criar ritmo visual)
- Botão opcional centrado no fundo do módulo (ex: “Ver galeria completa”)
Critérios de Aceitação:
- O grid apresenta 4 colunas no ecrã do computador
- As imagens alternam entre orientação horizontal e vertical, criando um padrão de tijolo
- O título aparece em destaque com tamanho maior que o texto descritivo
- Ao clicar em qualquer imagem, abre-se a vista em ecrã inteiro (lightbox)
- O botão, quando presente, aparece centrado abaixo do grid
Variante 2 — Grid com 3 colunas
Section titled “Variante 2 — Grid com 3 colunas”Como utilizador, quero ver um grid de imagens com menos colunas mas com cada imagem maior, para apreciar melhor cada fotografia sem abrir a vista em ecrã inteiro.
Elementos visíveis:
- Mesmos elementos da variante anterior, mas o grid tem 3 colunas em vez de 4
- As imagens ficam maiores, com mais destaque individual
Critérios de Aceitação:
- O grid apresenta 3 colunas no ecrã do computador
- Cada imagem é proporcionalmente maior do que na versão com 4 colunas
- O padrão de tijolo (alternância horizontal/vertical) mantém-se
Variante 3 — Grid com 2 colunas
Section titled “Variante 3 — Grid com 2 colunas”Como utilizador, quero ver um grid com apenas duas colunas, para um efeito visual mais calmo e focado quando tenho poucas imagens ou quando cada fotografia merece destaque.
Elementos visíveis:
- Mesmos elementos das variantes anteriores, mas com apenas 2 colunas
- As imagens ocupam praticamente metade da largura da página
Critérios de Aceitação:
- O grid apresenta 2 colunas no ecrã do computador
- As imagens têm tamanho grande e ocupam quase metade da largura disponível
- O padrão de tijolo continua visível
Variante 4 — Sem título nem descrição
Section titled “Variante 4 — Sem título nem descrição”Como utilizador, quero ver apenas o grid de imagens sem texto introdutório, quando o módulo aparece em páginas em que o contexto já está dado antes da galeria.
Elementos visíveis:
- Apenas o grid de imagens
- Botão opcional abaixo do grid
Critérios de Aceitação:
- O espaço do título e descrição não aparece vazio quando não estão preenchidos
- O grid ocupa naturalmente todo o espaço disponível
Variante 5 — Sem botão
Section titled “Variante 5 — Sem botão”Como utilizador, quero que a galeria funcione sem um botão final, quando não há uma ação adicional para oferecer.
Elementos visíveis:
- Título, descrição e grid de imagens
- Nenhum botão no fundo
Critérios de Aceitação:
- O módulo termina no fim do grid, sem espaço vazio
- O botão apenas aparece quando o editor preenche o campo
Variante 6 — Com legendas nas imagens
Section titled “Variante 6 — Com legendas nas imagens”Como utilizador, quero ler uma breve legenda debaixo ou sobre cada imagem, para perceber o contexto ou local retratado na fotografia.
Elementos visíveis:
- Mesmo grid das variantes anteriores
- Pequeno texto descritivo associado a cada imagem (aparece também na vista em ecrã inteiro)
Critérios de Aceitação:
- Cada imagem pode ter uma legenda própria
- A legenda aparece visível no grid e também na vista em ecrã inteiro
- Imagens sem legenda mostram-se corretamente sem espaços vazios
Variante 7 — Vista em ecrã inteiro (lightbox)
Section titled “Variante 7 — Vista em ecrã inteiro (lightbox)”Como utilizador, quero ver uma imagem em tamanho grande sem sair da página, para apreciar o detalhe da fotografia e depois continuar a navegação facilmente.
Elementos visíveis:
- Imagem em tamanho grande centrada no ecrã
- Fundo escurecido por trás da imagem
- Seta para a imagem anterior (esquerda)
- Seta para a imagem seguinte (direita)
- Botão para fechar (X, canto superior direito)
- Contador de imagens (ex: “3 / 12”)
- Legenda da imagem (quando existe)
Critérios de Aceitação:
- A imagem aparece em tamanho grande e centrada no ecrã
- O fundo atrás da imagem escurece para destacar a fotografia
- As setas permitem avançar e recuar entre imagens
- O contador mostra a posição atual e o total (ex: “3 / 12”)
- A legenda aparece quando a imagem tem texto descritivo
- Ao fechar a vista em ecrã inteiro, o utilizador volta para o grid no mesmo sítio onde estava
Interações do Utilizador
Section titled “Interações do Utilizador”Este é um módulo interativo. O utilizador pode:
| Interação | Descrição |
|---|---|
| Clicar numa imagem do grid | Abre essa imagem em ecrã inteiro (lightbox) |
| Clicar na seta direita dentro do lightbox | Avança para a imagem seguinte |
| Clicar na seta esquerda dentro do lightbox | Recua para a imagem anterior |
| Pressionar a seta direita do teclado | Avança para a imagem seguinte |
| Pressionar a seta esquerda do teclado | Recua para a imagem anterior |
| Pressionar a tecla Escape | Fecha a vista em ecrã inteiro |
| Clicar no botão X (canto superior direito) | Fecha a vista em ecrã inteiro |
| Clicar fora da imagem (na zona escurecida) | Fecha a vista em ecrã inteiro |
| Deslizar o dedo para a esquerda (telemóvel, dentro do lightbox) | Avança para a imagem seguinte |
| Deslizar o dedo para a direita (telemóvel, dentro do lightbox) | Recua para a imagem anterior |
| Clicar no botão final do módulo (quando presente) | Redireciona para a página indicada pelo editor (ex: galeria completa) |
Ao fechar a vista em ecrã inteiro, o foco do teclado regressa automaticamente à imagem onde o utilizador estava, para facilitar a continuação da navegação.
Elementos
Section titled “Elementos”Conteúdos geridos no backoffice para este módulo:
| Elemento | Tipo | Obrigatório | Descrição |
|---|---|---|---|
| Título | Título | Não | Texto em destaque no topo do módulo. O editor escolhe o nível de cabeçalho. |
| Descrição | Texto | Não | Parágrafo introdutório debaixo do título |
| Imagens | Lista de imagens | Sim | Conjunto de fotografias que compõem a galeria (sem limite). Cada imagem tem os seguintes subcampos: |
| ↳ Imagem (computador) | Imagem | Sim | Versão da fotografia otimizada para ecrãs grandes |
| ↳ Imagem (telemóvel) | Imagem | Sim | Versão da fotografia otimizada para ecrãs pequenos |
| ↳ Descrição da imagem | Texto curto | Sim | Texto alternativo para leitores de ecrã e descrição da imagem (ex: “Vista exterior da piscina ao pôr-do-sol”) |
| ↳ Legenda | Texto curto | Não | Texto visível associado à imagem no grid e na vista em ecrã inteiro |
| Botão | Botão | Não | Botão opcional abaixo do grid com texto e ligação para outra página |
Nota: A lista de imagens é o único campo obrigatório — o título, a descrição e o botão são opcionais. A galeria mantém-se visualmente equilibrada mesmo que estes campos não estejam preenchidos.
Opções de Configuração
Section titled “Opções de Configuração”Opções disponíveis no backoffice para personalizar o comportamento e aspeto do módulo:
| Opção | Valores possíveis | Valor padrão | Descrição |
|---|---|---|---|
| Número de colunas | 2 / 3 / 4 | 4 | Quantas colunas usar no grid em ecrã de computador (o telemóvel usa sempre 2 colunas) |
| Ativar/Desativar | Ativo / Inativo | Ativo | Permite esconder o módulo sem o apagar |
Comportamento Responsive
Section titled “Comportamento Responsive”| Elemento | Ecrã grande (computador) | Ecrã pequeno (telemóvel) |
|---|---|---|
| Título | Alinhado à esquerda, em destaque | Alinhado à esquerda, ocupa toda a largura |
| Descrição | Aparece ao lado/abaixo do título, alinhada à direita do título | Debaixo do título, ocupa toda a largura |
| Grid | 2, 3 ou 4 colunas (conforme a escolha do editor) | Sempre 2 colunas |
| Imagens | Carregam a versão otimizada para computador | Carregam a versão otimizada para telemóvel |
| Padrão de tijolo | Alternância entre horizontal e vertical em todas as colunas | Alternância entre as 2 colunas (uma com imagens mais pequenas, outra com imagens mais altas) |
| Botão | Centrado abaixo do grid | Centrado abaixo do grid, com espaçamento maior |
| Vista em ecrã inteiro | Imagem ocupa quase toda a altura do ecrã, com setas nas laterais | Imagem ocupa quase toda a largura, navegação por setas e por gesto de deslizar |
Estados Visuais
Section titled “Estados Visuais”| Estado | Descrição |
|---|---|
| Inicial | O título, a descrição, o grid de imagens e o botão aparecem ao carregar a página |
| Imagens a carregar | Cada imagem mostra um placeholder suave enquanto não termina o carregamento, sem saltos de layout |
| Ao passar o rato numa imagem | A imagem indica visualmente que é clicável (efeito subtil de zoom ou sobreposição suave) |
| Ao passar o rato no botão | O botão muda ligeiramente de cor para indicar que é clicável |
| Vista em ecrã inteiro aberta | A imagem selecionada aparece grande, com fundo escurecido e controlos de navegação |
| Primeira imagem no lightbox | A seta para a imagem anterior não tem efeito (ou fica subtilmente esbatida) |
| Última imagem no lightbox | A seta para a imagem seguinte não tem efeito (ou fica subtilmente esbatida) |
| Sem título | O espaço do título não aparece; a descrição sobe |
| Sem descrição | O espaço da descrição não aparece; o grid sobe |
| Sem botão | O módulo termina no fim do grid, sem espaços vazios |
| Imagem sem legenda | A legenda não aparece, nem no grid nem na vista em ecrã inteiro |
Acessibilidade
Section titled “Acessibilidade”- Todas as imagens têm uma descrição alternativa obrigatória, lida pelos leitores de ecrã
- A galeria pode ser navegada apenas com o teclado (tecla Tab para percorrer as imagens, Enter para abrir a vista em ecrã inteiro)
- A vista em ecrã inteiro pode ser fechada com a tecla Escape, e o foco do teclado regressa automaticamente à imagem onde o utilizador estava
- Dentro da vista em ecrã inteiro, o foco do teclado fica “preso” (não sai para o resto da página), para que o utilizador consiga navegar apenas pelos controlos do lightbox
- As setas do teclado (esquerda e direita) permitem passar entre imagens dentro da vista em ecrã inteiro
- A vista em ecrã inteiro é anunciada como “janela de diálogo” pelos leitores de ecrã
- O contraste das cores do título, descrição e botão cumpre os requisitos de acessibilidade visual em todos os temas
- Os botões e setas têm indicação visual quando estão selecionados pelo teclado
- Utilizadores que preferem menos animação (configuração do sistema) veem transições mais subtis ou sem movimento
O módulo adapta-se visualmente a cada hotel: cores do título, texto, botão e fundo seguem a identidade visual do hotel, assim como a tipografia dos títulos e do corpo de texto.
Os 8 hotéis suportados:
- Savoy Signature
- Savoy Palace
- Royal Savoy
- Saccharum
- The Reserve
- Calheta Beach
- Gardens
- Hotel Next
Diferenças visuais observadas entre temas:
- Savoy Palace — Tipografia serifada dourada, botão preenchido em dourado, imagens com cantos retos
- Saccharum — Tipografia serifada roxa escura, botão preenchido em roxo escuro, imagens com cantos retos
- Calheta Beach — Tipografia sem serifa em tom verde-escuro, botão preenchido em vermelho-terracota, imagens com cantos ligeiramente arredondados
- Hotel Next — Tipografia sem serifa bold em tom escuro, botão preenchido em preto, imagens com cantos muito arredondados
- Savoy Signature — Tipografia serifada clara sobre fundo escuro (tema escuro), botão preenchido em tom dourado claro, imagens com cantos retos
Em todos os temas, a estrutura e comportamento do módulo mantêm-se idênticos — apenas a aparência (cores, tipografias e forma dos cantos) varia.
Changelog
Section titled “Changelog”| Data | Estado | Descrição |
|---|---|---|
| 2026-04-21 | Rascunho | Versão inicial criada a partir do Figma |
| 2026-04-21 | Publicada | Publicada no Docmost (nova página) |