Cómo cambiar el tamaño de las miniaturas de los módulos de blog y portafolio del tema Divi

Cuando migras de otro tema a Divi normalmente todo es un cambio a mejor, pero a veces pasan cosas, como que configuraciones que antes funcionaban perfecto, tras el cambio, no hacen lo que deben, o no se ven bien.

Es muy habitual que, al cambiar de tema, no a Divi, a cualquier tema WordPress, haya algún desajuste visual, y siempre o casi siempre toca hacer alguna modificación en el tamaño de las miniaturas, en las imágenes destacadas, que son distintas en todos los temas.

Un caso bastante corriente, que me he encontrado en varias webs, es pasar de un tema que usaba miniaturas en formato, o relación de aspecto, cuadrado a Divi, u otros, que usan el más habitual formato apaisado.

En el módulo blog de Divi, por ejemplo, el tamaño por defecto que se genera es de 400x284, y claro, si tus miniaturas previas son cuadradas se verán mal, muy mal en realidad, pues se forzará el tamaño para intentar representar el tamaño esperado.

¿Qué hago, vuelvo a subir todas las imágenes destacadas en el nuevo tamaño?

Claro, podría funcionar, y si tienes pocas entradas de blog incluso es lo más recomendable, pero no siempre tienes tanta suerte, normalmente vas a tener decenas, o cientos, quizás miles, de entradas de blog, cada una con su – ahora – inadecuado tamaño de imagen destacada, y no es ni siquiera razonable plantearse volver a subir imágenes destacadas una a una con el nuevo tamaño.

La solución inteligente: forzar a los módulos blog y portafolio de Divi a usar el tamaño existente

Lo mejor, de lejos, es forzar a que Divi use para sus módulos de blog y portafolio, los habitualmente afectados por este tipo de cambios, un nuevo tamaño, que aproveche las imágenes ya subidas, pero manteniendo su estilo.

Y nada más fácil, solo tienes que adaptar este código a tus necesidades:

/* Tamaño personalizado de imagen para módulo blog de Divi */
add_filter( 'et_pb_blog_image_height', 'blog_size_h' );
add_filter( 'et_pb_blog_image_width', 'blog_size_w' );

function blog_size_h($height) {
return '400';
}
function blog_size_w($width) {
return '400';
}
add_image_size( 'custom-blog-size', 400, 400, true );

/* Tamaño personalizado de imagen para módulo portafolio de Divi */
add_filter( 'et_pb_portfolio_image_height', 'portfolio_size_h' );
add_filter( 'et_pb_portfolio_image_width', 'portfolio_size_w' );

function portfolio_size_h($height) {
return '400';
}
function portfolio_size_w($width) {
return '400';
}
add_image_size( 'custom-portfolio-size', 400, 400, true );

¿Qué hace este código?

El código anterior añade un nuevo tamaño de miniatura (add_image_size) para que lo utilicen los módulos blog y portafolio de Divi con un tamaño de 400 x 400, para aprovechar el ancho de los módulos de Divi pero, al mismo tiempo, poder seguir usando las imágenes cuadradas existentes.

Para que no se redimensione la imagen y se vea fea le he añadido el parámetro true, así se crea una nueva imagen cuadrada a partir de la existente, partiendo del centro.

Por supuesto, el código también cambia el tamaño por defecto de los módulos de blog y portafolio de Divi con los filtros (add_filter) para que usen el nuevo tamaño creado

¿Cómo añado el código?

Hay varios métodos para añadir el código anterior a tu web, y por supuesto puedes elegir el que prefieras, aunque en esta ocasión, al ser una modificación específica para el tema Divi, mi consejo en estos casos es que lo añadas a un archivo functions.php de un tema hijo de Divi.

Nota importante

Sí, casi siempre será totalmente recomendable, a veces obligatorio, que, después de añadir el código anterior, instales, actives y lances la regeneración de miniaturas usando este maravilloso plugin.

¿Algo más?

No, que va, solo que si te quedó alguna duda la plantees abajo, en los comentarios 😉

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!