Fiches détails / Taille de l'image principale

[camillemonchicourt]

Comme évoqué dans le sujet sur les tailles d'images dans Geotrek-admin (GeotrekCE/Geotrek-admin#3059 (comment)), le choix a été initialement dans Geotrek-rando-v3 d'afficher les images principales de chaque objet dans un bloc de 550px de haut sur Desktop.

Cela a été fait pour s'assurer que l'image ne prenne pas trop de hauteur et que l'on voit directement au moins le titre de l'objet, sans scroller.

Mais dans la quasi totalité des cas, cela coupe l'image et cela est renforcé plus l'écran utilisé est grand, car cela augmente la largeur tout en restant en 550px de haut.

Exemple sur un écran moyen où le bas de l'image est coupé :

Cela est lié à la classe CSS :

media (min-width: 1024px)
.desktop\:h-coverDetailsDesktop {
    height: 550px;

Celle-ci est configurée ici : https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/src/stylesheet.ts#L182

Pour ne pas rogner les images, on pourrait tout simplement supprimer cette hauteur fixe, ce qui donnerait dans ce cas :

On ne voit en effet plus le nom et les infos de base de l'objet sans scroller, mais l'image n'est pas détériorée.

Il faut peut-être aussi réduire les marges verticales entre des premières infos de la page pour les voir directement, voire mettre le fil d’Ariane et peut-être le titre avant la photo ?

En lien avec ce sujet, il y a une réflexion aussi sur le format des images quand on les agrandit, car là on exploite toute la zone de l'écran avec donc des rognages assez dommageables - #454

[dtrucs]

Pour ne pas rogner les images, on pourrait tout simplement supprimer cette hauteur fixe.

En testant cette idée, je rencontre une limitation pour les covers avec carousel.
À l'initialisation de la page, le carrousel prend bien la taille de la première image (comme une simple image dans le test ci-dessus).
Lors du défilement des images, le carrousel redéfinit sa hauteur avec l'image la plus haute de la série, ça fonctionne mais cela présente une forte marge en bas lorsqu'on revient sur des images moins hautes.