Le Blog

Le blog laboratoire de F.L.D. Studio
0

Galerie Images display Flexbox

Galerie images flexbox

Introduction

De tous les 'composants' qui sont passés au display:flex ( menu,footer, gabarit de site, etc...) la galerie d'images à été le plus compliqué à mettre au point. Le cahier des charges de la galerie d'images est le suivant :

  • L'utilisateur administre sa galerie d'images , il charge et retire des photos à sa guise, nous ne savons pas à l'avance combien d'images seront affichées.
  • Les images peuvent être en mode portrait et en mode payasage.
  • Les images doivent occuper tout l'espace possible.
  • La galerie doit être responsive et doit donc s'adapter à plusieurs résolutions et tailles d'écrans.

En attendant le display grid qui sera la prochaine révolution en matière d'écriture du CSS nous utilisons le display flexbox qui constitu à ce jour la façon la plus simple d'aligner des éléments les un à coté des autres.

La taille des images

Pour une occupation optimale des images au sein de leur container j'ais conçus un utilitaire qui fait ce travail à ma place (;+). Il fournit la taille width et height d'une image ainsi que la marge de droite. Jusqu'a présent avec le display float que j'utilise il me permet de créer des vignettes à la taille exacte de mon besoin.

Avec le display flexbox et le responsive la taille des images ne doit plus être vue comme une définition exacte en pixels mais plutot comme un pourcentage de place utilisée au sein d'un container.

En effet la contrainte responsive de la galerie nous amméne à la considération suivante : 

Sur un écran de smartphone, considéré aujourd'hui comme ayant une largeur maximale de 320px nous allons afficher une ou deux images par rangée. Dans ce cas la largeur minimale d'une image dans une galerie sera toujours de 320px . Pour en placer plusieurs lorsque la largeur du viewport le permet il faut donc fournir à flexbox des tailles d'éléments non plus en pixels mais en pourcentage.

