Darío Ferrer - Blog

¿Nunca te has preguntado cómo demonios hacen portales como 20minutos.es, El Universal o PC Magazine para controlar las dimensiones de las imágenes que aparecen en sus páginas principales?.

La introducción necesaria

He tenido la oportunidad de participar en distintas tertulias temáticas con algunos colegas diseñadores y programadores. Lo bueno de charlar entre birras y tentempiés es que el alcohol posee la milagrosa cualidad de deshinibir ánimos y -pasado un rato- ahí nos pueden ver en aquella mesa compartiendo secretos profesionales de forma tan ligera que raya en el “descaro” (al menos desde el punto de vista de la mayoría tacaña que se guardan sus descubrimientos para ellos mismos y -consecuentemente- se quedan estancados en un nivel limitado de conocimientos).

Pues gracias a esas tertulias me he enterado cómo es que se ha fijado el desarrollo de algunos portales (por si acaso, no conozco de vista ni de trato a los diseñadores de 20minutos, El Universal o PC Magazine). En la gran mayoría de los casos, la construcción de un artículo conlleva demasiado trabajo manual para el redactor, quien además pasa por un tortuoso período inicial de adiestramiento en el sistema.

Esto sucede por varias razones, casi todas relacionadas con un trabajo de desarrollo que al final se queda corto para las necesidades de quienes administrarán el sitio. Puede que una página principal se vea fenomenal, pero ¿qué hay de la interfaz para el personal de gestión de contenido y sistema?.

En algún otro artículo he mencionado que mi especialidad profesional se enfoca a plataformas de información. A lo largo del tiempo me he percatado cuán vital resulta desarrollar una interfaz usable para el visitante como para quien gestiona el portal.

Lamentablemente este importante elemento es frontalmente ignorado por la mayoría de desarrolladores web, quienes en sus esfuerzos por hacer buen trabajo en el frontend se olvidan de que existe un backend que requiere el doble de esfuerzo para ser igualmente optimizado.

Las imágenes, el gran dilema del desarrollador

En materia de portales, definitivamente califico el tema de las imágenes como un dilema, ya que -a partir de cierto punto de exigencia- éstas necesitan ser procesadas de forma rápida, ágil y eficaz. Los portales mencionados al principio tienen al menos 3 tamaños prestablecidos de miniaturas en sus portadas, lo cual confiere impresionante dinamismo y optimización en la intención comunicacional.

Sin embargo, el periodista o redactor son quienes utilizan la plataforma a diario. Éstos necesitan de un sistema capaz de ahorrarles el mayor cúmulo posible de trabajo.

• Lo usual: el diseñador crea 4 versiones/tamaños distintos de imágenes y las sube al servidor. Luego el redactor las localiza por medio del sistema y las asigna a través de funciones del editor web disponibles para tal fin.
• Lo ideal: El redactor sube la imagen al sistema, el cual automáticamente crea las 4 versiones/tamaños, ubicándolos en el directorio específico, poniéndolas a disposición de forma inmediata y publicando automáticamente cada versión en las zonas indicadas. Todo con un solo clic y en 1 segundo. Adicionalmente el sistema ofrecería la posibilidad de personalizar el área de la imagen más conveniente para mostrar.

En conclusión, mientras “lo usual” requiere el trabajo de tres personas, “lo ideal” sólo requiere una persona y además hace en unos pocos segundos lo que a “lo usual” le tomaría al menos media hora (en el mejor de los casos).

Hasta el momento he visto paneles de administración/edición por montones, tanto de desarrollos originales como de CMS. He visto paneles pequeños, grandes, gordos, flacos, pelados y peludos. E increíblemente ninguno (entiéndase el 0%) posee las características que he calificado más arriba como “lo ideal”.

Lo anterior debería representar un fuerte llamado de atención para los actuales diseñadores de interfaces, quienes evidentemente se echan las bolas al hombro (sobre todo por falta de conocimientos o disposición), concentrándose en lo que ve el usuario y -al mismo tiempo- dejando en total estado de abandono a quienes se encargan de gestionar el contenido.

