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 | Aprovada |
| Figma Desktop | Abrir no Figma |
| Figma Mobile | Abrir no Figma |
| Figma Library (página) | Abrir no Figma |
| Zoho Task | P894-T484 |
| Criada | 2026-04-21 |
| Aprovada | 2026-06-11 |
| Aprovada por | Savoy (cliente) |
Screenshots de Referência
Section titled “Screenshots de Referência”Desktop (1440px)
Section titled “Desktop (1440px)”
Mobile (375px)
Section titled “Mobile (375px)”Abrir screenshot mobile (375px) em nova janela →
Variantes por hotel
Section titled “Variantes por hotel”
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. 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 JPG, PNG, WEBP e SVG. GIFs animados não são aceites.
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
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 visitante, 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
Section titled “Variante 2 — Grid com 3 colunas”Como visitante, 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 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
Section titled “Variante 3 — Grid com 2 colunas”Como visitante, 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
Section titled “Variante 4 — Mobile com 1 coluna ou 2 colunas”Como visitante 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
Section titled “Variante 5 — Sem título nem descrição”Como visitante, 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
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 - 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
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. 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 (máximo de 40 imagens). Cada imagem tem os seguintes subcampos: |
| ↳ Ficheiro da imagem | Imagem | Sim | Suporta JPG, PNG, WEBP e SVG. GIFs animados não são aceites. |
| ↳ 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
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 (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
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) | 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
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 |
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 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.
Imagens e Notas:
Section titled “Imagens e Notas:”Imagem para desktop e mobile: O editor pode carregar uma imagem específica para desktop e outra para mobile. Quando a imagem para mobile não está preenchida, o módulo utiliza automaticamente a imagem de desktop em todos os tamanhos de ecrã.
Enquadramento (crop): Para cada imagem carregada, o editor pode escolher o enquadramento mais adequado a esta utilização — destacando a zona da imagem que melhor funciona, sem alterar o ficheiro original.
As imagens carregadas no backoffice para este módulo aceitam os formatos JPG, PNG, SVG e WEBP. GIF não é aceite neste módulo.
- 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.
Changelog
Section titled “Changelog”| Data | Estado | Descrição |
|---|---|---|
| 2026-05-19 | Atualização | Renomeada secção ‘Formatos de Imagem Aceites’ → ‘Imagens e Notas:’ e formatos envolvidos em callout informativo |
| 2026-05-19 | Atualização | Adicionado alerta sobre imagem desktop/mobile e crop |
| 2026-05-19 | Revisão PM (Gabriela) | Validado GR sem comentários |
| 2026-05-19 | Revisão CD (Michelle) | |
| 2026-05-18 | Revisão Rui Rosa | Revisto e validado por Rui Rosa. Pequenas alterações. |
| 2026-05-18 | Análise QA (Agentic QA) | Análise de incoerências, formatação, lógica, e conteúdo. Revisto e alterado. |
| 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 |
| 2026-06-11 | Aprovada | Aprovação do cliente (Savoy) confirmada — estado “approved” no Docmost + Excel de controle |