Establecer tamaños de thumbnails sin deformar o recortar imagen

He visto muchas maneras para establecer el tamaño de los thumbnails en WordPress…..y finalmente encontré la que para mi es la más efectiva y práctica, ya que no genera los clásicos problemas de imagen recortada o deformada…..además es un método muy simple y que nos permite definir los tamaños desde la hoja  css.

Tendremos que insertar una llamada php para mostrar los thumbnails ahí donde queramos que se vean, normalmente dentro de the_loop y lo haremos de la siguiente manera:

<?php the_post_thumbnail( 'home-thumb' ); ?> // Para enseñar los thumbnails en la home por ejemplo.....
<?php the_post_thumbnail( 'category-thumb' ); ?> //  Para enseñar los thumbnails en category

En la hoja de estilo definiremos el tamaño para las imágenes, de esta manera

img[class*="attachment-home-thumb"] {
    height: auto;
    width: 120px;

}
img[class*="attachment-category-thumb"] {
    height: auto;
    width: 140px;

}

Dejando el valor height en auto, evitaremos que se nos deforme la imagen, así podremos subir indistintamente imágenes horizontales o verticales. Con este método si la imagen subida es más pequeña del tamaño establecido en la hoja de estilo, esta se ampliará y se reducirá en el caso de que sea más grande. Siempre tendré imágenes con un ancho de 120 px para la home y 140px para la categoría. La altura se ajustará automáticamente respetando las proporciones de la imagen subida.

Deja un comentario