Exemple pour un container d'une largeur de 1200 pixels devant contenir 6 images avec une marge de 6px entre chaque on effectue le calcul suivant : 

 ( largeur d'une image en pixel / largeur container en pixel ) * 100

Pour les images :

  • ( 195 / 1200 ) * 100 = 16.25%

Pour les marges :

  • ( 6 / 1200 ) * 100 = 0.5%

La gestion des marges

La gestion des marges ou goutières peut être gérée de différentes façon avec flexbox. Sur le l'élément container de la galerie celui qui a le display flex, nous pouvons utiliser la propriété : justify-content.

La valeur space-between permet de disposer une marge autour de chaque images. L'inconvenient c'est que les images n'occupent plus tous l'espace du container. De l'espace est disposé à gauche de la première image de la rangée et à droite de la dernière.

La valeur space-around semble mieux correspondre à notre besoin, mais lorsque par exemple nous prévoyons une galerie de 4 images par rangée et que l'utilisateur en charge 6, la seconde rangée contient alors deux images avec un grand espace au milieu ( pas très esthétique )

Il nous faut donc gérer nos marges nous même. C'étais déjà le cas avec le display:float et comme avec le display float il nous faut gérer la marge droite de la dernière image d'une rangée. En supprimant la marge de la dernière image de chaque rangée nos images vont bien occuper tous l'espace de leur container et la marge ne sera pas modifiée en fonction du nombre d'images affichées.

Avec le display float on utilse une class (exemple .last) qui contenait la rêgle suivante : margin-right:0; Cette classe étais appliquée coté serveur lorsque le script PHP de création du balisage de la galerie devais afficher la dernière image de chaque rangée. Avec flexbox il n'est plus necessaire de le concevoir coté serveur car on peut désormais le faire coté navigateur à l'aide du CSS.

A l'aide du selecteur : nth-of-type(Xn) nous allons pouvoir supprimer la marge droite de la dernière image de chaque rangée. X = le numéro de la dernière image. Ainsi par exemple dans une galerie prévue pour 6 images par rangée, pour supprimer la marge de droite de la dernière image nous écrivons :

Dans cet exemple nous ciblons l'élément a ( enfant ) contenant les images du container flex des images : .img-gal-container

        .img-gal-container a:nth-of-type(6n){ margin-right:0; }
    
Dans cette exemple nous ciblons l'élément a (premier enfant) contenant nos images du container flex des images : .img-gal-container

Le responsif

Le dernier point de notre cahier des charges concerne les versions responsives de notre galerie. En utilisant une largeur en pourcentage nous avons déjà répondu à cette contrainte. Néanmoins afficher 6 images sur l'écran d'un smarphone les rends si petites qu'elles en deviennent illisiblent et surtout difficilement cliquables au vue de leur petites tailles.

Pour afficher moins d'images par rangée et donc des images plus grande il faut recalculer de nouvelles valeurs, pourcentage d'occupation d'une image et pourcentage de la marge droite en fonction de la nouvelle largeur de la galerie et du nombre d'image que l'on souhaite afficher.

Dans la partie media-querie de notre CSS nous allons pouvoir effectuer ces opérations. Pour la nouvelle largeur d'une image nous utilisons la propriété flex-basis qui indique la taille d'un enfant au sein d'un container flex. 

/* 600px */
  @media screen and (max-width: 37.5em) { .img-gal-container a{ /* 2 images par rangée */ flex-basis: 49.5%; margin-right:1%;
} }
    

Attention

Souvenons nous que nous avons supprimé précédement la marge droite de toutes les 6eme images des rangées. Cette fois nous n'en affichons plus que 2. Il faut donc rétablir la marge de droite des 6eme images avec la nouvelle marge calculée pour le media-querie et supprimer celle des secondes images.

Exemple 

/* rétablir la marge droite de toutes les 6eme images des rangées */ 
 .img-gal-container a:nth-of-type(6n){ margin-right:1%;
            } 
/* sup la marge droite de toutes les 2eme images des rangées */ .img-gal-container a:nth-of-type(2n){ margin-right: 0;
            }
        

Simplifier la gestion des marges

Cette technique permet de modifier le nombre d'images affichées par rangées. On peut ainsi passer par exemple de 4 images à 3 images mais comme on le voit ici elle implique de nettoyer les marges précédements positionnées et d'en recréer de nouvelles. A partir du moment ou on affiche deux images par rangée on peut gérer les marges plus simplement :

  • Modifier le positionnement des enfants dans le container parent à l'aide de la propriété : justify-content: space-between;
  • Supprimer toutes les marges droite des images, c'est flexbox qui se chargera de l'espacement entre les images.
  • Modifier de manière arbitraire et non plus à l'aide d'un calcul optimisé la taille de chaque enfant en rêglant leur taille à : 49,5%

Conclusion

Pour remplir les conditions de notre cahier des charges nous avons utilisés les techniques suivantes :

  • Container des images en display:flex; et avec la propriété align-items: flex-start; pour les formats portraits et paysages mélangés
  • Taille des images ( taille physique constante d'une largeur de 320 pixel ) exprimées en pourcentage d'occupation du container parent dans le CSS.
  • Taille des marges exprimées en pourcentage dans le CSS et supprimée sur la dernière image de la rangée.
  • Adaptation du nombre d'images à afficher en fonction de la taille du viewport et gestion des marges droites en conséquence.

Exemple fonctionnel

See the Pen Galerie Images FlexBox 2017 by Du Marais ( @DjF ) on CodePen .

Cerise sur le gateau, l'exemple utilisée ici modifie l'affichage sur smartphone ( media-querie : 400px ) en modifiant la rêgle du container parent en justify-content:space-between; et en modifiant la taille des images affichées celon une séquence de 1er image en taille maxi et répetition toutes les 5 images, ceci créant un rythme visuel sur les petits écrans.

Pour automatiser et personnaliser le plus possibe le CSS d'une galerie d'images fluides et responsives l'exemple ci dessus utilise des variables CSS ainsi que l'instruction calc().

Supports navigateurs

calc()

Variables CSS

Catégories: CSS

Tags: CSS, flexbox

Commentaires: Pas de commentaires

Envoyer un commentaire