how-to-auto-cropping-resizing-wordpress

Autoredimensionar imágen destacada en wordpress y recortarla si es necesario

Cuando elegimos instalar o crear un template o tema para WordPress, puede que en algún momento nos percatemos de algunas deficiencias, sobretodo si es instalado. En caso de que queramos crear nuestro propio tamaño de imágen destacada que se ajuste y recorte automáticamente este artículo es para tí.

Utilizando este método, conseguiremos una mayor facilidad de uso, por que puede que no seamos los únicos que estamos escribiendo en el blog, y por que no todos los redactores tienen por qué saber editar imágenes, o simplemente por que si puede hacerlo nuestro sistema es tiempo que ahorramos y despues de unos cuantos artículos ese tiepo es muy valioso.

Como auto redimensionar imágenes destacadas y auto recortarlas en WordPress

Los pasos son muy sencillos pero vas a tener que editar un par de archivos en la carpeta de tu tema, vamos a suponer que nuestro tema se llama mitema y vamos a empezar desde ahí:

  1. Editar el archivo functions
    Lo primero será abrir el siguiente archivo para editarlo
    /wp-content/themes/mitema/functions.php
    Ahora vamos a buscar esta línea (en caso de no estar nos iremos al final del documento)
  2. Añadimos el nuevo thumbnail
    Justo detrás del código que hemos visto en el punto anterior vamos a colocar un código similar al que voy a explicar ahora

    En este código lo que hacemos es añadir un nuevo tamaño de imágen a la hora de subirlas, de esta forma WordPress redimensionará y recortará la imágen. Los puntos que se pueden configurar son los siguientes

    • $name: es el nombre que vamos a dar a la variable de imágen, con el que luego cargaremos la miniatura desde el frontend.
    • $width: es la anchura en pixeles de nuestra imágen.
    • $height: es la altura que queremos para nuestra imágen, y la parte que recortará por arriba y abajo será la diferencia entre este tamaño y el real de la imágen.
    • $cropBoolean: esta parte es la que se encargará de recortar la imágen, si ponemos true la recortará, si ponemos false no lo hará

    Por tanto ahora sabiendo lo que hace cada cosa vamos a crear nuestra propia miniatura, imaginemos que queremos una imágen que ocupe el ancho de nuestra columna de artículo (supongamos 500px) y que sea de 150 pixeles de alto. Entonces usaremos un código así:

    NuestroNombreDestacado lo puedes cambiar por el valor que tú quieras, siempre y cuando no coincida con otros add_image_size que haya definidos, lo mejor es que te lo inventes.

  3. Colocar la imágen en nuestra plantilla
    Ahora que ya tenemos definido el nuevo tamaño, nos iremos por ejemplo a la página principal

    y colocaremos la siguiente porción de código donde queramos que aparezca nuestra imágen destacada

    Recuerda colocar el nombre que te hayas inventado. Con este código ya veremos que aparecerá la imágen destacada.

Esto solo tiene un par de inconvenientes, y es que por un lado solo recortará las imágenes que subamos a partir de ahora, es decir, que si tenemos artículos con imágenes destacadas publicadas nos tocará volver a ponerlas. Por otro lado debemos tener en cuenta, que las imágenes que subamos deben tener al menos la anchura que hayamos definido, en este caso 500px, ya que sino aparecerán más pequeñas, y también debemos tener en cuenta que el recorte se hace tomando como referencia el centro de la imágen, quitando por arriba y por abajo la misma cantidad de pixeles, así que deberemos tenerlo presente al subir las imágenes.

Con estos simples pasos podremos crear los tamaños de imágenes que necesitemos. Si tienes alguna sugerencia de como mejorar o alternativas para hacerlo deja tu comentario.


AYUDANOS a poder seguir dando respuestas. Te podemos echar una mano y tú también a nosotros, símplemente dale a me gusta.
  • parker

    Muy agradecido por el esfuerzo, pero la verdad es que funciona como el culo… deforma las imágenes, cuando redimensionas, y no se entiende muy bieneso que de que tienen que tener al menos el amaño definido en la función, porque hay imágenes más grandes que esas dimensiones que las pone más pequeñas. No sirve

    • Es extraño, qué problemas tienes exactamente, yo lo utilizo en infinidad de blogs para configurar los tamaños de imágenes a publicar y funciona realmente bien, qué parte es la que he dejado dudosa, quizás pueda solucionarlo.

  • Alvaro Martinez

    A mi también se me deforman en vez de recortarse las imágenes

    Edito: No había leído que se recortaban a partir de las próximas que subes, creía que las de antes también se recortaban

    • No, para eso debes instalarte un plugin que se llama thumbnail regenerator y darle a regenerar todas las imágenes de la librería, te las crea todas de nuevo con todos los tamaños.