Galeria

O Campo galeria deixa um editor entregar ao seu widget um conjunto inteiro de imagens em um movimento: abra a biblioteca de mídia, selecione dez fotos, feitas Dentro dos Complementos Mestres Construtor de widgets, é o campo para grades de portfólio, paredes de fotos e carrosséis, em qualquer lugar que a contagem de imagens pertença ao proprietário do site, e não ao autor do widget.

O campo Galeria suporta Condições como todo controle, e suas imagens são renderizadas através do Mecanismo de modelo de sintaxe dupla, o mesmo motor que alimenta {% for %} loops e {% if %} verificações em todo o seu modelo Ambos os guias cobrem configuração e limitações.

Como o valor é uma matriz de imagens, a conexão com o seu HTML é um loop, não um token A {% for %} block imprime sua marcação de imagem uma vez por foto, na ordem em que a galeria as mantém Dez fotos renderizam dez itens Adicione mais dois do painel e mais dois itens aparecem, sem alterações de modelo.

O que o campo Galeria faz #

• Abre a biblioteca de mídia WordPress no modo multi-seleção do painel Elementor.
• Armazena uma matriz ordenada de imagens, cada um carregando seu id e url.
• Alimenta seu modelo através de um {% for %} laço, uma iteração por imagem.
• Deixa o layout para o seu CSS: o laço imprime itens, a grade os envolve.
• Suporta um conjunto de imagens padrão e valores dinâmicos, assim que o widget pode enviar pré-preenchido.

Se você é novo na construção de widgets, comece com o Visão geral do Widget Builder primeiro.

Antes de começar #

• WordPress com Elementor instalado e ativo.
• Complementos Mestres para Elementor instalado e ativo. Novo no plugin? veja o guia instalação.
• Um widget personalizado aberto no editor Widget Builder Nosso exemplo é um widget de portfólio de fotografia que renderiza uma grade de 3 colunas, uma célula por imagem de galeria.

Como adicionar um campo Galeria #

Encontre o Galeria campo no painel à esquerda do editor Widget Builder, agrupado com os outros campos de mídia.

Arraste-o para uma seção abaixo do Conteúdo aba. Uma vez aterrada, as opções do campo abrem à esquerda.

Opções de campo da galeria explicadas #

• Etiqueta: o texto mostrado acima o controle em Elementor, por exemplo “Portfolio Images”.
• Nome: o identificador exclusivo para o campo, letras, números e sublinhados apenas Seu loop refere-se a este nome, por exemplo portfolio_gallery.
• Predefinição: um conjunto inicial de imagens, para que a grade tenha algo para mostrar no momento em que o widget é descartado.
• Dinâmico: permite que o conjunto de imagens venha de uma fonte dinâmica, em vez de uma seleção escolhida a dedo.
• Descrição, Mostrar etiqueta, Separador: as configurações de exibição padrão, além de condições para mostrar o campo somente quando outro controle tiver um determinado valor.

Conecte a Galeria ao seu HTML com um loop #

A Galeria não possui token de valor único Seu valor é uma matriz de itens de mídia, portanto, o modelo envolve a marcação por imagem em um {% for %} bloco, a mesma forma que um Repetidor usa:

<div class="portfolio-grid">
  {% for img in portfolio_gallery %}
  <figure class="portfolio-cell">
    <img src="{{ img.url }}">
  </figure>
  {% endfor %}
</div>

• portfolio_gallery é o Nome do campo.
• img é uma variável de loop que você inventa; chame de qualquer coisa.
• Cada item expõe suas propriedades por notação de ponto: {{ img.url }} para o URL do arquivo, {{ img.id }} para o ID do anexo.
• O bloco imprime uma vez por imagem, na ordem da galeria.

Uma galeria vazia faz loop zero vezes, que geralmente é o comportamento que você deseja O div do wrapper ainda renderiza, porém, e um recipiente vazio com preenchimento ou uma borda aparece como uma misteriosa caixa cinza na página Quando uma galeria vazia não deve deixar nada para trás, guarde todo o bloco:

{% if portfolio_gallery %}
<div class="portfolio-grid"> ... </div>
{% endif %}

Cuidado para alcançar um nu {{ portfolio_gallery }} fora do hábito Em um campo de Mídia que o atalho imprime uma URL; aqui o valor é uma lista de imagens, e apenas o loop chega a elas Se sua grade renderiza vazia enquanto o painel claramente segura fotos, a falta {% for %} é quase sempre o porquê.

Layout permanece na guia CSS. Um contêiner de grade como grid-template-columns: repeat(3, 1fr) envolve quantas células o loop produzir, portanto, doze fotos formam quatro linhas sem que o modelo ou o editor pensem sobre isso.

Use o controle Galeria no Elementor #

Adicione seu widget personalizado a uma página no Elementor, recarregando o editor se a página já estiver aberta O campo Galeria é renderizado como uma caixa de imagens adicionais sob seu rótulo, com miniaturas do conjunto atual, uma vez que exista.

Clique nele e a biblioteca de mídia será aberta no modo de seleção múltipla Escolha o conjunto, confirme e a grade preencherá a visualização A reabertura da galeria permite que o editor adicione, remova e reordene imagens, e a página segue a nova ordem na próxima renderização.

Casos de uso comum #

• Portfólio e grades fotográficas, uma célula por imagem, grade CSS que trata das linhas.
• Colecções Lightbox onde cada item de loop vincula seu URL em tamanho real para um script lightbox.
• Carrosséis imagem, o loop imprime slides e a guia JS do widget executa o controle deslizante.
• Paredes do logotipo do cliente mantido pelo proprietário do site sem tocar no widget.
• Antes e depois ou galerias de projetos que crescem a cada trabalho terminado.

Dicas para trabalhar com o campo Galeria #

• O laço é a ligação. Não há impressão direta útil de uma galeria; apenas {% for %}…{% endfor %} alcança as imagens.
• Usar {{ img.url }} dentro do laço. Cada item é uma matriz de mídia e a notação de ponto seleciona a URL e o ID.
• Deixe o CSS possuir o layout. Uma grade com colunas fixas absorve qualquer contagem de imagens; o modelo permanece um único bloco de figuras.
• Guarde o invólucro quando vazio significa invisível. {% if portfolio_gallery %} evita que um widget não preenchido renderize um contêiner vazio.
• Envie um conjunto padrão. Até mesmo três fotos de espaço reservado tornam o widget legível na primeira gota.
• Reordenar no painel, não no modelo. O loop segue a ordem da galeria, portanto arraste as miniaturas e a página se reorganizará.

Perguntas frequentes #

Embrulhando #

O campo Galeria do Construtor de Widgets transforma um widget em um contêiner que o proprietário do site preenche: multisselecionar na biblioteca, a {% for %} faça um loop no modelo e CSS decidindo como o conjunto flui. Para slots de imagem única, seu irmão é Campo mídia abrange heróis, avatares e logotipos com as mesmas regras de notação de pontos Explore o resto do Widgets e extensões Master Addons, e veja o página preços para o que cada plano inclui.