Existen multitud de plugin que dan dinamismo y funcionalidad a las galerías, como Jquery Lightbox o la propia que se integra en JetPack.

Pero en este artículo vamos a ver cómo integrar Fuidbox de forma manual, un módulo para galerías WordPress que destaca por su sencillez y elegancia.

En la página principal de Fuidbox podéis ver el efecto aplicado a varias imágenes, las cuales se amplían con un suave zoom al hacer clic y vuelven a su estado inicial haciendo otro clic.

Para integrarlo en nuestra plantilla de WordPress debemos descargar los archivos desde el enlace a GitHub o cdnjs. En el artículo lo haremos desde GitHub.

Una vez dentro de GitHub localizamos el botón Clone or Download y descargamos el módulo Fluidbox en ZIP.

Una vez extraídos los archivos, los que nos interesan se encuentran en la carpeta Dist, donde hay otras dos carpetas: css y js.

Y copiamos los archivos:

• fluidbox.min.css
• jquery.fluidbox.min.js

Tanto el archivo css como el JavaScript debemos copiarlos en la plantilla de nuestro proyecto web, cada uno dentro de su sub-carpeta corresponiente (/css para el archivo de estilos y /js para el JavaScript). Muy importante que estén en las rutas indicadas ya que vamos a hacer referencia a ellas más adelante y no funcionarán si los archivos se encuentran en otro sitio. Ahora creamos un nuevo archivo al que llamaremos por ejemplo: iniciar-fluidbox.js. Copiamos dentro el siguiente código y lo guardamos también dentro de la carpeta /js en nuestra plantilla principal, junto al jquery.fluidbox.min.js.

2. Código javascript para iniciar Fluidbox.

$ = jQuery.noConflict();

$(document).ready(function(){
    $('.gallery a').each(function(){
        $(this).attr({'data-fluidbox' : ''});
    });
 
    if($('[data-fluidbox]').length > 0){
        $('[data-fluidbox]').fluidbox();
    }
});

Esto hará que el efecto Fluidbox se aplique a todos los elementos <a href> dentro de la clase .gallery que es la usada por las galerías WordPress, con lo cual se aplicará a cada una de las imágenes.

Seguidamente accedemos al archivo functions.php de nuestra plantilla y más o menos al final del código añadimos la siguiente función para llamar tanto al css de fluidbox, como a los JavaScript creados.

Código PHP para el archivo functions.php

<?php
    function cargar_fluidbox(){
        wp_enqueue_style("fluidboxcss", get_template_directory_uri()."/css/fluidbox.min.css", array(), "2.0.0");
        wp_enqueue_script("fluidboxjs", get_template_directory_uri()."/js/jquery.fluidbox.min.js", array(), "2.0.0", true);
        wp_enqueue_script("iniciarfluidbox", get_template_directory_uri()."/js/iniciar-fluidbox.js", array(), "1.0.0", true);
    }
    add_action("wp_enqueue_scripts", "cargar_fluidbox");
?>

Y eso es todo. Ahora tus galerías deberían disfrutar del efecto Fluidbox.

Si no te funciona, revisa que todos los nombres de archivos estén correctos y en las rutas especificadas anteriormente. Además comprueba que las imágenes de la galería apunten a Archivo multimedia, de lo contrario es posible que no funcionen.

Las nuevas cámaras con altas resoluciones generan imágenes pesadas, rondando los 10MB, y el problema se nos presenta cuando estas imágenes tenemos que usarlas en páginas web o enviarlas por correo electrónico.

Tenemos dos opciones, modificar el tamaño y/o formato de cada imagen con el tiempo que nos llevaría, o usar un programa que automatice todo el proceso.

Para el tratamiento de imágenes y retoque fotográfico uso GIMP, un software libre, gratuito y multiplataforma, por lo que puedes obtenerlo para Linux, Windows o Mac.

Web de GIMP

Digamos que es la alternativa libre a Photoshop y a no ser que te dediques profesionalmente al diseño gráfico, es una opción totalmente válida, al menos para mí, que solo necesito diseñar algunos banners o retocar imágenes para mis páginas web.

Pero la magia del tratamiento múltiple de imágenes no la realiza GIMP exactamente, si no un plugin o add-on que necesitamos implementarle.

Este plugin se llama Davi’s Batch Processor:

En Ubuntu podemos instalarlo buscándolo en el centro de Software por Repository of optional extensions for GIMP (gimp-plugin-registry). Para GIMP en Windows he encontrado este enlace: http://downloads.tomsguide.com/David-s-Batch-Processor-GIMP-plugin,0301-51556.html

Y abrirlo desde GIMP en el menú Filtros > Batch > Batch Process…

Para hacer un ejemplo, tengo una carpeta con 74 imágenes. Cada imagen tiene un tamaño de 4298×3264 píxeles y un pesa entre 5 y 10 Megabytes.

Intento escalar una de las imágenes para saber la proporción exacta a la que tengo que reducir el ancho y alto de cada imagen. Suponiendo que quiero reducir a un ancho máximo de 1000 píxeles, resulta que cada imagen ha de escalarse a 1000×662 píxeles:

Añadimos las imágenes a David’s Batch Processor, haciendo clic en Add Files…

Nos vamos a la pestaña Resize:

Marcamos la casilla Enable y la opción Absolute. Y especificamos el ancho (1000) y el alto (662) de la imagen.

En la pestaña Rename podemos especificar el directorio en el que se guardarán las nuevas imágenes editadas, así como modificar el nombre de estas, añadiéndoles un texto al principio o al final del nombre del archivo. Las vamos a dejar en el mismo directorio pero le pondremos al principio del nombre «editada» para reconocerlas mejor.

En la pestaña Output podemos cambiar el formato de la imagen, por defecto las convierte a BMP, lo cambiamos a JPG:

Ahora nos pregunta la compresión de JPG, lo normal para no perder calidad visible es dejarlo entre el 70 y 100%.

Lo podemos dejar en 0.75, que es el equivalente al 75%:

Hacemos clic en Start y esperamos a que termine el proceso:

Dependiendo del procesador del PC tardará más o menos. En este ejemplo ha tardado un par de minutos aproximadamente. Y ya tenemos las imágenes optimizadas para subir a una web o enviar por correo electrónico.