Imágenes recortadas en Divi: ¿cómo evitarlo?

Te jode, lo sé... Esta es una pregunta que me hacen mucho en los comentarios, correos electrónicos o sesiones de formación: ¿Por qué Divi muestra imágenes recortadas (imágenes recortadas)?

Es cierto, a veces las imágenes que se utilizan están recortadas, recortadas, recortadas... Esto suele ocurrir con las imágenes que se ponen delante (las miniaturas de la portada).

Por ejemplo, si tienes un blog de éxito en Pinterest, te gustaría que las imágenes de tu portada estuvieran en formato vertical y no apaisado... ¿Verdad?

En este artículo verás cómo dejar de recortar las imágenes en los módulos Blog, Portafolio y Galería.

Anuncio: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.

1 - Recorte de imágenes en Divi, tamaño de la imagen, proporción...

Los desarrolladores de Elegantthemes han codificado Divi con diferentes tamaños de imagen. Dependiendo de los módulos que utilices, las imágenes se muestran a un determinado tamaño predefinido.

Aprende a dejar de recortar imágenes en Divi...

2 - Unas pocas líneas de código para dejar de recortar las imágenes de Divi

Si quieres poner en práctica los consejos de este tutorial, tendrás que añadir algunas líneas de código para modificar el código original de Divi, para ello hay dos soluciones:

1. Está utilizando un tema hijo: sólo tiene que añadir el código en el funciones.php de su tema hijo. Si no tiene uno, puede descargar el tema infantil para Divi aquí.
2. Si no utilizas un tema hijo: ¡no te preocupes! Si no utilizas un tema hijo y te parece demasiado complicado, hay una alternativa mucho más sencilla. Instalar y activar la extensión Code Snippets. Es gratuito y le permitirá añadir su código PHP con total seguridad.

Y en cualquier caso, nunca modifiques tu Tema Divi principal. Utilice una u otra de las soluciones presentadas anteriormente.

3 - Imágenes recortadas en el módulo Blog

El Módulo Blog de Divi es un módulo útil para mostrar las últimas publicaciones del blog. Lo necesitarás para crear la página del blog.

Pero habrás notado que las "imágenes destacadas" (las miniaturas) están recortadas. ¡Rrrrrr!

En la captura de pantalla anterior, puede ver, a la izquierda, que el módulo Blog muestra imágenes recortadas. Sin embargo, las imágenes resaltadas que se utilizaron son efectivamente imágenes de retrato.

Las miniaturas del módulo Blog (modo "Rejilla" o "Diapositiva") utilizan un formato vertical de 400px * 250px - una proporción de 16:10.

Por eso, todas las imágenes de más de 400px y más altas de 250px se recortan automáticamente.

Y por eso se recortan las imágenes retrato o cuadradas.

Para dejar de recortar las imágenes y mantener su proporción y tamaño originales, basta con aumentar los valores del tamaño de las miniaturas.

Al establecer el tamaño en 9999px, te aseguras de que tus imágenes nunca serán recortadas (a menos que importes una imagen de 10.000px... ¡pero eso es imposible!).

// Begin stop cropping featured image in Divi Blog Module

function ld_blog_crop_image_width($width) {
	return 9999;
}
function ld_blog_crop_image_height($height) {
	return 9999;
}
add_filter( 'et_pb_blog_image_width', 'ld_blog_crop_image_width' );
add_filter( 'et_pb_blog_image_height', 'ld_blog_crop_image_height' );

// End stop cropping featured image in Divi Blog Module

Eso es todo, copie y pegue el código anterior en el archivo functions.php de su tema hijo o en un nuevo fragmento en la extensión Code Snippets.

A continuación, sólo tienes que actualizar la página y las miniaturas del módulo de tu blog se mostrarán al tamaño original, sin recortar.

Además, si utilizas diferentes alturas de imagen, tu módulo de blog mostrará un efecto de mampostería muy bonito...

¿Sabías que puedes probar Divi gratis? Ir a esta página y haz clic en "PRUEBA GRATUITA

3 - Imágenes recortadas en el módulo Portfolio

Para el módulo Portfolio, puede hacer lo mismo. De esta manera, las miniaturas de tus Proyectos Divi ya no serán recortadas.

El módulo Portfolio en modo "Grid " utiliza las dimensiones de 400px * 284px. En cuanto al módulo del blog, debes aumentar estos valores para que las miniaturas no se "corten".

Este es el código que hay que añadir:

// Begin stop cropping featured image in Divi Portfolio and Filterable Portfolio

function ld_portfolio_crop_image_width($width) {
	return 9999;
}
function ld_portfolio_crop_image_height($height) {
	return 9999;
}
add_filter( 'et_pb_portfolio_image_width', 'ld_portfolio_crop_image_width' );
add_filter( 'et_pb_portfolio_image_height', 'ld_portfolio_crop_image_height' );

// End stop cropping featured image in Divi Portfolio and Filterable Portfolio

Aquí está el resultado:

Después de añadir este código, simplemente actualice su página.

Tenga en cuenta que este código también funciona para el Módulo de cartera filtrable.

4 - Imágenes recortadas en el módulo Galería

El Módulo Galería de Divi utiliza el mismo tamaño de visualización que el módulo Portfolio: 400px * 284px.

En cuanto a los otros 2 módulos, tienes que aumentar estos valores para que las imágenes de tus galerías muestren el tamaño real...

Aquí está el código para añadir en el archivo functions.php de su tema hijo o en un nuevo fragmento de la extensión Code Snippets:

// Begin stop cropping featured image in Divi Gallery Module

function ld_gallery_crop_image_width($size) {
	return 9999;
}
function ld_gallery_crop_image_height($size) {
	return 9999;
}
add_filter( 'et_pb_gallery_image_width', 'ld_gallery_crop_image_width' );
add_filter( 'et_pb_gallery_image_height', 'ld_gallery_crop_image_height' );

// End stop cropping featured image in Divi Gallery Module

Y aquí está el resultado:

Como puede ver en esta captura de pantalla, las imágenes ya no están recortadas y muestran su proporción original.

No esperes más. Descubra el tema Divi aquí !

5 - Revisión: no hay imágenes recortadas en Divi

Los últimos 3 capítulos le dan el código individual para cada módulo (Blog, Galería, Portafolio). Esto es ideal si necesita cambiar el tamaño de las imágenes en sólo uno de los 3 módulos.

Por otro lado, si desea eliminar el recorte de las imágenes en estos 3 módulos, puede utilizar el siguiente código:

// Begin stop cropping featured image in Divi Portfolio + Blog + Gallery

function ld_stop_crop_image_width($width) {
	return 9999;
}

add_filter( 'et_pb_portfolio_image_width','ld_stop_crop_image_width' );
add_filter( 'et_pb_gallery_image_width','ld_stop_crop_image_width' );
add_filter( 'et_pb_blog_image_width', 'ld_stop_crop_image_width' );

function ld_stop_crop_image_height($height) {
	return 9999;
}

add_filter( 'et_pb_portfolio_image_height','ld_stop_crop_image_height' );
add_filter( 'et_pb_gallery_image_height','ld_stop_crop_image_height' );
add_filter( 'et_pb_blog_image_height', 'ld_stop_crop_image_height' );

// End stop cropping featured image in Divi Portfolio + Blog + Gallery

Por ejemplo, si utiliza la extensión Code Snippets para añadir su código, sólo le permitirá añadir un fragmento.

Por último, si desea para obtener miniaturas en formato cuadrado, lea este artículo.