Vamos a tratar de como añadir un encabezado con la imagen predeterminada para el archivo de categorías, cada categoría tendrá su imagen predeterminada.
Para esto solo se necesita de un plugin gratuito, aunque también se puede hacer con otros como por ejemplo el HappyFiles.
El añadir lightbox con sus efectos visuales parece una tarea difícil y que requiere el uso de un nuevo plugin, pero nada más lejos de la realidad, con Oxygen lo tenemos muy fácil, realmente asombrosamente fácil con dos líneas de código HTML y pocas más de código JavaScript, aquí mostramos como hacerlo.
Dependiendo de las necesidades o requerimientos, puede ser quieras añadirlo por defecto a todas las imágenes, solamente a algunas o solamente a las que pertenezcan a cierta característica o plantilla. Sea cual sea el caso, el procedimiento es el mismo, simplemente variando la posición del código, posicionándolo dentro de la plantilla principal, normalmente la que contenga el header con el menú y el footer o bien dentro de una plantilla secundaria para que solo sea aplicado a las imágenes que contengan las entradas o páginas que irán manejadas en base a esa plantilla.
Aquí vamos a explicar el proceso siguiendo el caso de sea aplicable a todas las imágenes de la página pero que serán discriminadas por tener o no cierta clase.
Paso 1 - Carga de archivos
Se añade un Code-Bolck en la parte más alta del panel de estructura, o bien se aprovecha uno ya existente, en la parte de HTML/PHP se añaden las siguientes dos líneas para cargar vía CDN los archivos Fancybox, también se pueden descargar y cargarlos localmente.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
Paso 2 - Código JavaScript
Se añade un Code-Bolck en la parte más alta del panel de estructura, o bien se aprovecha uno ya existente, en la parte de HTML/PHP se añaden las siguientes dos líneas para cargar vía CDN los archivos Fancybox, también se pueden descargar y cargarlos localmente.
window.addEventListener('load', ()=>{
if (window.angular) return;
const imgsInst = document.querySelectorAll('.imgLbx')
imgsInst.forEach((imgI)=>{
imgI.dataset.fancybox= "iframe"
imgI.dataset.type= "image"
imgI.dataset.src= imgI.src
})
})
Procedimiento
El código JavaScript lo que hace es buscar todas las imágenes que tengan la clase "imgLbx" y le añadirá los atributos necesarios para el funcionamiento del LightBox, como ya habrás imaginado, tendrás que añadir esa clase a todas las imágenes que quieras que tengan ese efecto.
Si lo que se pretende es que todas y cada una de las imágenes que estén dentro de la página o entrada, y estas fueron editadas directamente en el editor de WordPress, en el código anterior habrá que sustituir la tercera línea por esta otra que se muestra justo abajo.
const imgsInst = document.querySelectorAll('.text-post-container img')
Pero si lo que se quiere es añadir el efecto a las imágenes que han sido añadidas a las entradas y/o páginas editadas con Oxygen se reemplazará la misma línea mencionada anteriormente con la siguiente:
const imgsInst = document.querySelectorAll('.ct-inner-content img')
Y ya está, ya tienes todo listo para incluir el efecto LightBox a tu página sin necesidad de añadir más plugins al sitio.
Como siempre esperamos tus comentarios y por supuesto si tienes alguna duda o necesitas ayuda puedes contactar por nuestro grupo de Telegram o dejando un comentario.
Nos vemos en la próxima. 👌