Medios

El Campo de medios conecta un widget personalizado a la biblioteca multimedia de WordPress. Deje el campo y cualquiera que edite el widget en Elementor obtendrá el selector de imágenes familiar: haga clic, recoja o cargue, listo. Dentro de los complementos maestros Creador de widgets, es el campo detrás de las imágenes de héroes, avatares, logotipos y cualquier otra ranura de imagen única que necesite un widget.

Como todos los campos de Widget Builder, Media es compatible Condiciones para visibilidad del panel. Su token se representa a través del Motor de plantilla de sintaxis de ramita, que imprime la URL del archivo automáticamente, entonces <img src="{{ photo }}"> sólo funciona. Ambas guías cubren los detalles.

A diferencia de un campo de texto, el valor del campo Medios no es una cadena. Es una matriz que lleva el archivo url, id, alt, y más, y tu plantilla llega a cada pieza con notación de puntos. Hay un atajo amigable: imprimir el campo directamente te da la URL. Y un hábito que vale la pena desarrollar desde el primer día, protegiendo el marcado con un {% if %} entonces un campo vacío no deja ninguna imagen rota.

Qué hace el campo de los medios #

• Abre la biblioteca multimedia de WordPress desde el panel Elementor, cargue o elija archivos existentes.
• Almacena la selección como una matriz con url, id, y alt entre sus claves.
• Imprime la URL en un token directo: {{ hero_image }} genera la URL del archivo como un acceso directo.
• Expone cada propiedad mediante notación de puntos: {{ hero_image.url }}, {{ hero_image.id }}, {{ hero_image.alt }}.
• Puede filtrar la biblioteca por tipo de medio, imagen, vídeo o audio, y admite valores dinámicos.

Si es nuevo en la creación de widgets, comience con Descripción general del creador de widgets primero.

Antes de empezar #

• WordPress con Elementor instalado y activo.
• Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Ver el guía de instalación.
• Un widget personalizado abierto en el editor de Widget Builder. Nuestro ejemplo es un widget de héroe de restaurante con un único campo de medios llamado hero_image eso llena la pancarta.

Cómo agregar un campo Medios #

En el editor Widget Builder, busque Medios campo en el panel de la izquierda, agrupado con los demás campos multimedia.

Arrástrelo a una sección debajo del Contenido pestaña; una imagen es contenido, incluso cuando termina como fondo CSS. Una vez que aterriza, las opciones del campo se abren a la izquierda.

Se explicaron las opciones de campo de medios #

• Etiqueta: el texto que se muestra encima del selector en Elementor, por ejemplo “Imagen de héroe”.
• Nombre: el identificador único para el campo, letras, números y guiones bajos únicamente, por ejemplo hero_image.
• Predeterminado: un archivo inicial como un par de URL e ID, por lo que el widget cae en la página que ya parece terminada.
• Tipo de medio: filtra lo que ofrece la biblioteca, imagen, video o audio, evitando que los editores conecten un mp3 a una etiqueta img.
• Dinámico: dejemos que el valor provenga de una fuente dinámica en lugar de una selección fija.
• Descripción, Mostrar etiqueta, Separador: la configuración de visualización estándar, más las condiciones para mostrar el campo solo cuando otro control tiene un valor determinado.

Conecte el campo Medios a su plantilla #

El valor es una matriz y las reglas de la plantilla se derivan de ello. El token directo es un atajo para la necesidad más común:

<img src="{{ hero_image }}">

La impresión de un valor de matriz genera directamente su url clave, entonces esto representa la URL del archivo. La forma explícita hace lo mismo y lee más claramente junto a sus hermanos:

<img src="{{ hero_image.url }}" alt="{{ hero_image.alt }}">
<!-- {{ hero_image.id }} holds the attachment ID -->

Ahora el hábito que separa los widgets ordenados de los widgets con iconos rotos: el guard vacío. Un campo de medios sin nada elegido representa atributos vacíos y <img src=""> se muestra como una imagen rota. Envuelva el marcado:

{% if hero_image.url %}
<img src="{{ hero_image.url }}" alt="{{ hero_image.alt }}">
{% endif %}

El campo también funciona en la pestaña CSS. Una ranura de fondo es una línea:

.hero-banner {
  background-image: url('{{ hero_image }}');
}

Tenga cuidado con el texto alternativo que pasa intacto. {{ hero_image.alt }} imprime todo lo que contiene la biblioteca multimedia y las bibliotecas están llenas de imágenes con campos alternativos vacíos. El guardia mantiene el atributo presente pero no puede inventar el texto. Los widgets creados para clientes merecen una nota que indique a los editores que completen texto alternativo en la biblioteca.

Utilice el control de medios en Elementor #

Agregue su widget personalizado a una página en Elementor, recargando el editor si la página ya estaba abierta. El campo Medios se representa como el cuadro selector de imágenes estándar de Elementor debajo de su etiqueta.

Haga clic en el cuadro y se abrirá la biblioteca multimedia de WordPress, filtrada al tipo de medio que establezca. Recoja o cargue un archivo, confirme y la vista previa se actualizará en el momento en que llegue la selección.

Cambiar la imagen más tarde es el mismo clic. Al eliminarlo se vacía el valor, que es exactamente el caso de su {% if %} cubiertas protectoras.

Casos de uso comunes #

• Imágenes de héroes y pancartas, como una etiqueta img o un fondo CSS.
• Avatares y disparos a la cabeza en widgets testimoniales y de equipo.
• Logotipos en widgets de encabezado, pie de página y tira de cliente.
• Miniaturas de tarjetas donde cada instancia de widget presenta una imagen.
• Fondos de sección decorativos pasar background-image en la pestaña CSS.

Consejos para trabajar con el campo de los medios #

• Siempre guarda con {% if hero_image.url %}. De lo contrario, un campo no configurado representa un src vacío y un ícono de imagen rota.
• Imprime el alt. alt="{{ hero_image.alt }}" no cuesta nada y lleva el texto alternativo de la biblioteca a su marcado.
• Utilice el token directo para fondos CSS. url('{{ hero_image }}') mantiene legible la pestaña CSS.
• Establezca una imagen predeterminada. Un widget que aparece en la página con una foto real se vende solo; un marcador de posición gris no.
• Filtrar con tipo de medio. Si la tragamonedas es una imagen, dígalo y la biblioteca no ofrecerá videos.
• Recuerde que el acceso directo es solo para URL. Cualquier propiedad que no sea la URL necesita notación de puntos; no hay ningún acceso directo para id o alt.

Preguntas frecuentes #

Envolviendo #

El campo Widget Builder Media es el caballo de batalla de una sola imagen. Un selector de biblioteca en el panel, un acceso directo de URL en la plantilla, notación de puntos para id y alt, y un {% if %} guardia entre su widget y un ícono de imagen rota. Cuando una imagen se vuelve mucha, sube al Campo de galería y su bucle. Explora el resto del Widgets y extensiones de complementos maestros, y mira el página de precios por lo que incluye cada plan.