La combinación eficaz para un completo control de las imágenes en sistemas WordPress

Conozco tres plugins cuyo trabajo conjunto te darán la llave para la ágil gestión de imágenes en tu sitio WordPress, sobre todo a la hora de construir un portal informativo basado en esta aplicación. Recordemos el objetivo perseguido: hacer de la manipulación de imágenes un proceso sumamente sencillo para quien redacta el artículo.

Antes que nada… Planifica los tamaños de tus imágenes con plena libertad

Esta tarea pertenece exclusivamente a planificación y diseño. Tómate el tiempo necesario para establecer las dimensiones predeterminadas de imágenes que serán parte de tu maquetación. Si acaso cabe un consejo en esta etapa es que no abuses de la cantidad de tamaños a elegir. Por ejemplo, 20minutos.es utiliza en su portada unos 5 o 6 juegos de tamaños que son combinados con creatividad y propósito comunicacional.

Por supuesto serás tú quien al final decide el diseño, pero en esta parte trata de partir desde lo simple. Si el asunto adquiere complejidad, que ésta sea producto de la necesidad y siempre pensando en el usuario más que en algún concepto personal de estética que colisione con la usabilidad.

Preparen… Apunten… ¡Fuego!

Quizás sea una trillada frase de pelotones de antaño, pero ciertamente nos muestra una correlación de procedimientos: Se prepara la bayoneta, se apunta y finalmente se dispara, en ese orden.

Preparen…

Max Image Size Control te ofrece la capacidad de redefinir los tamaños predeterminados de imágenes de WordPress (miniatura, medio, grande y full) y además tendrás la oportunidad de crear varios tamaños.

Una de las características más resaltantes de este plugin es que puedes crear varios grupos de configuraciones y delimitarlos a entradas y categorías, igualmente con la posibilidad de generar grupos extra de tamaños personalizados.

Este plugin simplemente extiende algunas funciones nativas de WordPress y los coloca a disposición para un uso más libre. En el caso de valores personalizados y su ubicación en la base de datos, éstos van a parar al mismo campo _postmeta existente de la imagen, agregando la información en lugar de crear registro extra.

Revisemos rápidamente las opciones que tenemos:

1. Aplicar a todas las entradas: La configuración se aplica a todas las entradas del sitio.
2. ID de Entrada (delimitadas por coma): Coloca ahí las ID de las entradas que desees sean afectadas por la configuración actual.
3. ID de Categorías (delimitadas por coma): Coloca ahí las ID de las categorías que desees sean afectadas por la configuración actual.
4. Excluir ID de Entrada (delimitadas por coma): Si deseas que algunas entradas no sean afectadas por la configuración, colocas sus ID aquí.
5. Excluir ID de Categoría (delimitadas por comas): La misma cosa pero con categorías. Todas las ID que coloques en este espacio serán ignoradas por la configuración actual.
6. Dimensiones de imágenes: Ésta es la parte potente del plugin. Como puedes observar, para cada tamaño existe un ancho (máximo) a ajustar y un alto (máximo) a ajustar, lo cual quiere decir que la imagen se redimensionará al máximo del primer valor (ancho o alto). Si deseas dejar uno de estos valores libres simplemente deja el espacio en blanco. En otras palabras, no es requisito que definas ambos valores a menos que actives la casilla “recortar”.
7. Recortar: De forma nativa en WordPress, la capacidad de recortar imágenes está limitada sólo al tamaño Miniatura, pero Max Image Size Control habilita dicha función para todos los tamaños, lo que hace mucho más sencillo definir anchos y altos fijos de manera profesional. La función Recortar usa el mismo algoritmo de WordPress para calcular el área de recorte.
8. Tamaño personalizado [ custom0 ]: Si no te basta con los tamaños predeterminados de WordPress, aquí puedes definir los que desees. En este caso el tamaño se llama “custom0″. Una vez guardada la configuración surgirá un nuevo campo llamado “custom1″ y así sucesivamente mientras sigas agregando dimensiones a gusto.

