Nuevo efecto de superposición de imágenes para el blog

Tras la migración de La Bitácora del Tigre a un nuevo alojamiento, he incorporado algunas novedades a la gestión de las imágenes del blog. De la primera –la adición de miniaturas a todas las entradas, gracias al script Get The Image de Justin Tadlock– ya me ocupé hace unos cuantos días, en el artículo Mejoras gráficas para el blog. Corresponde ahora tratar de la segunda, que ha consistido en la sustitución del script que hasta la fecha gobernaba los efectos de “overlay” o superposición de las imágenes.

Desde el mes de marzo de 2007, he utilizado diversas variantes de los efectos Lightbox, Lightbox 2 y jQuery Lightbox en las galerías de fotos, a fin de mostrar las fotografías a tamaño completo mediante una ventana modal que se superpone a la página y permite que las imágenes individuales puedan desplegarse sin que el usuario se vea obligado a cambiar de página. También sobre estos efectos he escrito algunos artículos, como por ejemplo Una buena combinación con las galerías de imágenes de WordPress y Mejora en los efectos de superposición del blog, en los que describía el paso por diversas encarnaciones de los citados efectos, como los plugins Lightbox-2 for WordPress, Lightbox 2, WP jQuery Lightbox, WP Lightbox 2, etc.

Aunque no tengo ninguna queja sustancial con respecto al plugin WP Lightbox 2, que hasta hace apenas diez días se encargaba de dar vida en La Bitácora del Tigre al efecto de «overlay», lo cierto es que mi naturaleza bloguera siempre se encuentra inquieta, insatisfecha y deseosa de probar nuevas alternativas. Así que en cuanto tuve conocimiento del efecto prettyPhoto, que su propio autor considera como «un clon de jQuery Lightbox», me dispuse a probarlo en carne propia.

No había tenido conocimiento de la existencia de prettyPhoto (al menos de forma consciente, porque es probable que me hubiera topado con él en más de una página) hasta que la profesora responsable del sitio web del Colegio Público de Obanos, centro para el cual realicé una instalación de WordPress multisitio allá por el mes de octubre del año pasado, me llamó para hacerme una consulta. Esta compañera estaba interesada en integrar en el blog las colecciones de fotos que su centro tiene alojadas en Picasa, y para ello me pidió consejo sobre algún plugin que fuera capaz de conectarse con su cuenta en dicho servicio y leer tanto las fotografías individuales como las galerías que allí residen.

Después de algunas investigaciones, di con una extensión llamada Shashin, con la que llevé a cabo un buen número de pruebas (algunas pueden verse en esta página), antes de considerarla apropiada para el fin que la profesora pretendía darle. Entre todas las funcionalidades del plugin, una de las que más llamaron mi atención fue la forma en que presenta la superposición, mediante un script que no solo abre las imágenes de una galería en la consabida ventana modal, sino que además genera, en la parte inferior de la imagen, una serie de miniaturas de sus compañeras de galería, todo ello de una manera muy vistosa y elegante.

Ese efecto es el rasgo más distintivo de prettyPhoto, y el que más me interesaba para mi propio blog. Naturalmente, Shashin no era la vía más adecuada para ponerlo en práctica, ya que mis galerías de fotos no están alojadas en Picasa (bueno, algunas sí, como demuestra la página de prueba que he citado en el párrafo anterior), de modo que tuve que buscar en el repositorio de WordPress para encontrar el plugin que mejor se ceñía a mis objetivos.

No me hicieron falta demasiados experimentos para decidir que la extensión más adecuada era prettyPhoto Media, ya que tiene varias características que se ajustan como anillo al dedo a mis gustos y necesidades:

