Blog sobre desarrollo WordPress en Español Desarrollo WordPress en Español
libreria multimedia

Cómo crear imágenes destacadas con tamaños personalizados en WordPress

Con ésta cuestión nos podemos encontrar muy a menudo sobre todo si estamos desarrollando temas a medida. En nuestro diseño vendrán definidas unas imágenes con unos tamaños concretos ya sea para sliders, carruseles, widgets, imágenes de apoyo en el sidebar, etc…

WordPress nos permite subir imágenes a través de la Librería Multimedia, y nos generará varios thumbnails por defecto:

  • Thumbnail, de 150px x 150px (máximo)
  • Medium, de 300px x 300px (máximo)
  • Large, de 1024px x 1024px (máximo)
  • Full, imagen a tamaño original (tal y como se sube)

 

De tal manera que si subiéramos una imagen.jpg de 2048px x 1536px, nos generará los siguientes thumbnails:

  • imagen.jpg (imagen original)
  • imagen-150×150.jpg *
  • imagen-300×225.jpg *
  • imagen-1024×768.jpg *

 

Nota

Como se puede observar, en la resolución pequeña 150x150 ha forzado el tamaño, pero en el de 300 y 1024 ha mantenido la proporción original. Esto es por el crop que veremos a continuación.

Imaginemos que para nuestro desarrollo a medida necesitamos tener imágenes a 1140px x 500px para un carrusel. Podríamos utilizar la imagen original y forzar mediante css que el ancho máximo sea 1140px y que el alto sea proporcional, o cargar la imagen «Large» y estirarla hasta esos 1140px.

Cualquiera de estas dos opciones no es buena, ya que en la primera estamos cargando una imagen mucho más grande que la que necesitamos, por lo tanto pesará más y si tenemos varias diapositivas en nuestro carrusel la velocidad de carga será más lenta innecesariamente. Para la segunda estamos estirando la imagen, por lo que se perderá resolución y calidad, y se verá la imagen algo pixelada.

Lo ideal es subir imágenes a la resolución requerida (1140px x 500px) y optimizadas para web, pero en muchos casos no seremos nosotros los que subamos éstas imágenes, será el cliente final y no suelen tener la precaución de tomar éstas medidas. Ante éste panorama, ¿Cuál es la mejor solución? Añadir un tamaño personalizado a las imágenes destacadas. Para ello nos valdremos de la función add_image_size().

Ésta función admite 4 parámetros:

  • name, nombre que le daremos a nuestra miniatura y que usaremos para luego cargarla en nuestro sitio.
  • width, ancho en pixeles
  • height, alto en pixeles
  • crop, modo de “corte”. Admite true o false. Por defecto es false, y mantiene la proporción de la imagen original. Si se pone a true, cortará la imagen al tamaño fijado, por lo que si la imagen original tiene proporciones distintas, se perderá parte de la imagen.

 

Para nuestro ejemplo nos interesaría una imagen fija de 1140 x 500, por lo tanto forzaremos el crop a true. Tendremos que agregar en nuestro functions.php:

A partir de ahora, para cada imagen nueva que subamos, se generará nuestro thumbnail con tamaño personalizado, siempre y cuando el tamaño original supere a nuestro tamaño definido, en caso contrario no se generará.

En nuestro desarrollo para pintar las imágenes destacadas a los tamaños que deseamos utilizaremos la función the_post_thumbnail():

Si estamos en un loop o tenemos el ID de nuestro post, también podemos obtener nuestra imagen a tamaño personalizado con la siguiente función:

Puede que también te interese

Creando un tema desde cero para WordPress parte 1: Consideraciones previas
Creando un tema desde cero para WordPress parte 1: Consideraciones previas
1. Creando un tema desde cero para WordPress: Consideraciones previas 2. Creando un tema desde cero para WordPress: Escribiendo el tema 3. Creando un tema…
Cómo reemplazar la hoja de estilos de un plugin por una propia
Cómo reemplazar la hoja de estilos de un plugin por una propia
En muchas ocasiones nos habremos encontrado con ésta situación: Instalamos un plugin que posee sus propios estilos y clases, y no encaja bien en nuestro…
Todo lo que hay que saber sobre las imágenes destacadas o post thumbnails en WordPress
Todo lo que hay que saber sobre las imágenes destacadas o post thumbnails en WordPress
Los post thumbnails o imágenes destacadas es una característica que se introdujo en la versión 2.9 de WordPress. Permite asignar una imagen representativa a las…
Limita el tamaño en píxeles en la subida de imágenes
Limita el tamaño en píxeles en la subida de imágenes
¿Quien no se ha encontrado alguna vez con algún cliente o colaborador que sube imágenes a máxima resolución y calidad recién salidas de su cámara…