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

additional-image-sizes-wordpres
  • Ruben Carracedo Cano
  • Sin categoría
  • 31 / 08 / 2013
  • 0 Comments

WordPress tiene una función nativa “Post Thumbnails” o también llamada “Featured Images”. También existe la función nativa add_image_size() que te permitirá especificar tamaños de imágenes y te dará la opción de cortarlas (Crop). Utilizando estas funciones nativas en tus temas (themes) podrás eliminar la necesidad de utilizar plugins de terceros como “TimThumb” o similares en la mayoría de los casos.

Añadiendo Tamaños de Imágenes Adicionales a tu Theme

Debes comenzar añadiendo y activando la funcionalidad para poder mostrar miniaturas en los post (thumbnails). Utiliza este código insertado en el fichero functions.php de tu theme.

add_theme_support('post-thumbnails');

Una vez que hayas activado que se muestren estas miniaturas o thumbnails, podrás crear los nuevos tamaños para las imágenes con la función add_image_size(‘nombre del tamaño’, ancho, alto, modo de corte);

Ejemplo de código:

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

Como has podido observar, hemos especificado tres nuevos tamaños de imágenes. Cada una tiene diferentes modos como corte real (hard crop), corte adaptativo (soft crop) y alto ilimitado (unlimited height). Permíteme que te explique cada uno con un ejemplo y como puedes utilizarlo en tu propio beneficio.

Corte Real o Hard Crop Mode – Como  has podido ver, hay un valor “true” añadido detrás del alto. Este valor “true” especifica a WordPress que debe cortar la foto al tamaño que hemos definido (en este caso 120 x 120 px). Este es el método que personalmente uso más en todos los temas que he creado o modificado para asegurarme de que todo está proporcionado y el diseño no se rompe. Esta función puede, automáticamente, cortar la imagen por los laterales o por arriba y abajo, dependiendo del tamaño de la misma y las proporciones.

Habitualmente, cuando subes una imagen y después la insertas en un post, puedes hacer clic en “editar imagen” y desde ahí, cambiar el tipo de miniatura, toda la imagen, escalarla, rotarla, o darle la vuelta; y de la miniatura, podrás seleccionar la porción exacta que quieres mostrar de imagen.

Corte Adaptativo o Soft Crop Mode – Por defecto, WordPress utiliza el “Soft Crop” o Corte Adaptativo. Por esto es por lo que no ves un parámetro adicional después del alto. Este método escala la imagen proporcionalmente sin distorsionarla. Pero no puedes tener las dimensiones que tú quieres (si no se distorsionaría). Habitualmente, WordPress respeta el ancho que le especificamos, y adapta el alto en función de este ancho. Un ejemplo de esto podría ser esta imagen:

soft-crop-example

Altura Ilimitada o Unlimited Height Mode – Hay veces que tienes imágenes muy largas que quieres insertar en tu diseño, pero quieres estar seguro de que el ancho es limitado. El uso más extendido para este tipo de escalado de imágenes son las infografías. Las infografías tienden a ser muy largas y llenas de información. Un Corte Real o Hard Crop no sería una buena idea. Por este motivo, tan solo especificamos un ancho que no rompa el diseño de nuestro blog, llevando el alto hasta infinito. Así todas las infografías pueden ser mostradas sin distorsionarlas. Esta imagen a continuación es un ejemplo:

unlimited-height-example

Mostrando los escalados adicionales en tu WordPress

Ahora que ya has añadido las funciones para los tamaños de imagen deseados, veamos como mostrar las nuevas opciones en tu tema de WordPress. Abre el archivo de tu tema que quieres que muestre estos nuevos escalados de imagen y pega este código:

<?php the_post_thumbnail( 'your-specified-image-size'); ?>

Note: Este script ha de ser pegado dentro de “post loop”.

Esto es todo lo que tienes que hacer para mostrar los escalados adicionales en tu tema de WordPress. Probablemente tendrás que adaptar esto a los estilos de tu tema dependiendo de cómo quieres que quede.

Regenerando los escalados que ya existen

Si no estás haciendo esto en un nuevo sitio de WordPress recién instalado, es probable que necesites regenerar las miniaturas que ya tengas insertadas en entradas o páginas. El método de la función add_image_size() funciona solo a partir del momento que lo insertes en el tema. Por eso, todas las miniaturas que tengas insertadas antes de esta función, no se verán afectadas por la actualización. Necesitamos regenerar los nuevos escalados para las imágenes antiguas. Esto se hace fácilmente con el plugin “Regenerate Thumbnails”. Una vez que lo instales y actives, aparecerá una nueva opción dentro del menú: Herramientas » Regen. Thumbnails

regenerate-thumbnail

Haz Clic en Regenerate Thumbnail y deja al plugin hacer el resto.

Otro plugin que puede hacer esto es: Simple Image Sizes.

Activando los escalados adicionales en tus Posts

El uso de estos escalados, está limitado a tu tema. Esto claramente no tiene mucho sentido. ¿Por qué no utilizarlo en los post y en los comentarios? Esto podrás conseguirlo utilizando el plugin Simple Image Sizes.

Una vez que lo instales y lo actives aparecerá una nueva opción dentro del menú Settings » Media. Verás una lista de los escalados que hayas definido en tu tema. Todo lo que tienes que hacer es marcar la casilla que dice “Show in post insertion”.

additional-image-sizes-post-insertion

Una vez que marques estas casillas, tendrás disponible los nuevos escalados cuando insertes una imagen dentro de un post.

additional-image-sizes

En la imagen anterior se muestra un ejemplo de cómo tenemos a nuestra disposición los nuevos escalados para el contenido del post.

El plugin Simple Image Sizes te permite crear nuevos escalados directamente desde su sección en tu panel de WordPress.

Pienso que este método debería ser utilizado por todos los desarrolladores de WordPress como una de las mejores prácticas “Best Practices”. ¿Que pensáis vosotros?

Compartid el artículo en vuestras redes sociales y no olvidéis comentar!!!

The following two tabs change content below.
Ruben Carracedo Cano

Ruben Carracedo Cano

Analista Programador at Adviqo Telelinea
Soy un profesional Web Multiplataforma con mucha curiosidad y ganas de seguir mejorando. Tecno-Friki entre otros vicios. Me encanta todo lo relacionado con la programación y el desarrollo de aplicaciones. En mis ratos libres investigo novedades tecnológicas, busco adaptar la tecnología para facilitar su uso cotidiano.
Ruben Carracedo Cano

Latest posts by Ruben Carracedo Cano (see all)

Deja un comentario