Introducción.
Advance Custom Field en adelante ACF, es una navaja suiza para WordPress, es un plugin gratuito pero que en su versión Pro es de pago. Nos permite crear campos personalizados en páginas, categorías, contenidos personalizados, taxonomías personalizadas, página de usuarios y un largo etc…
ACF nos permite a la hora de crear los diferentes campos poder seleccionar en qué contenido van a aparecer dichos campos y que tipo de campos podemos crear (numéricos, texto, media…).
En su versión Pro tenemos disponible un campo muy interesante que el de tipo galería. Este campo agrupará todas las imágenes que incluyamos en el backend de WordPress cuando estemos redactando un contenido de tal forma que cuando llamemos dinámicamente a dicho campo mostrará en el frontend todas las imágenes que hayamos incluido posteriormente.
¿Qué es lightbox en WordPress?
El efecto ligtbox en WordPress se puede aplicar a imágenes, vídeos o cualquier otro elemento, al hacer clic sobre el elemento esta se ampliará en una ventana modal o emergente ocupando gran parde de la pantalla y dejando el resto del contenido en segundo plano, es útil si queremos ampliar la imagen para que el usuario vea algún detalle de la misma o bien, si queremos centrar la atención del usuario en algo en concreto.
¿Cómo se visualiza en nuestro sitio web el efecto lightbox en WordPress?
Este campo que se visualizará en parte frontal de la web cuando lo llamemos dinámicamente pero tiene un inconveniente, y es que, si queremos usar un efecto lightbox a la hora de clicar en la imagen y que esta se abra ocupando gran parte de la pantalla, dejando el resto del contenido en segundo plano si estamos trabajando con Gutenberg el editor nativo de WordPress no es posible. Si usas un maquetador visual tipo Elementor, Divi o parecidos, estos cuentan con módulos o también widget que en sus respectivos ajustes si permiten llamar al campo dinámico y que se muestre en modo lighbox en la parte frontal de la web.
¿Qué necesitamos para usar lightbox en WordPress?
La solución como en el ejemplo que te detallo a continuación es usar un ligero plugin llamado Easy FancyBox, este plugin junto a unas pocas líneas de código nos van a permitir mostrar nuestras galerías con este efecto lightbox en Advance Custom Field Pro.
En esta demostración estoy usando lo siguiente:
- Tema Astra Pro.
- Plugin Easy FancyBox.
- Plugin Astra Theme Visual Hooks (visualiza los Hooks desde el front end).
- Contenido personalizado llamado «preparaciones» aunque lo puedes llamar como quieras.
- He creado un campo en ACF de tipo media y lo he llamado «galeria-preparacion».
- Se ha asignado en los ajustes de ACF que el campo «galeria-preparacion» se muestre en el contenido personalizado «preparaciones»
- Se han subido las imágenes en el campo
Paso uno, indicar al tema Astra dónde vamos a insertar el código para visualizar la galería usando los Hooks de Astra.
La idea es que la galería se muestre después del contenido de las entradas, para ello en los ajustes de Astra Pro añadimos un nuevo Hooks y le decimos que se muestre «entry_content_after» tal y como se muestre en la imagen.
Y aquí es el código que hay que poner:
<?php $images = get_field('galeria-preparacion_');
if( $images ): ?>
<div class="gallery">
<div class="galeria-flex">
<?php foreach( $images as $image ):
$content = '<div>';
$content .= '<a class="gallery_image" href="'. $image['url'] .'">';
$content .= '<img src="'. $image['sizes']['thumbnail'] .'" alt="'. $image['alt'] .'" />';
$content .= '</a>';
$content .= '</div>';
if ( function_exists('slb_activate') ){
$content = slb_activate($content);
}
echo $content;?>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>Paso dos, agregar CSS para mostrar la galería en grid.
Mediante CSS vamos darle estilo para mostrar nuestra galería en formato grid. Para ellos nos vamos a los ajustes de WordPress, apariencia > personalizar y pegamos el siguiente código.
/** MOSTRAR GALERIA ACF EN GRID **/
.galeria-flex {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}Conclusión.
Ahora en todas nuestras entradas, justo después del contenido se mostraran las galerías que previamente hayamos incluido a la hora de redactar nuestros artículos, basta con hacer click en cualquier imagen y se mostrará en ligthbox ocupando gran parte de la pantalla.
