Crie uma galeria de imagens.

Aprender DXPR BuilderCriar páginasSeguir um tutorial

Aqui constrói-se uma galeria de fotos: um cabeçalho centrado, três fotos lado a lado com texto alternativo e uma apresentação numa faixa cinzenta. Use-a para mostrar um lugar ou um evento em imagens. Para mostrar projetos com uma descrição cada, siga Crie uma galeria de portefólio.

O vídeo constrói uma galeria de pinturas de estudantes para uma universidade.

Antes de começar

  • A sua função tem a permissão Edit with DXPR Builder.
  • A biblioteca de média tem pelo menos seis fotos, cortadas nas mesmas proporções.
  • A página está aberta no construtor. Para uma nova, vá a Content > Add content > Landing Page (/node/add/landing_page) e clique em Save.

Passo 1: adicione o cabeçalho

  1. Clique em Add Elements na página vazia e escolha Section no separador Layout.
  2. Paire o cursor sobre a secção e abra More > Settings. Em HTML classes escolha Align text center e clique em Save.
  3. Clique em + na secção e escolha Text no separador Content.
  4. Escreva "Student art gallery" como Heading 2, adicione uma linha de introdução e clique em Save. O tema imprime o título da página como Heading 1 da página. Para fazer deste cabeçalho o Heading 1, veja Crie páginas amigas de SEO.

Passo 2: adicione a grelha de fotos

  1. Paire o cursor sobre a secção e clique em Add Section Below. Clique em + na secção nova e escolha Row; vem com duas colunas iguais.
  2. Clique no ícone de grelha da fila (Column layout), escolha a predefinição 1/3 + 1/3 + 1/3 e clique em Save.
  3. Clique em + na primeira coluna e escolha Image.
  4. Clique em Select Image, pesquise a biblioteca de média com Apply filters, clique numa foto e clique em Insert selected.
  5. Abra o painel SEO e escreva o Alt attribute: o que alguém que não vê a foto deve saber. Clique em Save.
  6. Repita para a segunda e a terceira coluna.

As fotos cortadas nas mesmas proporções mantêm a fila direita.

Passo 3: adicione a apresentação

  1. Adicione uma terceira secção com Add Section Below e abra o seu More > Settings. Escolha Align text center em HTML classes e um Background cinzento claro no painel Style. Clique em Save.
  2. Clique em + na secção e escolha Image carousel.
  3. Clique em Select Image, pesquise a biblioteca, clique em três fotos e clique em Insert selected, e clique em Save.
  4. Clique novamente em + na secção e escolha Text; fica por cima do carrossel. Escreva "Slideshow" como Heading 2 e clique em Save.

Passo 4: guarde e pré-visualize

  1. Clique em Save na barra de ferramentas do construtor.
  2. Abra o menu de vista (o ícone de olho) e escolha Preview.

Para ir mais longe

Não mostrado no vídeo:

  • Legendas: ponha um Card na coluna e adicione um elemento Text com a legenda dentro dele. Depois adicione a Image dentro do cartão; fica por cima da legenda.
  • Fotos em tamanho real: defina Image link como o ficheiro em tamanho real e Image link target como New window.
  • Estilo: em cada imagem, defina Border radius como 4 e Drop shadow como 1 no painel Style para uma elevação suave.
  • Temporização da apresentação: defina Interval no carrossel, em milissegundos. Em Hide, marque Hide pagination control ou Hide prev/next buttons para remover esses controlos.
  • Galeria que se preenche sozinha: em Structure > Views > Add view, crie uma vista de média Image com uma exibição em bloco no formato Grid. Insira-a a partir do separador Drupal Views e os carregamentos novos aparecem sozinhos.

O que vê

O cabeçalho centrado abre a página, seguido de três fotos lado a lado. Na faixa cinzenta por baixo, a apresentação mostra uma foto de cada vez e passa à seguinte de cinco em cinco segundos.

Se não vir as fotos como mostradas

  • Insert selected não adiciona foto. A biblioteca ainda estava a recarregar depois de Apply filters, por isso o seu clique não marcou a foto. Espere até a grelha assentar, confirme que a foto mostra um visto e clique novamente em Insert selected.
  • A biblioteca de média está vazia. Ainda não há imagens carregadas ou o navegador de média não está configurado. Veja As imagens não carregam ou desaparecem.
  • As três fotos têm alturas diferentes. As suas proporções diferem. Corte-as nas mesmas proporções, carregue-as de novo e escolha as cópias novas.
  • As suas mudanças desapareceram depois de recarregar. Saiu da página antes de clicar em Save na barra de ferramentas do construtor. Se Save mostra um erro, veja As mudanças não guardam.

E a seguir?