Preguntas frecuentes sobre Max Image Size Control

¿Al cambiar el tamaño se recomponen las dimensiones de las imágenes existentes?

Lamentablemente no. La función del plugin actúa sólo para las imágenes que agregues a partir de las configuraciones efectuadas. Actualmente el desarrollador se encuentra trabajando en la recomposición retroactiva de imágenes, pero ha informado que quizás tarde algo de tiempo en programarla y liberarla de forma segura.

Si tienes la intención de cambiar las imágenes en un blog ya existente, puedes probar con el plugin Regenerate Thumbnails para las imágenes previas, aunque es preciso mencionar que éste actúa sólo sobre el tamaño miniatura. Te vendrá muy bien si solamente deseas cambiar esa versión de imagen.

Quizás existan otros plugins que cambien todos los tamaños de imágenes ya existentes pero aún no los he probado, por lo cual sería irresponsabilidad de mi parte recomendártelos. Cuestión de probar (en forma segura y que no afecte tu sitio en producción).

… Apunten…

Scissors te permite seleccionar fácilmente el área de la imagen que deseas mostrar. Seguramente en el pasado no te agradó aquél cortado por la mitad que el redimensionamiento de WordPress le propinó a un rostro, producto o zona importante de tu imagen. Con Scissors se terminó ese problema.

El plugin Scissors se basa estrictamente en los tamaños que configuraste para calcular las proporciones de la selección del área de la imagen. Éste trabaja todo el tiempo con la versión Full de ésta y sobrescribirá las versiones existentes según el área de recorte que ajustes. Revisemos un poco esta parte:

Como puedes observar, el proceso de recortar con Scissors resulta extremadamente fácil e intuitivo. Sólo tienes que presionar el botón “Recortar”, fijar el tamaño que deseas modificar (miniatura, medio, etc.) elegir el área con la ayuda del ratón y presionar el botón nuevamente. Eso es todo. Sólo con esto cualquier departamento de redacción se ahorra un montón de tiempo y simplifica su flujo de trabajo. Nota también que la tarea es muy simple hasta para alguien sin conocimientos de edición de imágenes ¿Útil no?.

Scissors utiliza la tecnología Ajax de una forma muy productiva y a favor de la usabilidad, por lo cual te será posible ver los cambios cómodamente y de forma inmediata, sin refrescamiento de página.

Además de la función Cortar, este plugin ofrece la posibilidad de redimensionar las imágenes (tamaño Full), rotarlas y añadirles marcas de agua. Funciona tanto para nuevas imágenes como para las que ya se han publicado. Démos un vistazo a las opciones del menú Media:

1. Recomiendo que mantengas esa casilla en blanco y dejes que sea Max Image Size Control quien gestione esa parte.
2. Éstas son las configuraciones de Marca de Agua. Selecciona una imagen a tu gusto (preferiblemente con fondo transparente y guardada como png de 24 bits). Scissors fundirá tu marca de agua con la imagen en la posición, tamaño y alineamiento que hayas elegido (ver cuadro de nuevo).

Preguntas frecuentes sobre Scissors

¿Puedo procesar imágenes ya existentes con Scissors?

Sí puedes.

¿Dónde encuentro los ajustes de Scissors?

El plugin integra su interfaz con el motor de objetos de WordPress, por lo cual puedes efectuar los ajustes generales en el menú Opciones > Media, así como los parámetros por imagen en el mismo menú Galería de tu editor.

¿Qué pasa si luego de definir un recorte no me gusta? ¿Puedo cambiarlo sin problemas?

Por supuesto. Puedes recortar la imagen cuantas veces lo requieras, ya que Scissors trabaja sobre el tamaño full y regenera versiones una y otra vez a partir de éste según vayas configurando, sobrescribiendo las actuales que existan en ese momento, en lugar de generar archivos adicionales.

