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

Desktop (1440px)

Mobile (375px)

Todas as variantes e temas

Links Figma: Desktop | Mobile | Todas as variantes

Descrição Geral

O módulo Image Gallery apresenta uma coleção de fotografias organizadas num grid dinâmico. Cada imagem tem uma proporção escolhida individualmente pelo editor no backoffice, a partir de quatro formatos disponíveis: 2:1 (horizontal larga), 4:3 (horizontal padrão), 1:1 (quadrada) e 4:5 (vertical). A combinação destas proporções com o número de colunas cria o ritmo visual do grid.

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.

O módulo suporta imagens nos formatos JPEG, PNG, WEBP e SVG.

O número de imagens visíveis antes de um botão “carregar mais” é configurável no backoffice, pois varia consoante o formato e o número de colunas escolhidos.

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.

Referências de implementação: grid — masonry.desandro.com | lightbox — fancyapps.com/fancybox

Variantes

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 à esquerda
Texto descritivo debaixo do título
Grid de imagens com 4 colunas; cada imagem tem uma proporção definida pelo editor no BO (2:1, 4:3, 1:1 ou 4:5)
Botão “carregar mais” centrado no fundo do módulo, quando há mais imagens do que o limite configurado no BO

Critérios de Aceitação:

O grid apresenta 4 colunas em ecrã de 1440px
O número de imagens visíveis antes do botão “carregar mais” é o definido no BO
Ao clicar em “carregar mais”, novas imagens são adicionadas ao grid sem recarregar a página
Ao clicar em qualquer imagem, abre-se a vista em ecrã inteiro (lightbox)
O botão “carregar mais” desaparece quando todas as imagens já estão visíveis

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.

Variante 2 — Grid 3 colunas (tema Signature)

Elementos visíveis:

Mesmos elementos da variante anterior, mas o grid tem 3 colunas em vez de 4
As proporções de cada imagem são as definidas individualmente pelo editor no BO
O ritmo visual resulta da combinação das proporções escolhidas, não de um algoritmo automático

Critérios de Aceitação:

O grid apresenta 3 colunas no ecrã do computador

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 proporções de cada imagem são as definidas individualmente pelo editor no BO
O ritmo visual resulta da combinação das proporções escolhidas, não de um algoritmo automático

Variante 4 — Mobile com 1 coluna ou 2 colunas

Como utilizador num telemóvel, quero ver as imagens em coluna única, para uma apresentação mais focada e fácil de percorrer com o polegar.

Elementos visíveis:

Mesmos elementos das variantes desktop
Grid com 1 única coluna; cada imagem ocupa toda a largura disponível

Critérios de Aceitação:

O grid apresenta 1 ou 2 coluna no ecrã do telemóvel quando esta opção está selecionada no BO
As proporções das imagens mantêm-se iguais às definidas para o desktop
O botão “carregar mais” comporta-se da mesma forma que no desktop

Variante 5 — 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

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

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 - especificado no módulo M15)
Clicar no botão final do módulo (quando presente)	Abre mais elementos da galeria

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

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. Suporta formatação RTE simplificada: negrito, itálico, sublinhado e link.
Descrição	Texto	Não	Parágrafo introdutório debaixo do título. Suporta formatação RTE simplificada: negrito, itálico, sublinhado e link
Imagens	Lista de imagens	Sim	Conjunto de fotografias que compõem a galeria (sem limite). Cada imagem tem os seguintes subcampos:
↳ Ficheiro da imagem	Imagem	Sim	Suporta JPEG, PNG, WEBP, SVG e GIF animado. GIFs reproduzem automaticamente em loop.
↳ Proporção	Seleção	Sim	Proporção da imagem no grid: 2:1 (horizontal larga) / 4:3 (horizontal padrão) / 1:1 (quadrada) / 4:5 (vertical). Definida individualmente para cada imagem.
↳ 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”)
Botão	Botão	Não	Botão opcional abaixo do grid. Pode funcionar como “carregar mais imagens” (paginação inline) ou como ligação de navegação para outra página — o comportamento é configurável no BO.

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

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 (desktop)	2 / 3 / 4	4	Número de colunas do grid em ecrã grande (≥1024px).
Número de colunas (mobile)	1 / 2	2	Número de colunas do grid em ecrã de telemóvel.
Limite de imagens visíveis	Número inteiro	16	Número máximo de imagens mostradas antes do botão “carregar mais”. Quando todas as imagens já estão visíveis, o botão não aparece. Configurável no BO porque varia consoante o formato e o número de colunas.
Limite de imagens carregadas através do click no “Carregar mais”	Número inteiro	8	Número máximo de imagens mostradas após clicar em “carregar mais”.
Padding do corpo de texto	Com padding / Sem padding	Com padding	Controla se o módulo tem espaçamento vertical em relação aos módulos adjacentes.
Ativar/Desativar	Ativo / Inativo	Ativo	Permite ativar ou desativar o módulo sem o apagar — quando inativo, o módulo deixa de aparecer no site mas toda a configuração é mantida.

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)	1 ou 2 colunas (conforme BO)
Imagens	Carregam a versão otimizada para computador	Carregam a versão otimizada para telemóvel
Proporções das imagens	Conforme definido por imagem no BO	Iguais ao desktop
Botão	Centrado abaixo do grid	Centrado abaixo do grid, com espaçamento maior
Vista em ecrã inteiro (quando se carrega e abre o M15 - lightbox)	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

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

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

Temas

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 sites suportados:

Savoy Palace
Saccharum
Calheta Beach
Hotel Next
Savoy Signature (site do grupo)
Gardens (por desenvolver)
The Reserve (por desenvolver)
Royal Savoy (por desenvolver)

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.

Este módulo não permite a utilização de GIFs animados devido ao possível peso e problemas de performance na página.

Este módulo tem um limite máximo de 40 imagens.

Formatos de Imagem Aceites

As imagens carregadas no backoffice para este módulo aceitam os formatos JPG, PNG, SVG, GIF e WEBP.

JPG — preferencial para fotografias e imagens com tratamento fotográfico.
SVG — preferencial para imagens vetoriais (logótipos, ícones, símbolos, ilustrações simples).
WEBP — alternativa otimizada para fotografia/gráficos quando se procura melhor performance.
PNG — para imagens com transparência ou detalhe gráfico que não seja vetorial.
GIF — apenas quando é necessária animação simples.

Changelog

Data	Estado	Descrição
2026-05-14	Revisão Design + Tech	Análise de Liliana Moreira e Rui Rosa comparando as recomendações de FA
2026-05-11	Revisão Functional Analyst	Análise e recomendações da equipa de Análise Funcional.
2026-05-05	Validação Design	Atualizado e validado por Liliana Moreira
2026-04-21	Rascunho	Versão inicial criada a partir do Figma