Divi Tips 95 : image rognées Divi

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

Publicado el 19/05/2020 | 19 comentarios

1.153 palabras

5

Sé que te molesta esto... Es una pregunta que me hacen a menudo en los comentarios, por correo electrónico o durante las sesiones de formación: ¿Por qué Divi muestra imágenes recortadas?

Es cierto, a veces las imágenes que se utilizan están recortadas, recortadas, recortadas... Este es a menudo el caso de las imágenes destacadas (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.

Aviso: 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.

Puede cambiar los distintos tamaños siguiendo lo siguiente Guía completa de imágenes de Divi. Entenderás que todo es cuestión de tamaño y proporción.

Pero si :

=> No quiere definir un tamaño específico para sus imágenes.

=> Simplemente quiere mostrar las imágenes en su tamaño y proporción originales, tal y como las importó a su biblioteca.

Así que las siguientes explicaciones son una buena alternativa...

Descubre cómo 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. Si está utilizando un tema hijo, puede simplemente añadir el código a la sección 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 de forma segura.
4 Code Snippet
La extensión Code Snippets sustituye a un tema hijo.

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 entradas 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!

Blog Module Crop
No cambiar el tamaño de las imágenes destacadas en el módulo Divi Blog

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 destacadas que se han utilizado 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 ello, 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, puedes estar seguro 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, simplemente actualice la página y las miniaturas del módulo de su blog se mostrarán en su 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 haga 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 400px * 284px. Al igual que en el módulo del blog, estos valores deben aumentarse 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:

Portfolio Module Crop
Se acabó el recorte de las imágenes destacadas en el módulo Portfolio de Divi

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 Divi utiliza el mismo tamaño de visualización que el módulo Portfolio: 400px * 284px.

Al igual que con los otros dos módulos, debe aumentar estos valores para que las imágenes de su galería 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 este es el resultado:

Galerie Module Crop
Ya no se recortan las imágenes resaltadas en el módulo Galería Divi

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

No se demore. 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.

Sin embargo, 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 las miniaturas de formato cuadrado, lea este artículo.

Images Rognees Divi
Stopper Recadrage Divi
obtenir divi bouton
quizz divi bouton
newsletter bouton
formation divi bouton
guide divi pdf bouton
bouton support divi

Puede que a ti también te guste:

Comment changer une image au survol de la souris ?

¿Cómo cambiar una imagen al pasar el ratón por encima?

Si no estás usando las opciones de hover disponibles en Divi, ¡te estás perdiendo algo! Aquí tienes un ejemplo de cómo utilizarlos que te puede resultar útil. En este tutorial y vídeo, te muestro cómo cambiar una imagen al pasar el ratón por encima.

Page d’erreur 404 personnalisée : avec et sans le Divi Thème Builder

Página de error 404 personalizada: con y sin el Divi Theme Builder

¿Ha pensado en personalizar la página de error 404 de su sitio web? ¿No? Pues debería hacerlo: no sólo es fácil de hacer, sino que también podría reducir su tasa de rebote. La idea es mantener al usuario que pasa por su sitio en el mismo. Descubre el tutorial paso a paso + vídeo.

19 Commentaires

  1. zazvi

    Bonjour,
    J’ai bien collé le code dans le fichier functions.php de mon thème enfant, mais les images à la une restent toujours rognées… y a t il d’autres reglages a effectuer dans le backoffice?
    MErci par aavance
    E

  2. Lycia Diaz

    Salut Zazvi, tu dois peut-être régénérer les miniatures (regenerate thumbnails) ou bien tu n’as pas agit sur le bon code, à savoir celui destiné à modifier les images de mise en avant. Il faut revérifier. Courage !

  3. sandrine

    Bonjour,
    Et merci pour ce snippet dont je rêvais depuis longtemps. J’ai modifié le fichier functions php du thème enfant et ça fonctionne : je l’ai appliqué à un module galerie et l’effet est tellement plus beau pour montrer des gravures de formats différents !
    Mais pour que ce soit encore plus beau, y a t-il un moyen pour que l’espace séparant les vignettes en hauteur soit constant ? Actuellement, les espaces en hauteur sont réglés sur la plus haute image de chaque rangée et cela crée des blancs inesthétiques ou alors il faut ranger les images par taille, ce qui ne sera pas toujours possible. Je travaille en local, je peux vous faire une copie d’écran éventuellement. Mille merci pour vos astuces !

  4. Lycia Diaz

    Salut Sandrine. Je serai en face du problème je pourrais peut-être t’aider mais là c’est un peu à tâton. Du coup il faut voir si des options existent pour ça ou s’il faut ajouter quelques lignes de CSS

  5. Federico

    Thank you so much! I had inserted or scripted directly into. function.php but every time I updated Divi the images obviously came back cropped! Finally a definitive solution thanks to this post and the Code Snippets plugin!

  6. Thomas

    Testé pour les modules blogs et marche parfaitement, merci !

  7. Lycia Diaz

    Super !

  8. Javier

    Thanks!! a lot!!

  9. Maxime Bonnet

    Bonjour,

    Merci pour ce tuto

    Dans votre exemple, pour le module blog, les elements se mettent les uns en dessous des autres proprement un en effet comme une galerie masonry…

    Tandis que pour les galeries normales et les portefeuilles, l’affichage n’est pas tout à fait le même… car ils semblent tous dans la même ligne… je trouve ça horriblement horrible, n’avez-vous pas une solution pour les afficher en masonry comme pour le module blog ?

  10. Lycia Diaz

    Salut Maxime, non je n’ai pas de solutions, il faudrait chercher comment faire…

  11. Lycia Diaz

    Cool !

  12. Marcelo

    Hola! Solución para este problema pero con los módulos de Tienda? (WooCommerce)

    No quiero usar las miniaturas, ya que pierden calidad, quiero usar las imagenes originales.

  13. Lycia Diaz

    Hola Marcelo !
    ¿Ha indicado los tamaños de sus imágenes para los productos en la pestaña Apariencia > Personalizar > WooCommerce?

  14. William

    Perfect exactly what I was looking for.

  15. Lycia Diaz

    Great !

  16. Michael Vila

    Excellent article, worked great using the Code Snippet plugin thank you! Much faster and easier than creating a child theme.

  17. Lycia Diaz

    Cool !

  18. Bonin

    Cela fonctionne parfaitement dans le module blog. Merci ! Par contre comment faire pour que dans la page de l’article l’image à la une qui figure en tête de l’article ne soit pas rognée ?

  19. Serge

    Merci Lycia !

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pínchalo en Pinterest

Acciones
Comparte esto