O Campo mídia conecta um widget personalizado à biblioteca de mídia do WordPress, solte o campo e qualquer pessoa que edite o widget no Elementor obtém o familiar seletor de imagens: clique, escolha ou carregue, feito Dentro dos complementos mestres Construtor de widgets, é o campo por trás de imagens de heróis, avatares, logotipos e todos os outros slots de imagem única que um widget precisa.
Como todo campo Widget Builder, o Media suporta Condições para visibilidade do painel. Seu token é renderizado através do Mecanismo de modelo de sintaxe dupla, que imprime o URL do arquivo automaticamente, então <img src="{{ photo }}"> apenas funciona Ambos os guias cobrem os detalhes.
Ao contrário de um campo de texto, o valor do campo Mídia não é uma string É uma matriz que carrega o arquivo url, id, alt, e mais, e seu modelo alcança cada peça com notação de ponto Há um atalho amigável: imprimir o campo dá diretamente a URL. E um hábito que vale a pena construir desde o primeiro dia, guardando a marcação com um {% if %} portanto, um campo vazio não deixa nenhuma imagem quebrada para trás.
O que o campo Media faz #
- Abre a biblioteca de mídia WordPress no painel Elementor, carregue ou escolha arquivos existentes.
- Armazena a seleção como uma matriz com
url,id, ealtentre suas chaves. - Imprime o URL em um token direto:
{{ hero_image }}emite o URL do arquivo como um atalho. - Expõe cada propriedade por notação de ponto:
{{ hero_image.url }},{{ hero_image.id }},{{ hero_image.alt }}. - Pode filtrar a biblioteca por tipo de mídia, imagem, vídeo ou áudio e suporta valores dinâmicos.
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 herói restaurante com um único campo de Mídia nomeado
hero_imageisso preenche o banner.
Como adicionar um campo Mídia #
No editor Widget Builder, encontre o Mídia campo no painel à esquerda, agrupado com os outros campos de mídia.
Arraste-o para uma seção abaixo do Conteúdo tab; uma imagem é conteúdo, mesmo quando acaba como um fundo CSS Uma vez que aterrissa, as opções do campo abrem à esquerda.
Opções de campo de mídia explicadas #
- Etiqueta: o texto mostrado acima é o escolhido em Elementor, por exemplo “Hero Image”.
- Nome: o identificador exclusivo apenas para o campo, letras, números e sublinhados, por exemplo
hero_image. - Predefinição: um arquivo inicial como um par de URL e ID, para que o widget caia na página que já parece concluída.
- Tipo de mídia: filtra o que a biblioteca oferece, imagem, vídeo ou áudio, evitando que os editores conectem um mp3 a uma tag img.
- Dinâmico: permite que o valor venha de uma fonte dinâmica em vez de uma escolha fixa.
- 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 o campo Mídia ao seu modelo #
O valor é uma matriz, e as regras do modelo seguem a partir disso O token direto é um atalho para a necessidade mais comum:
<img src="{{ hero_image }}">Imprimir um valor de array gera diretamente o seu url key, então isso renderiza o URL do arquivo O formulário explícito faz o mesmo e lê mais claramente ao lado de seus irmãos:
<img src="{{ hero_image.url }}" alt="{{ hero_image.alt }}">
<!-- {{ hero_image.id }} holds the attachment ID -->Agora, o hábito que separa widgets arrumados de widgets de ícones quebrados: a guarda vazia Um campo de mídia sem nada escolhido renderiza atributos vazios e <img src=""> mostra como uma imagem quebrada Envolva a marcação:
{% if hero_image.url %}
<img src="{{ hero_image.url }}" alt="{{ hero_image.alt }}">
{% endif %}O campo funciona na guia CSS também Um slot de fundo é uma linha:
.hero-banner {
background-image: url('{{ hero_image }}');
}Cuidado com o texto alternativo passando intocado. {{ hero_image.alt }} imprime o que quer que a biblioteca de mídia seja mantida, e as bibliotecas estão cheias de imagens com campos alt vazios O guarda mantém o atributo presente, mas não pode inventar o texto Os widgets construídos para os clientes merecem uma nota dizendo aos editores para preencher o texto alt na biblioteca.
Use o controle de mídia no Elementor #
Adicione seu widget personalizado a uma página no Elementor, recarregando o editor se a página já estiver aberta O campo Mídia é renderizado como a caixa padrão do seletor de imagens do Elementor sob seu rótulo.
Clique na caixa e a biblioteca de mídia do WordPress é aberta, filtrada para o tipo de mídia definido. Escolha ou carregue um arquivo, confirme e a visualização será atualizada no momento em que a seleção chegar.
Trocar a imagem mais tarde é o mesmo clique Removê-la esvazia o valor, que é exatamente o seu caso {% if %} capas guarda.
Casos de uso comum #
- Imagens de herói e banner, como uma tag img ou um fundo CSS.
- Avatares e tiros na cabeça em widgets de testemunho e de equipe.
- Logotipos em widgets de cabeçalho, rodapé e faixa de cliente.
- Miniaturas de cartão onde cada instância do widget apresenta uma imagem.
- Fundos de seção decorativa passar
background-imagena guia CSS.
Dicas para trabalhar com o campo Mídia #
- Sempre proteja com
{% if hero_image.url %}. Caso contrário, um campo não definido renderiza um src vazio e um ícone de imagem quebrada. - Imprimir o alt.
alt="{{ hero_image.alt }}"não custa nada e carrega o texto alternativo da biblioteca em sua marcação. - Use o token direto para fundos CSS.
url('{{ hero_image }}')mantém a guia CSS legível. - Defina uma imagem padrão. Um widget que cai na página com uma foto real se vende; um espaço reservado cinza não.
- Filtrar com Tipo de Mídia. Se o slot for uma imagem, diga, e a biblioteca não oferecerá vídeos.
- Lembre-se de que o atalho é somente URL. Qualquer propriedade que não seja a URL precisa de notação de ponto; não há atalho para
idoualt.
Perguntas frequentes #
Qual é o campo Mídia no Master Addons Widget Builder?
O campo Media adiciona um selecionador de biblioteca de mídia WordPress a um widget Elementor personalizado O arquivo selecionado é armazenado como uma matriz com url, id, e alt chaves, através das quais seu modelo é impresso {{ field_name }} para o URL ou {{ field_name.prop }} para uma propriedade específica.
O que {{hero_image }} imprime sozinho?
O URL do arquivo. imprimir um valor de array gera diretamente seu url chave quando existir, então <img src="{{ hero_image }}"> funciona como um atalho Para qualquer outra coisa, use a notação de ponto: {{ hero_image.id }}, {{ hero_image.alt }}.
Como faço para parar uma imagem quebrada quando nada é selecionado?
Enrole a marcação em um guarda: {% if hero_image.url %}...{% endif %}. Caso contrário, um campo de mídia não definido renderiza atributos vazios e um atributo src vazio é exibido como uma imagem quebrada na maioria dos navegadores.
Posso usar o campo Mídia como plano de fundo CSS?
Sim. Na guia CSS, escreva background-image: url('{{ hero_image }}'); no elemento que deve levar a foto O token resolve para o URL do arquivo lá assim como faz em HTML.
O campo pode aceitar vídeos ou áudio?
A opção Tipo de mídia filtra a biblioteca para imagem, vídeo ou áudio. Defina-o para corresponder ao que seu modelo espera, para que um slot de identificação receba apenas arquivos de imagem.
Qual é a diferença entre Mídia e Galeria?
A mídia contém um arquivo; Galeria contém um conjunto ordenado de imagens que seu modelo imprime com a {% for %} loop. Uma foto de herói é um campo de mídia; uma grade de portfólio é uma Galeria.
Embrulhando #
O campo Widget Builder Media é o cavalo de batalha de imagem única Um selecionador de biblioteca no painel, um atalho de URL no modelo, notação de ponto para id e alt, e um {% if %} guarde entre seu widget e um ícone de imagem quebrada. Quando uma imagem se tornar muitas, suba para Campo galeria e seu loop. Explore o resto do Widgets e extensões Master Addons, e veja o página preços para o que cada plano inclui.