Un detalle obvio: Toda modificación que le hagas a la versión Full de la imagen es irreversible. Házte un favor, no cometas barbaridades como reducir la imagen original para luego agrandarla.

¿Scissors toma en cuenta los tamaños personalizados definidos con Max Image Size Control?

Sí, plenamente compatible. Tal como en otros tamaños puedes redefinir la presentación cuantas veces desees.

¿Scissors agrega campos/tablas extra a la base de datos con cada ajuste?

No. La mayoría del desempeño de Scissors se concentra en la parte de PHP, por lo cual los únicos campos existentes en la base de datos son los referentes a las opciones.

… ¡Fuego!

WP Smart Image II muestra las imágenes en las dimensiones requeridas por el diseñador de forma muy sencilla, ofreciendo amplios niveles de personalización para resultados óptimos.

La tarea de WP Smart Image II se concentra exclusivamente en mostrar los resultados de tus configuraciones. Puedes asignar el tamaño que desees en la zona que desees. De los tres plugins descritos es el único que requiere modificaciones en tu plantilla para agregar la etiqueta que activa la función.

Las opciones no sólo actúan sobre la imagen sino también sobre el enlace (en caso de trabajar con imágenes enlazadas). Es altamente versátil y manejabla, aún incluyéndolo dentro de nuevas funciones creadas por ti, ya que no sólo devuelve resultados directamente sino que también puede ser pasado por parámetros PHP.

Revisa todas las ventajas de WP Smart Image II, así como la lista de parámetros disponibles hasta la fecha y el demo en vivo, a fin de orientarte un poco más acerca de los detalles de uso.

Preguntas frecuentes sobre WP Smart Image II

¿WP Smart Image funciona con campos personalizados?

No. Utilizar campos personalizados para tales fines constituye un craso error. Puede que el método sea relativamente famoso a causa de los diseñadores de algunas plantillas “premium” (en su gran mayoría supuestamente convencidos de que saben programar) pero sigue siendo un procedimiento erróneo. WordPress posee una avanzada plataforma de gestión de imágenes que este plugin sabe aprovechar de forma productiva, ágil y correcta.

¿WP Smart Image añade campos extra a a la base de datos como producto de sus funciones?

Sólo un registro para las opciones. Si deseas activar el widget del editor se agregará en la tabla _postmeta un registro por cada entrada que configures, pero éstos sólo serán consultados en el backend, así que la carga del widget a tu BD es prácticamente nula pues sólo es usado por quienes pueden acceder al panel de edición. Igualmente éste se encuentra configurado como opción, ya que WP Smart Image no necesita del widget para funcionar, aunque es recomendable que lo actives.

¿Cómo puedo personalizar la presentación de las imágenes?

Revisa la tabla de parámetros a fin de comprobar la amplitud de posibilidades.

¿Dónde inserto la etiqueta?

Dentro del loop de tu artículo (Mirar esta captura para más detalles).

¿Puedo agregar los parámetros en forma desordenada?

Sí. WP Smart Image II los leerá igual.

¿Todos los parámetros están disponibles para todas las situaciones?

Debes leer la lista de parámetros para tener en cuenta cuáles son aplicables a determinado caso. Si por ejemplo tienes un sitio con un DTD declarado como Strict y activas target=”_blank” desde luego arruinarás tus estándares y el cielo caerá sobre tu cabeza. Si agregas la misma ID a varios enlaces o imágenes estarás cometiendo un error porque la ID debe ser única para cada una. En pocas palabras, la misma lógica de la situación te dirá qué parámetros utilizar.

¿Activar o desactivar el widget del editor inutiliza mis configuraciones?

No. El widget fue creado para proporcionarte una mejor experiencia de usuario en el backend. WP Smart Image II no depende de éste para operar. Si deseas desactivarlo, igualmente podrás configurar la imagen que aparecerá mediante el menú Galería de cada entrada.

Actualizaciones a este artículo:

• Cambiar la referencia de WP Smart Image a WP Smart Image II