Galería

El Campo de galería le permite a un editor entregarle a su widget un conjunto completo de imágenes de un solo movimiento: abra la biblioteca multimedia, seleccione diez fotos y listo. Dentro de los complementos maestros Creador de widgets, es el campo para cuadrículas de cartera, paredes fotográficas y carruseles, dondequiera que el recuento de imágenes pertenezca al propietario del sitio y no al autor del widget.

El campo Galería admite Condiciones como todo control, y sus imágenes se representan a través del Motor de plantilla de sintaxis de ramita, el mismo motor que impulsa {% for %} bucles y {% if %} verifica toda su plantilla. Ambas guías cubren la configuración y las limitaciones.

Debido a que el valor es una matriz de imágenes, la conexión a su HTML es un bucle, no un token. Un {% for %} block imprime el marcado de su imagen una vez por foto, en el orden en que la galería las contiene. Diez fotos representan diez elementos. Agregue dos más desde el panel y aparecerán dos elementos más, sin cambios de plantilla.

Qué hace el campo Galería #

• Abre la biblioteca multimedia de WordPress en modo de selección múltiple del panel Elementor.
• Almacena una serie ordenada de imágenes, cada uno llevando su id y url.
• Alimenta su plantilla a través de a {% for %} bucle, una iteración por imagen.
• Deja el diseño en tu CSS: el bucle imprime elementos, la cuadrícula los envuelve.
• Admite un conjunto de imágenes predeterminado y valores dinámicos, para que el widget pueda enviarse precargado.

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 Widget Builder. Nuestro ejemplo es un widget de portafolio de fotografía que representa una cuadrícula de 3 columnas, una celda por imagen de galería.

Cómo agregar un campo de Galería #

Encuentra el Galería campo en el panel a la izquierda del editor Widget Builder, agrupado con los otros campos multimedia.

Arrástrelo a una sección debajo del Contenido pestaña. Una vez que aterriza, las opciones del campo se abren a la izquierda.

Se explicaron las opciones del campo de galería #

• Etiqueta: el texto que se muestra encima del control en Elementor, por ejemplo “Imágenes de cartera”.
• Nombre: el identificador único únicamente para el campo, letras, números y guiones bajos. Su bucle se refiere a este nombre, por ejemplo portfolio_gallery.
• Predeterminado: un conjunto inicial de imágenes, por lo que la cuadrícula tiene algo que mostrar en el momento en que se elimina el widget.
• Dinámico: dejemos que el conjunto de imágenes provenga de una fuente dinámica en lugar de una selección cuidadosamente seleccionada.
• 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 la galería a su HTML con un bucle #

La Galería no tiene un token de valor único. Su valor es una matriz de elementos multimedia, por lo que la plantilla envuelve el marcado por imagen en a {% for %} bloque, misma forma que utiliza un repetidor:

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

• portfolio_gallery es el nombre del campo.
• img es una variable de bucle que inventas; llámalo cualquier cosa.
• Cada elemento expone sus propiedades mediante notación de puntos: {{ img.url }} pentru URL fișierului, {{ img.id }} para el ID del archivo adjunto.
• El bloque se imprime una vez por imagen, en el orden de la galería.

Una galería vacía gira cero veces, que suele ser el comportamiento que deseas. Sin embargo, el contenedor div todavía se representa y un contenedor vacío con relleno o un borde aparece como un misterioso cuadro gris en la página. Cuando una galería vacía no debe dejar nada atrás, guarda toda la manzana:

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

Cuidado con alcanzar un desnudo {{ portfolio_gallery }} por costumbre. En un campo de Medios que el acceso directo imprime una URL; aquí el valor es una lista de imágenes, y solo el bucle llega a ellas. Si su cuadrícula se vacía mientras el panel contiene claramente las fotos, faltan {% for %} casi siempre es por qué.

El diseño permanece en la pestaña CSS. Un contenedor de cuadrícula como grid-template-columns: repeat(3, 1fr) envuelve la cantidad de celdas que produce el bucle, por lo que doce fotos forman cuatro filas sin que ni la plantilla ni el editor piensen en ello.

Utilice el control Galería en Elementor #

Agregue su widget personalizado a una página en Elementor, recargando el editor si la página ya estaba abierta. El campo Galería se representa como un cuadro de agregar imágenes debajo de su etiqueta, con miniaturas del conjunto actual una vez que exista.

Haga clic en él y la biblioteca multimedia se abrirá en modo de selección múltiple. Elija el conjunto, confirme y la cuadrícula completará la vista previa. Al reabrir la galería, el editor puede agregar, eliminar y reordenar imágenes, y la página sigue el nuevo orden en la siguiente representación.

Casos de uso comunes #

• Portafolio y cuadrículas fotográficas, una celda por imagen, cuadrícula CSS que maneja las filas.
• Colecciones de cajas de luz donde cada elemento del bucle vincula su URL de tamaño completo para un script de caja de luz.
• Carruseles de imágenes, el bucle imprime diapositivas y la pestaña JS del widget ejecuta el control deslizante.
• Paredes con logo del cliente mantenido por el propietario del sitio sin tocar el widget.
• Galerías de antes y después o de proyectos que crecen con cada trabajo terminado.

Consejos para trabajar con el campo Galería #

• El bucle es la conexión. No existe una impresión directa útil de una galería; solo {% for %}…{% endfor %} llega a las imágenes.
• Usar {{ img.url }} dentro del bucle. Cada elemento es una matriz de medios y la notación de puntos selecciona la URL y el ID.
• Deje que CSS sea dueño del diseño. Una cuadrícula con columnas fijas absorbe cualquier número de imágenes; la plantilla sigue siendo un bloque de una sola figura.
• Proteja el envoltorio cuando esté vacío significa invisible. {% if portfolio_gallery %} evita que un widget sin llenar represente un contenedor vacío.
• Envíe un conjunto predeterminado. Incluso tres fotos de marcador de posición hacen que el widget sea legible en la primera entrega.
• Reordene en el panel, no en la plantilla. El bucle sigue el orden de la galería, así que arrastre las miniaturas y la página se reorganiza.

Preguntas frecuentes #

Envolviendo #

El campo Widget Builder Gallery convierte un widget en un contenedor que el propietario del sitio completa: selección múltiple en la biblioteca, a {% for %} coloque el bucle en la plantilla y CSS decida cómo fluye el conjunto. Para ranuras de una sola imagen, su hermano Campo de medios cubre héroes, avatares y logotipos con las mismas reglas de notación de puntos. Explora el resto del Widgets y extensiones de complementos maestros, y mira el página de precios por lo que incluye cada plan.