¿Quieres crear tamaños de imagen adicionales en WordPress?

De forma predeterminada, WordPress crea automáticamente múltiples copias de carga de imágenes en diferentes tamaños. Además, los temas y complementos de WordPress pueden crear sus propios tamaños de imagen.

En este artículo, le mostraremos cómo crear fácilmente otros tamaños de imagen en WordPress y usarlos en su sitio web.

Crear tamaños de imagen adicionales en WordPress

¿Por qué crear tamaños de imagen extra en WordPress?

En general, todos los temas y complementos populares de WordPress manejan bien los tamaños de imagen. Por ejemplo, su tema de WordPress podría crear un tamaño adicional para usar como miniaturas en las páginas de archivo.

Sin embargo, a veces estos tamaños de imagen pueden no cumplir con sus propios requisitos. Es posible que desee utilizar diferentes tamaños de imagen en temas secundarios o diseños de cuadrícula de publicaciones.

Puede hacer esto creando dimensiones de imagen adicionales en WordPress y luego llamando a esas dimensiones cuando sea necesario.

Habiendo dicho eso, veamos cómo crear un tamaño de imagen extra en WordPress.

Registre tamaños de imagen adicionales para su tema

La mayoría de los temas de WordPress, incluidos todos los temas populares de WordPress, admiten la función de miniatura de publicación (imagen destacada) de forma predeterminada.

Sin embargo, si está creando un tema de WordPress personalizado, deberá agregar soporte para miniaturas de publicaciones agregando el siguiente código al archivo functions.php de su tema.

add_theme_support( 'post-thumbnails' );

Después de habilitar el soporte para miniaturas de publicaciones, ahora puede usar la función add_image_size() para registrar tamaños de imagen adicionales.

El formato de uso de la función add_image_size es el siguiente:

add_image_size( 'name-of-size', width, height, crop mode );

El código de muestra se ve así:

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

Ahora, si nota, hemos especificado tres tipos diferentes de tamaños de imagen. Cada uno tiene diferentes modos, como recorte duro, recorte suave y altura infinita.

Veamos cada ejemplo y cómo usarlos en sus propios proyectos.

1. Modo de recorte duro

Puede notar que se agrega un valor “verdadero” después de la altura. Esto le dice a WordPress que recorte la imagen exactamente al tamaño que definimos (120 x 120 píxeles en este caso).

Este método se utiliza para garantizar que todo sea perfectamente proporcional. Esta característica recortará automáticamente la imagen desde los lados o desde arriba y desde abajo dependiendo del tamaño.

Ejemplo de imagen recortada

2. Modo de recorte suave

El modo de recorte suave está activado de forma predeterminada, es por eso que no ve ningún valor agregado después de la altura. Este método cambia el tamaño de la imagen proporcionalmente sin distorsionarla. Por lo tanto, es posible que no obtenga el tamaño que desea. Por lo general, coincide con la dimensión del ancho y la altura varía según las proporciones de cada imagen. Una pantalla de ejemplo se ve así:

Ejemplo de recorte suave

Modo de altura ilimitada

A veces, desea utilizar imágenes muy largas en sus diseños, pero asegúrese de que el ancho sea limitado. Por ejemplo, las imágenes infográficas tienden a ser largas, a menudo más anchas que el ancho del contenido.

Este modo le permite especificar un ancho que no romperá su diseño, mientras mantiene la altura sin restricciones.

Modo de altura ilimitada

Muestra otros tamaños de imagen en tu tema de WordPress

Ahora que ha agregado la capacidad de cambiar el tamaño de las imágenes deseadas, veamos cómo mostrarlas en su tema de WordPress. Abra el archivo del tema donde desea mostrar la imagen y pegue el siguiente código:

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

Nota: Este código debe pegarse dentro del ciclo de publicación.

Eso es todo lo que necesita hacer para mostrar el tamaño de imagen adicional en su tema de WordPress. Probablemente debería envolverlo en un estilo que se adapte a sus necesidades.

Regenerar otros tamaños de imagen

Si no está haciendo esto en un sitio web nuevo, es posible que deba volver a generar las miniaturas.

La función add_image_size() solo genera el tamaño a partir de los puntos que agrega al sujeto. Esto significa que cualquier imagen de publicación agregada antes de incluir esta función no tendrá las nuevas dimensiones.

Para solucionar esto, debe regenerar la imagen anterior con un nuevo tamaño de imagen. Esto se logra fácilmente con un complemento llamado Regenerar miniaturas. Después de instalar y activar el complemento, se agrega una nueva opción en el menú: Herramientas » Regenerar miniaturas

Regenerar miniaturas

Verá opciones para regenerar miniaturas para todas las imágenes o solo para las imágenes destacadas. Recomendamos regenerar todas las imágenes para evitar cualquier comportamiento inesperado o imágenes corruptas.

Para obtener más detalles, consulte nuestro artículo sobre cómo regenerar fácilmente nuevos tamaños de imagen en WordPress.

Habilite tamaños de imagen adicionales para el contenido de su publicación

Incluso si tiene habilitado el tamaño de la imagen en su tema, no tiene sentido que el uso esté limitado a su tema.

Todos los tamaños de imagen se generan de todos modos, entonces, ¿por qué no dejar que el autor de la publicación lo use en el contenido de la publicación?

Puede hacerlo agregando el siguiente código al archivo de funciones de su tema.

function wpb_custom_image_sizes( $size_names ) {
    $new_sizes = array(
        'homepage-thumb' => 'Homepage Thumbmail', 
        'singlepost-thumb' => 'Infographic Single Post'
    );
    return array_merge( $size_names, $new_sizes );
}
add_filter( 'image_size_names_choose', 'wpb_custom_image_sizes' );

No olvide guardar sus cambios después de agregar el código.

Ahora puede cargar imágenes en publicaciones o páginas de WordPress. En la configuración del bloque de imagen, verá su tamaño de imagen personalizado en la opción “Tamaño de imagen”.

Seleccione su tamaño de imagen personalizado en el editor de publicaciones

Usted y otros autores que trabajan en su sitio ahora pueden elegir estas opciones de tamaño al agregar imágenes a publicaciones y páginas.

Esperamos que este artículo le haya ayudado a aprender cómo crear tamaños de imagen adicionales en WordPress. También puede consultar nuestro artículo sobre los mejores complementos de compresión de imágenes para WordPress y nuestra guía de rendimiento de WordPress para mejorar la velocidad de su sitio web.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para videos tutoriales de WordPress.También puedes encontrarnos en Gorjeo y Facebook.

Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.