Cómo crear tamaños de imagen adicionales en WordPress

El mes pasado se detectó una gran vulnerabilidad en un famoso script de redimensionamiento de imágenes conocido como TimThumb. Desde entonces la comunidad ha colaborado y arreglado los problemas. Aunque TimThumb es una opción viable, creemos que los desarrolladores de temas de WordPress deberían centrarse en usar las funciones básicas en lugar de confiar en scripts de terceros. En este artículo le mostraremos cómo añadir tamaños de imagen adicionales en WordPress.

WordPress tiene una característica incorporada Post Thumbnails aka Featured Images . También hay una función incorporada add_image_size() que le permite especificar tamaños de imagen y le da la opción de recortar. El uso de estas funciones básicas en su tema puede eliminar esencialmente la necesidad de un script de terceros como TimThumb en la mayoría de los casos.

Registro de tamaños de imagen adicionales para su tema

Tendrás que empezar por añadir el soporte de las miniaturas de los mensajes colocando el siguiente código en el archivo functions.php de tu tema:

1add_theme_support( ‘post-thumbnails’);

Una vez habilitado el soporte para enviar miniaturas, ahora puede utilizar la funcionalidad de registrar tamaños de imagen adicionales con la función add_image_size(). El uso de la función add_image_size es el siguiente: add_image_size( ‘nombre-de-tamaño’, ancho, alto, modo de recorte);

El código de ejemplo puede parecerse a:

123add_image_size( ‘sidebar-thumb’, 120, 120, true ); // Hard Crop Modeadd_image_size( ‘homepage-thumb’, 220, 180 ); // Soft Crop Modeadd_image_size( ‘singlepost-thumb’, 590, 9999 ); // Unlimited Height Mode

Ahora, si te das cuenta, hemos especificado tres tipos diferentes de tamaños de imagen. Cada uno tiene diferentes modos, tales como cultivos duros, cultivos suaves y altura ilimitada. Así que vamos a cubrir cada ejemplo y cómo puede utilizarlos para sus beneficios.

Modo de recorte duro – Como puede ver, hay un valor «true» añadido después de la altura. Ese valor verdadero es decirle a WordPress que recorte la imagen al tamaño que hemos definido (en este caso 120 x 120px). Este es el método que utilizamos mucho en nuestros diseños temáticos para asegurarnos de que todo sea proporcionado y que nuestro diseño no se rompa. Esta función recortará automáticamente la imagen desde los lados o desde arriba y desde abajo, dependiendo del tamaño. La desventaja del recorte duro es que no puede controlar qué parte de la imagen se muestra.

Corrección por Mike Little – Cuando haya subido una imagen y antes de insertarla en el post, puede hacer clic en’editar imagen’ y desde allí cambiar la miniatura o toda la imagen, escalar, rotar o voltear la imagen, y para la miniatura seleccionar la parte exacta de la imagen que desee.

Modo de recorte suave – Por defecto el modo de recorte suave está activado, por lo que no se ve ningún valor adicional después de la altura. Este método redimensiona la imagen proporcionalmente sin distorsionarla. Así que puede que no consigas las dimensiones que querías. Normalmente coincide con la dimensión del ancho y las alturas son diferentes en función de la proporción de cada imagen. Una pantalla de ejemplo se vería así:

Soft Crop Example

Modo de altura ilimitada – Hay veces en que tiene imágenes súper largas que quiere usar en su diseño, pero quiere asegurarse de que el ancho sea limitado. El principal uso que encontramos para este tipo de tamaño de imagen es en los posts infográficos. La infografía tiende a ser muy larga y llena de información. No es una buena idea recortar la imagen en una sola página de un mensaje. Pero por naturaleza la infografía es más amplia que el ancho del contenido. Así que lo que puedes hacer es especificar un ancho que no rompa tu diseño dejando que la altura sea ilimitada, para que toda la infografía pueda ser mostrada sin ninguna distorsión. Una pantalla de ejemplo se vería así:

Ejemplo de modo de altura ilimitada

Mostrar tamaños de imagen adicionales en el tema de WordPress

Ahora que ha añadido la funcionalidad para los tamaños de imagen deseados, echemos un vistazo a cómo mostrarlos en su tema de WordPress. Abra el archivo de tema donde desea mostrar la imagen y pegue el siguiente código:

1

Nota: Este bit de código debe ser pegado dentro del bucle de post.

Eso es todo lo que tienes que hacer para mostrar los tamaños de imagen adicionales en tu tema de WordPress. Probablemente deberías envolverlo con el estilo que mejor se adapte a tus necesidades.

Regeneración de tamaños de imagen adicionales

Si usted no está haciendo esto en un sitio nuevo, entonces probablemente tendrá que regenerar las miniaturas. La forma en que funciona la función add_image_size() es que sólo genera los tamaños desde el punto en que se agregó al tema. Por lo tanto, cualquier imagen que se haya añadido antes de la inclusión de esta función no tendrá el nuevo tamaño. Así que lo que tenemos que hacer es regenerar el nuevo tamaño de la imagen para las imágenes más antiguas. Esto es fácil gracias al plugin llamado Regenerar miniaturas . Una vez instalado y activado este plugin, se añade una nueva opción en el menú: Herramientas » Regen. Miniaturas

Regenerar pantalla del plugin de miniaturas

Haga clic en el icono Regenerar miniaturas y deje que el plugin haga su trabajo.

Otro plugin que puede hacer este trabajo es Tamaño de imagen simple .

Activación de tamaños de imagen adicionales para el contenido de su mensaje

Aunque haya habilitado los tamaños de imagen en su tema, el uso está limitado sólo a su tema, lo que no tiene ningún sentido. Todos los tamaños de imagen se generan independientemente, así que por qué no ponerla a disposición del autor del mensaje para que la use dentro del contenido del mensaje. Puede hacer esto usando un plugin llamado Simple Image Sizes .

Una vez instalado y activado este plugin se añadirán nuevas opciones en su página Configuración » Media. Verá una lista de tamaños que ha definido en el tema. Todo lo que tienes que hacer es marcar la casilla que dice «Mostrar en la inserción del post».

Insertar para tamaños de imagen adicionales

Una vez que marque esta casilla, habrá tamaños adicionales disponibles para que su autor los utilice en el contenido del mensaje.

Tamaños de imagen adicionales para mensajes

Note que en la imagen de arriba, tenemos todos los tamaños de imagen que definimos en nuestro tema disponibles para que nuestros autores los usen en el contenido del post si así lo desean.

El plugin Simple Image Sizes también le permite crear tamaños de imagen personalizados directamente desde el panel de control de WordPress.

Creemos que este método debería ser añadido bajo las mejores prácticas para todos los desarrolladores de temas de WordPress. ¿Cuáles son tus pensamientos?

Rate this post

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *