Como añadir tamaños de imagen en wordpress seleccionables en el editor

Cuando nos ponemos a trabajar con wordpress tenemos la posibilidad de que los tamaños predeterminados de imagen nos vengan de perlas, o que por nuestro diseño o necesidades tengamos que incluir algunos tamaños adicionales. El problema es que si no queremos usar un plugin y agregamos estos tamaños, normalmente no se pueden utilizar directamente desde la administración. Vamos a ver como agregar tamaños de imagenes en wordpress y que se puedan seleccionar en la administración.

Cuando digo seleccionar en la administración me refiero a poder elegir el tamaño de la imagen cuando la estamos insertando desde el editor, en el desplegable que nos aparece abajo a la derecha (o cuando estamos editándola). Normalmente cuando ponemos tamaños nuevos a mano en wordpress en el archivo functions.php no nos van a aparecer en la lista.

El por qué no nos aparecen en la lista es simple, no siempre cuando creamos un tamaño lo hacemos con la intención de que se pueda seleccionar, imagínate que estás creando una plantilla y quieres un tamaño determinado para la lista de artículos por ejemplo, y este tamaño no se va a utilizar en ningún otro sitio. Es innecesario tener este tamaño de imagen directamente en la lista ya que no lo vamos a usar nunca.

Para cuando queramos utilizarlo vamos a tener que incluir otro pequeño código que lo que hace es agregarlo a la lista del desplegable para que se pueda utilizar. Vamos a ver primero como añadir un nuevo tamaño de imágen en el functions.php y luego veremos como listar este tamaño en la administración.

Como agregar un tamaño de imagen personalizado en wordpress

Seguramente lo habrás leído en otros muchos sitios, y la verdad es que es realmente sencillo. Siempre teniendo en cuenta que si en algún momento actualizamos el tema que tenemos instalado seguramente perderemos los cambios, por lo que sería más recomendable que crearamos un plugin propio con los tamaños de imagen que queramos utilizar, así nos aseguraríamos que no se sobreescribirá por el actualizador de wordpress. Veremos en otro artículo como crear un plugin para evitar editar el archivo functions.php.

Por el momento haremos la edición en el archivo functions.php, y para ello lo abriremos con nuestro editor favorito, en este caso podríamos utilizar por ejemplo Aptana, Eclipse, Notepad++ o el más sencillo de todos, el bloc de notas (si lo hacemos por consola con nano nos vale).

Una vez abierto nos iremos al final del archivo justo antes de la etiqueta ?>, si no hay espacio haremos un par de intros para poder escribir y agregaremos la siguiente línea:

add_image_size( 'mi-imagen', 640, 480, false );

add_image_size es la función encargada de agregar los tamaños de imagen de forma segura al sistema, por lo que siempre deberemos utilizarla. El resto de información significa lo siguiente:

• mi-imagen: es el nombre clave que queramos darle a la imagen, sin espacios y sin signos de puntuación especiales como acentos, eñes o algo que no sea – o _
• 640 esta será la anchura máxima de la imagen
• 480 esta será la altura máxima de la imagen
• false: este valor puede ser false o true, si ponemos false se hará un recorte de imagen que no eliminará ninguna zona de la misma, si la imagen es mas grande en alguno de los lados, se escalará para ajustarse a la anchura o altura máxima, sin embargo si ponemos true la imagen se ajustara a la media máxima y si por ejemplo queda más ancha de lo que hayamos configurado será recortada y se eliminarán trozos de la misma.

Esta es la forma más sencilla de agregar tamaños de imagen, y tan pronto lo agreguemos las próximas imágenes que subamos se generaran también con estas opciones. El inconveniente es que las que ya tengamos subidas no serán generadas nuevamente, para eso necesitaremos algún plugin como thumbnail regenerator por ejemplo.

Como agregar un tamaño de imagen personalizado a la lista del editor de wordpress

A pesar de que ya tenemos nuestro tamaño configurado y empezamos a ver que se generan los ficheros de imagen correctamente, al intentar insertarlos con el editor de wordpress vamos a ver que no nos aparece este amaño en la lista. Para ello vamos a tener que agregar una pequeña porción de código adicional justo detrás de donde hemos colocado la función add_image_size, en este caso es una función que nos agregará este tamaño a la lista para que podamos usarlo. Vamos a abrir de nuevo el archivo functions.php y justo después de nuestra imagen personalizada escribiremos lo siguiente:

add_filter( 'image_size_names_choose', 'funcion_agregar_imagen_lista' );
function funcion_agregar_imagen_lista( $sizes ) {
    return array_merge( $sizes, array(
        'mi-imagen' => __('Mi imágen'),
    ) );
}

La función add_filter nos permitirá agregar al seleccionable de los tamaños el que hemos creado hace un momento más campos, indicándole donde tiene que agregarlo, y el nombre de la función que tiene que ejecutar. Justo debajo creamos la función que lo que hará será agregar al array de tamaños el tamaño personalizado que acabamos de generar, de forma que aparezca el siguiente en la lista.

En el momento que guardemos y subamos el archivo veremos como entrando en la administración y subiendo una imagen nueva nos permitirá elegir este nuevo tamaño para insertarlo en nuestros artículos. De esta forma habremos solucionado el problema que no nos permitía publicar en los posts los tamaños de imagenes personalizados.

¿Has editado functions o has creado un plugin? ¿Sueles editar tus propios scripts? ¿Como lo has solucionado tú?