Te gusta imágenes cuadradas ? ¡Yo también! Y el imágenes cuadradas en Divi¡No siempre es fácil!
Por lo tanto, propongo un sencillo tutorial para mostrar Imágenes cuadradas en la galería Divi y módulos Portfolio.
No hace falta saber cómo codificar... Algunas líneas CSS o PHP bastarán y simplemente puede copiarlas y pegarlas de este artículo.
De todos modos, no hay necesidad de arrancar el pelo...
1 – Imágenes cuadradas Divi... ¡no tan fácil!
No sé por qué, sigue siendo un misterio, pero ElegantThemes no ha planeado nada para facilitarnos el trabajo. imágenes cuadradas…
Es un formato que realmente aprecio y supongo que no soy el único... Sin embargo, no existe ninguna opción fácilmente obtener imágenes cuadradas al configurar los módulos Gallery y Portfolio...
Así que antes de empezar, eso va sin decir, tu biblioteca ya tendrá que contener imágenes en formato cuadrado, es decir, con una relación 1:1.
Módulo de código Divi
- Imágenes 1000px * 1000px
- Imágenes 800px * 800px
- Imágenes 500px * 500px
- Etc.
El ratio de imágenes es muy importante en la web y te invito a leer esta guía de fotos para Divi : este tutorial le permitirá reescribir los tamaños de imagen utilizados en Divi de una manera global.
Sin embargo, esto requiere algún conocimiento de WordPress y Divi y pueden enfriar algunos principiantes.
Así que aquí hay una forma muy simple de cambiar la visualización de las imágenes de los módulos Galería y Portfolio Sin poner tus manos en el código...
¿Sabes que puedes probar Divi gratis? Nos vemos en esta página y haga clic en "Pruébalo GRATIS"
2 - Imágenes cuadradas para el módulo de galería
Insertarla módulo de galería dentro de su página usando el Editor Visual...
Usted será capaz de seleccionar todas las imágenes para mostrar desde pestaña "Contenido". Entonces, desde "Estilo" ficha, asegúrese de elegir el Modelo de rejilla.
La preocupación es que el módulo de galería ofrece sólo dos posibles orientaciones: Paisaje o Retrato...
Desafortunadamente, dependiendo del tamaño de sus imágenes cuadradas, serán recortadas (cropped) y todavía se mostrarán en orientación paisajística o retrato... ¡Rrrrr!
Como se puede ver en la captura anterior, las imágenes cuadradas muestran en formato paisajístico... Para corregir esto, esto es lo que necesitas hacer:
Dentro de su diseño, justo debajo del módulo de galeríainsertar un Módulo de código y entrar en las siguientes líneas CSS:
<style>
.et_pb_gallery_item img {
position: absolute;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
.et_pb_gallery_image {
padding-top: 100%;
}
</style>¡Eso es, eso es! Aquí está el resultado:
3 – Imágenes cuadradas para el módulo Portfolio
El Módulo de cartera es útil si usas el Divi 'Proyectos '. Los proyectos se comportan de la misma manera que los artículos del blog. Son publicaciones dinámicas. El Módulo de cartera (o Portfolio) es un primo cercano Módulo de Blog Divi: muestra tus últimas publicaciones "Proyectos".
Para obtener imágenes cuadradas con módulo de cartera, procederemos de la misma manera que para módulo de galería, es una variante del código ...
En primer lugar, su sitio debe estar en posesión de proyectos ya publicados y éstos deben tener un imagen resaltada en formato cuadrado 1:1.
Dentro de su diseño, agregue un módulo Portfolio:
Desde pestaña "Contenido", puede filtrar proyectos para mostrar. Desde entonces, "Estilo" ficha, no olvides seleccionar Modelo de rejilla.
Desde Ficha de estilo, también puede personalizar la apariencia del módulo y los proyectos... Puede añadir una sombra, frontera, cambiar el tamaño y la fuente del texto, etc.
En la imagen anterior, se puede ver que mis proyectos miniaturas de pantalla en formato paisaje... Sin embargo, las imágenes usadas están bien en formato cuadrado !
Para corregir esto, añadir un Módulo de código justo debajo de Módulo de cartera e introduzca el siguiente código:
<style>
.et_portfolio_image {
padding-top: 100%;
}
.et_portfolio_image img {
position: absolute;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
</style>Como con el módulo Gallery, añadir estas pocas líneas CSS le permite obtener rápidamente y fácilmente Mostrar proyectos con imágenes cuadradas.
Aquí está el resultado:
¡No te demores! Descubre el tema Divi aquí. !
4 - Imágenes cuadradas para el módulo Blog
Para obtener imágenes cuadradas en las miniaturas del módulo Blog, algunas líneas CSS no serán suficientes.
Usted necesitará añadir algunas líneas de PHP al archivo funciones. php de su tema niño.
Si no tienes un tema infantil, puedes usar extension Snippet Code que hará el mismo trabajo. ¡Es incluso más simple!
// Begin square featured image in Divi Blog Module
function ld_blog_square_image_width($width) {
return 300;
}
function ld_blog_square_image_height($height) {
return 300;
}
add_filter( 'et_pb_blog_image_width', 'ld_blog_square_image_width' );
add_filter( 'et_pb_blog_image_height', 'ld_blog_square_image_height' );
// End stop square featured image in Divi Blog ModuleAl insertar el código anterior, las miniaturas del módulo del blog se mostrarán en formato cuadrado.
El valor "300" está en pixel. Puedes cambiar este valor si es necesario.
5 - Otra manera de conseguir imágenes cuadradas en Divi
Esta manera de obtener imágenes cuadradas para galerías, blogs y carteras Divi es muy fácil, lo has visto.
Sin embargo, si desea obtener tamaños de imagen muy específicos, usted debe seguir este tutorial para cambiar los tamaños impuestos por Divi.
Extensión Tamaño de imagen simple es precisamente fácil de usar como se explica aquíSin embargo, tenga en cuenta que su desarrollador no lo ha actualizado en algún tiempo (esto no significa que no sea eficaz).
Para ir más lejos con las imágenes de Divi, sugiero una lista de reproducción interesante:
- 6 Diseños de fronteras únicos para su módulo de galería Divi Imágenes
- La diferencia entre imágenes cubiertas y imágenes destacadas en WordPress
- La guía final para usar imágenes dentro de Divi
- Cómo regenerar las miniaturas y las imágenes de cultivos en WordPress
Super intéressant, merci !
Merci Carlos !
C’est vrai qu’il est important que les images ne soient pas croppées car dans certains cas ça peut être un facteur de ralentissement de la performance du site, d’une part.
D’autre part, j’ai pris l’habitude via Lightroom et photoshop de ne produire que des photos carrées et compressées, ceci principalement pour une question d’homogénéité de présentation de mes produits.
Par ailleurs pour le « Responsive » au niveau portable, ça peut éviter de se retrouver avec des commentaires de Google que les photos ne sont pas adaptées car trop larges.
Enfin, si on veut produire également sur Instagram, le format carré est plus que recommandé.
Oui, moi aussi j’aime bien utiliser le format carré, ça passe partout !
merci beaucoup ! j’ai enfin trouvé des réponses à mes questions et des solutions à mes problèmes !!
Super !
Hello,
Merci pour ton article très intéressant.
Comment faire si je souhaite faire des images dans un autre format que carré ?
Par exemple 200 x 300
Merci
Salut Minh,
Je pense que c’est ce tuto dont tu as besoin : https://astucesdivi.com/taille-images-de-divi/
C’est gentil mais j’ai fait tout ce que dit l’article et cela n’a pas fonctionné.
Les miniatures du module gallery sur ma home sont toujours rognées en largeur.
Si tu as une idée de ce qui a posé pb je suis preneur de ton aide 🙂
Salut Minh, j’ai une petite idée : quelle sont les tailles des images que tu uploades ? Charge une image de 1000px ou 1200px minimum et regarde si elle est rognée aussi.
Les images que je charge font 1920 1080.
Je viens de tester avec une image de 1290 px x 861 et ce la ne change rien, l’image est croppée.
(Pour info ce sont les images en dessous du player youtube sur cette page : http://www.pokeslide.com )
Je vais regarder demain depuis mon ordinateur car ton lien ne fonctionne pas sur mon mobile. Bizarre
Sorry.
Pas étonnant, j ai fait une typo et oublié le c à com…
le site est http://www.pokeslide.com
Salut Minh,
Très joli site…
Si tu inspectes le code source de ta page, tu verras que ce sont des miniatures recadrées par Divi qui sont utilisées (400px*284px). Donc, soit tu suis à la lettre (en l’adaptant) ce tuto : https://astucesdivi.com/taille-images-de-divi/ pour changer les tailles utilisées par le module Portefeuille, soit tu utilises uniquement des images de 800px*568px (ou 1200px*852px) que tu recadres à ta sauce dans un logiciel photo. Je ne vois que ça…
Bonjour Lycia,
Chouette tuto, ça fonctionne impeccable merci !
Par contre, petite question concernant les vignettes. Elles ne sont pas cropées comme je l’aimerais. Comment y remédier stp ?
Désolé, j’avais pas vu que Minh avait le même soucis que moi et votre réponse.
En effet en inspectant je vois que mes miniatures sont également en 400*284.
Je comprends pas trop votre commentaire : « soit tu utilises uniquement des images de 800px*568px (ou 1200px*852px) que tu recadres à ta sauce dans un logiciel photo. »
Je recadre comment, au ratio 1:1 ? Merci
Décidément je pose les questions trop vite puisque je crois avoir trouvé dans votre lien. Ratio 100:71.
Super Jerome, alors tu vas pouvoir faire 😉
Merci, je cherche ça depuis longtemps et ça marche vraiment super!
Parfait ! Raphaël 😉
Bonjour, merci pour le tuto.
Moi j’ai le même soucis pour la partie blog. Je veux que mes images principales s’affichent en carré sauf qu’il ne me le fait pas tout le temps en tout cas sur la page d’accueil du site.
Le code que tu donne c’est pour le module code ou pour le fichier function.php du thème enfant ?
Salut Audrey, tout est expliqué dans le tuto. Selon le code à ajouter tu utilises le module code ou le thème enfant. Pour le chapitre 4 de cet article, celui qui devrait t’intéresser, il s’agit du fichier functions.php du thème enfant.
Super merci pour cette astuce!
Et… y a-t-il possibilité de manager deux galeries avec des formats différents sur la même page?
Hé oui j’ai une galerie pour des images au format carré et en dessous une autre pour des formats rectangulaires, et du coup tout passe en carré 🙁 …
Salut Bernard ! En fait, il faudrait que tu mettes une Classe CSS sur ta galerie. Et dans le code CSS, tu n’appelles que les galeries qui sont dotées de cette Classe
Bonjour, merci pour ce tuto. Petite question néanmoins, mes images s’affichent correctement dans le portfolio en format carré, mais la miniature est très pixélisée (or la photo chargée a été optimisée pour le web). Avez-vous une astuce pour cela ?
Merci et bonne journée
Super astuce, j’adore et la décline souvent !
Je me trouve bloquée par contre pour la dupliquer sur un format portfolio pleine largeur… Possible ?
Ca y est, j’ai finalement trouvé un bout de code le permettant en passant par la personnalisation du CSS (et non plus par le module code comme proposé ici). Merci pour tous les tutos vraiment bien construits. Une aide précieuse !!
Merci Lucie pour ton retour
Coucou Elodie, je pense qu’il faudrait redéfinir la taille des images https://astucesdivi.com/taille-images-de-divi/. (désolée du retard, ton commentaire était dans mes spams)
Bonjour,
Merci pour cet article, très utile !
Je souhaite modifier les marges internes entre chaques images, est-ce possible ?
Merci par avance
Anais, as-tu essayé avec les options du module ou bien en CSS ?
Bonjour Lycia !
Merci tellement ! Apres avoir galeré pendant 3h, on m a envoyé ce lien et c’est parfait ! Je m arrachais les cheveux pour faire des images rondes dans le module blog…
J’ai dû ajouter du css derriere pour separer un peu les items mais franchement merci ! L ajout de php, je n y aurais jamais pensé…
Merci Aline !
Bonjour Lycia,
Merci pour ce tuto, en revanche, si ça fonctionne bien pour la galerie et le portfolio, impossible de faire fonctionner le code pour le blog…
J’ai ajouté le code à la fin du fichier functions.php de mon thème enfant comme indiqué dans le tuto mais rien n’a changé… J’aimerais éviter de rajouter une extension pour faire ça, mais du coup est-ce que tu as une idée des raisons qui pourraient faire que ça ne marche pas ?
Merci !
Salut Marie, il faut que tu adapte ce code selon ton propre site. Regarde si les « class » sont correctes par exemple.