• El efecto de superposición es bastante ligero y además compatible con una gran variedad de navegadores.
• El plugin se integra perfectamente con las galerías fotográficas de WordPress. Al pulsar sobre una miniatura, se abre la correspondiente imagen a tamaño completo.
• Tiene un interfaz de configuración potente y flexible.
• Incorpora seis temas o disposiciones gráficas diferentes para presentar las imágenes. De ellos, el tema por defecto es el más recomendable, pues sus elementos de navegación son flechas sin ninguna indicación textual, lo cual evita tener que editar las imágenes de los botones «Next», «Previous», a fin de traducirlas.
• Se pueden configurar los textos que indican el número de imágenes que forman la galería y el lugar que una foto determinada ocupa dentro de la secuencia de fotos.
• Cuenta con la posibilidad de añadir iconos para recomendar las fotografías en diversas redes sociales. No es una funcionalidad que a mí me apasione (y de hecho no la he activado), pero sé que estos chismes tienen sus partidarios acérrimos.
• Las fotografías se pueden redimensionar y ampliar más allá de su tamaño predefinido, mediante un manejador situado en el ángulo superior derecho.
• Cuenta con un efecto de «slideshow» o pase de diapositivas, que se puede ejecutar a voluntad del usuario.
• Es traducible mediante los procedimientos estándar de WordPress. He traducido el plugin al español, aunque todavía no he enviado la traducción a su autor para que la incorpore a nuevas versiones.
• Se integra perfectamente con el plugin Cleaner Gallery, que yo utilizo, junto con el tema Hybrid, para formatear correctamente las galerías de imágenes de WordPress.

El plugin no solo se puede utilizar con galerías de miniaturas enlazadas a sus correspondientes imágenes a tamaño completo, sino que también puede abrir imágenes individuales con el efecto prettyPhoto. Ahora bien, en este caso es necesario añadir de forma manual el atributo rel=»prettyPhoto» a todas las imágenes, lo cual es un incordio monumental en un blog como el mío, con varios cientos de entradas con imágenes (en este sentido, prettyPhoto Media resulta inferior a WP Lightbox 2 y otros plugins semejantes, que permiten añadir el atributo rel=»lightbox» automáticamente).

En busca de una solución que no me obligara a pasar por las horcas caudinas de la edición manual de al menos un par de centenares de artículos, acudí a la página del creador del plugin, donde encontré un comentario de Linuxgine que proporcionaba, en forma de función de PHP, una solución al problema. Enseguida añadí el código propuesto a mi plugin de funciones, pero me di cuenta de que la solución no era del todo satisfactoria. Al analizar el código de la función (auxiliado en tales menesteres por mis compañeros del PNTE Guillermo Abadía, Santi Baztán y Luis Miguel Jaso, pues, como ya he dicho en varias ocasiones en este blog, mis habilidades como programador tienden a cero), me di cuenta de que la función de Linuxgine tenía un par de defectos de lógica, a saber:

• La función establece varias condiciones para la variable $nb (que sea igual a 1 o que sea mayor que 2), pero olvida otra posibilidad: que sea mayor que 1.
• La función tampoco prevé la posibilidad de que una entrada carezca de imágenes. Si se da esta circunstancia, el resultado de aplicarla es que el contenido de la entrada no se muestra en el blog, ya que no está prevista la devolución de la variable $content.

Para eliminar estos dos inconvenientes (el primero parece un simple gazapo, pero el segundo constituye un serio obstáculo para la utilización de la función), he sustituido el código original, a partir de la línea 26, por lo siguiente:

        } elseif ($nb > 1) { /* originalmente, el código indicaba " > 2" */
 
                /* If we have more than one image in a post */
                $pattern ="/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
                $replacement = '<a$1href=$2$3.$4$5 rel="prettyPhoto[0]">';
                $content = preg_replace($pattern, $replacement, $content);
                return $content;
        
		} else { /* para los demás casos; por ejemplo, para aquellas entradas que no tienen imágenes */
		        return $content;		
		}
		
}
add_filter('the_content', 'sumtips_image_attribute');

Et voilà. A partir de ahora, todas las miniaturas de imágenes del blog que contienen un enlace a la imagen a tamaño completo se abren con el efecto de superposición prettyPhoto. Para ilustrar sus posibilidades, nada mejor que una galería de fotos de WordPress, como por ejemplo esta que figura a continuación. Las fotografías corresponden a una excursión que por tierras de Tarazona y la Comarca del Moncayo hicimos Pilar y yo, el pasado lunes de Pascua.

No funciona el nuevo efecto de superposición de imágenes

Con fecha de 24 de mayo de 2014 me he dado cuenta de que el efecto prettyPhoto ha dejado de funcionar en este blog (no sé si es un problema generalizado, pero en el foro del plugin prettyPhoto Media hay más de un usuario al que le pasa lo mismo que a mí), así que he desactivado el plugin prettyPhoto Media y he vuelto a instalar el plugin WP Lightbox 2, que siempre me ha dado excelentes resultados.