Blog

nextGEN Gallery y la relación de aspecto de las miniaturas

Sí, lo confieso. Entre foto y foto diseño páginas web. Actualmente trabajo en la nueva web de la agencia de representación de fotógrafos Gianfranco Meza. Para gestionar sus galerías decidí utilizar el plugin para Wordpress nextGEN Gallery. Una vez instalado el plugin, probado todas sus maravillas y un paso más allá del punto de no retorno me percato de que algo está fallando entre tanta maravilla: las miniaturas empezaban a tener diferentes tamaños.

Tras un repaso a cientos de lineas de código php y otras tantas webs que encontré en Google buscando "nextgen me esta volviendo loco" podría resumir el problema en que a partir de la versión 1.4.1 nextGEN se hace un lio con las miniaturas si la imagen original no tiene la misma relación de aspecto que la especificada en las opciones. El error se produce tanto en la generación automática de miniaturas, en la generación por lotes como en el reencuadre. Por pequeña que sea esta diferencia en la relación de aspecto, aunque sólo sea 1 pixel, descuadra la vista en cuadrícula.

Para evitar tocar el código del plugin y también el sudor frio que aparece cuando, entre tantas lineas de código, puedes crear más errores que soluciones, el primer remedio que viene a la cabeza es forzar el tamaño de las miniaturas mediante CSS. Tan sólo habría que añadir los tags width y height a la definición .ngg-gallery-thumbnail img en nggallery.css. Pero esta solución es rápidamente descartable por dos motivos. El primero es que perderíamos el dinamismo que ofrece la posibilidad de cambiar el tamaño de las miniaturas desde el panel de opciones nextGEN pues .ngg-gallery-thumbnail img estaría forzando el tamaño de las miniaturas. El segundo y más importante es la deformación que sufriría la miniatura. Supongamos que nextGEN genera la miniatura de una imagen con relación de 1:1 y que, por diseño de la cuadrícula, hemos forzado las miniaturas a 16:9, entonces estas se verían achatadas. Lo mismo que ocurre cuando estás viendo una emisión en 4:3 y has forzado a tu televisor a rellenar toda la pantalla 16:9. ¿Entonces que hago si no quiero o no me atrevo a modificar el código del plugin? Ya que estás ejecutando tu web desde un servidor con PHP puedes usar algún script alternativo que genere miniaturas a partir de la imagen original. Aquí tenéis los resultados de Google con las keywords php thumbnail generator. Una vez copiado el script en tu servidor tendrás que insertar la llamada en todos los ficheros php que generan las vistas que utilizas en nextGEN. Por ejemplo, si utilizas la vista de galerias con el formato lista de imágenes tendrás que insertar la llamada al nuevo script en /wp-content/plugins/nextgen-gallery/view/gallery.php, sustituyendo echo $image->thumbnailURL por la llamada especificada en el manual de tu nuevo script generador de miniaturas. Supongamos que vas a utilizar TimThumb y que quieres tus miniaturas de 200x100 píxeles, entonces sustituirías
<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
por
<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="/directorio-del-script/timthumb.php?src=<?php echo $image->imageurl ?>&h=100&w=200&zc=1" />.

Este sistema es una manera de solucionar el problema pero, a diferencia de nextGEN que sirve una miniatura generada durante la subida de imágenes y no en tiempo real, estos scripts tendrían que ejecutarse cada vez por cada una de las miniaturas que se mostrasen en tu vista de galerías y álbumes. Esto implica aumentar el trabajo del servidor y tener que procesar una imagen de tamaño completo para visualizar sólo una miniatura, con lo que tu galería se volverá tan lenta que pensarás que has vuelto a los '90. ¿Vas pillando por donde voy? No te queda otro remedio que modificar el código php de nextGEN a la espera de que Alex Rabe solucione el problema en una futura versión. ¿He oído modificar? Entonces lo primero que vamos a hacer es una copia de seguridad de los ficheros que tocaremos en /wp-content/plugins/nextgen-gallery/admin/, edit-thumbnail.php y functions.php. Después aplicaremos los parches que ofrece Holix en la entrada [Plugin: NextGEN Gallery] Crop thumbnails? del foro de Wordpress.org. En edit-thumbnail.php localiza

jQuery('#imageToEdit').Jcrop({ onChange: showPreview, onSelect: showPreview, aspectRatio: <?php echo round($WidthHtmlPrev/$HeightHtmlPrev,1) ?> });

y sustitúyelo por

jQuery('#imageToEdit').Jcrop({ onChange: showPreview, onSelect: showPreview, aspectRatio: <?php echo round($WidthHtmlPrev/$HeightHtmlPrev,3) ?> });

En functions.php localiza

if (!$thumb->error) { if ($ngg->options['thumbfix']) { // check for portrait format if ($thumb->currentDimensions['height'] > $thumb->currentDimensions['width']) { // first resize to the wanted width $thumb->resize($ngg->options['thumbwidth'], 0); // get optimal y startpos

y sustitúyelo por

if (!$thumb->error) { if ($ngg->options['thumbfix']) { // check for portrait format $curTan = $thumb->currentDimensions['width'] / $thumb->currentDimensions['height']; $thTan = $ngg->options['thumbwidth'] / $ngg->options['thumbheight']; if ($curTan <= $thTan) { // first resize to the wanted width $thumb->resize($ngg->options['thumbwidth'], 0); // get optimal y startpos

Ahora sólo te queda revisar tu galería y descansar tranquilo o restaurar las copias de seguridad y esperar que tu cliente vea positivo un mosaico descuadrado de imágenes en diferentes tamaños y aspectos.

nota: Corregido en la versión V1.5.0 - 18.03.2010 de NextGen Gallery.

2010

<< Página anterior