Album photos Web Responsive avec les styles Css

Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :


Sujets que vous pourriez aussi aimer :


Album photos Responsive

A l'occasion de l'astuce Css précédente, nous avons appris les techniques relativement simples permettant de rendre des pages Web Responsives. En d'autres termes, nous avons réussi à adapter automatiquement l'organisation des données à la plateforme. En effet, le mode de consommation d'un site diffère complètement d'un ordinateur de bureau à un Smartphone par exemple. Désormais, nous souhaitons canaliser ces acquis pour relever un défi a priori plus corsé. Il est question de créer un album photos Mobile Friendly, donc aussi facile à consulter quel que soit le support.



Sur l'exemple illustré par la capture, nous visionnons donc un album photos. Les images sont parfaitement organisées à raison de trois photos par ligne. Et si l'utilisateur choisit de réduire la largeur de la fenêtre, les images rétrécissent leurs dimensions pour continuer de s'afficher côte à côte. Dans le même temps, les textes descriptifs adaptent la taille de leur police.

Mais lorsqu'une certaine limite inférieure est atteinte et que l'espace devient trop restreint, les éléments Html changent complètement de comportement. Les photos et les descriptions se positionnent les uns en dessous des autres. Cet ajustement radical offre un affichage parfaitement dédié pour une consultation depuis un appareil mobile. Et nous le verrons, malgré le défi annoncé, l'aboutissement de la solution est relativement simple.

Sources de travail
Pour la mise en place de cette nouvelle astuce Css, nous proposons d'appuyer l'étude sur une page Web relativement organisée par les styles et hébergeant déjà ces photos.

• Télécharger le fichier compressé album-photos-responsive.rar en cliquant sur ce lien,
• Puis, le décompresser dans le dossier de votre choix,

Le fichier de la page Web pour l'album photos se nomme index.htm. Il est accompagné de sa feuille de styles dans le sous dossier Css et des images dans le sous dossier Img.

• Double cliquer sur le fichier index.htm pour l'ouvrir dans le navigateur Web par défaut,

Vous en conviendrez, le rendu livré au premier chargement est pour le moins surprenant et très éloigné a priori du résultat à aboutir. Les photos dont les résolutions ne sont pas du tout adaptées apparaissent en plein écran, les unes sous les autres avec les descriptifs associés. Par contre si vous redimensionnez drastiquement la fenêtre du navigateur en largeur, vous remarquez que l'organisation est presque satisfaisante pour un appareil mobile.



Ce sont des réglages Css déjà définis qui dictent aux éléments Html de la page d'ajuster automatiquement leurs dimensions à la fenêtre du navigateur.

• A la racine du dossier de décompression, cliquer droit sur le fichier index.htm,
• Dans le menu contextuel qui suit, choisir de l'ouvrir avec un éditeur comme le Notepad ++,

Nous affichons ainsi la structure Html de la page Web. La référence à la feuille de styles (mes-styles.css) est clairement annoncée en entête de code. Plus bas dans la page, nous trouvons la construction qui nous intéresse. Elle consiste en une imbrication de calques (Balises Div) :

...
<div class="margeHaut">
<div class="calqueImg">
<div class="carte">
<img src="img/photo1.jpg">
<div class="conteneur">
<span class="texte">Les vacances : Les Claps - Luc-en-Diois</span>
</div>
</div>
</div>

<div class="calqueImg">
<div class="carte">
<img src="img/photo2.jpg">
<div class="conteneur">
<span class="texte">En chemin sur la route Napoléon</span>
</div>
</div>
</div>

<div class="calqueImg">
<div class="carte">
<img src="img/photo3.jpg">
<div class="conteneur">
<span class="texte">Vue dominante après le passage du col</span>
</div>
</div>
</div>
</div>
...

Il existe deux calques parents associés au style margeHaut. Ils regroupent chacun trois photos. Mais ces balises img sont elles-mêmes encapsulées dans deux calques. Le premier est associé au style calqueImg tandis que le second est associé au style carte. Ce second calque est simplement utilisé pour donner un effet de carte de visite aux photos. C'est une ombre portée un peu particulière qui est appliquée. Nous le constaterons. Le descriptif quant à lui trouve sa place dans une balise de type span associée au style texte. Et ce texte appartient bien aux mêmes calques parents que ceux de son image. Donc, il doit suivre le mouvement.

• A la racine du dossier de décompression, double cliquer sur le sous dossier Css pour l'ouvrir,
• Dès lors, cliquer droit sur la feuille de styles mes-styles.css,
• Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad ++,

Vous notez la présence de quelques styles dont certains que nous avons évoqués. Le style du calque conteneur se contente de créer des espacements avec une marge pour aérer la présentation :

.margeHaut{margin-top:16px}

Le style du calque des images réalise des décalages (padding) entre chacune, là aussi pour les espacer.

.calqueImg
{
padding:0 8px;
width:100%;
}

Mais surtout vous notez que son attribut width est réglé à 100%. C'est la raison pour laquelle les photos sont étirées sur toute la largeur disponible au chargement de la page Web. Et nous ne devons surtout pas toucher à ce réglage car il convient parfaitement à la version Smartphone. Comme nous l'avons appris au cours de l'astuce précédente, nous allons créer une règle lui dictant d'adapter son comportement au contexte.

Ensuite, le style carte exploite la propriété Css box-shadow avec de nombreux arguments, pour donner cet aspect de carte de visite par les ombres portées :

.carte{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}

Plus haut dans la feuille, le style texte se contente de fixer la taille de la police à 17px pour les descriptifs des photos. Cette taille est tout à fait satisfaisante pour un affichage Smartphone.

.texte{font-size:17px;}

Et pourtant, nous l'avons évoqué au cours de la présentation, la taille du texte doit elle aussi s'ajuster. Là encore, tout est une question de comportement à adapter en fonction des dimensions de la fenêtre.

Comportement des calques
Précisément pour gérer ces comportements, c'est une règle media que nous devons mettre en place comme lors de l'astuce précédente. Tant que la taille de la fenêtre ne descend pas en dessous d'une largeur minimale, nous devons modifier dynamiquement la taille de la photo ainsi que la taille du descriptif, en cohérence avec les dimensions de l'espace disponible.

• Après le style carte, ajouter la règle suivante :

@media (min-width:600px)
{
.calqueImg
{
width:33.33333%;
float:left;
}
.texte
{
font-size:1.2vw;
}
}

C'est le symbole de l'astérisque qui annonce la règle. Le mot-clé media est essentiel. Il désigne la page Web dans sa globalité. La condition de cette règle est écrite dans les parenthèses. Tant que la largeur minimale de la fenêtre n'est pas passée sous les 600 pixels (min-width:600px), les comportements doivent s'ajuster selon les réglages Css entrepris dans les bornes de cette règle. Le premier calque concerné est celui régi par le style calqueImg, celui des photos. Il ordonne à ces dernières d'occuper un tiers de l'espace (width:33.33333%) pour qu'elles puissent cohabiter sur une même ligne. Et pour qu'elles acceptent de se placer les unes à côté des autres, nous réglons dans la foulée l'attribut float sur la valeur left. Le second calque concerné est celui des descriptifs, régi par le style texte. Nous réglons la taille de la police sur une valeur relative à la taille de l'espace disponible, grâce à l'unité vw.

• Enregistrer les modifications (CTRL + S) et revenir sur la page Web,
• Puis, actualiser le cache du navigateur avec le raccourci clavier CTRL + F5,

Le résultat pourrait sembler presque magique. Les photos et leurs descriptifs acceptent de se positionner côte à côte au détail près que la troisième file sur la ligne du dessous. Tout est une question de détail. Mais l'aboutissement de l'album photos responsive ne semble pas bien loin. En effet, si vous réduisez la largeur de la fenêtre en dessous de la dimension définie par la règle, les éléments Html changent de comportement pour se placer en file indienne. Ils adoptent une organisation tout à fait appropriée pour un affichage sur un appareil mobile.

Contraindre les dimensions
Pour finir, nous l'avons dit, tout est une question de détail. Dans une construction Html, il existe des décalages naturels, des bordures ou autres espacements entrepris volontairement qui viennent s'additionner aux dimensions définies. Toutes ces sommes font que le tiers disponible, réservé normalement aux photos, ne l'est précisément plus. C'est une infime dérive qui repousse la troisième image sur la ligne du dessous. Pour corriger ce défaut et rester calé au plus juste sur la largeur de la page, les styles Css proposent la propriété box-sizing. Correctement calibrée, elle permet d'inclure ces unités en surplus dans les dimensions naturellement définies. En d'autres termes, nous allons contraindre les éléments Html à la taille de la boîte, celle de l'espace dans la fenêtre.

• Revenir dans le code de la feuille de styles,
• En entête, avant le style html,body, créer le nouveau style suivant :

*{box-sizing:border-box;}

C'est par esprit de cohérence que nous le plaçons en entête. Le symbole de l'astérisque désigne tous les éléments Html. Donc, toutes les balises vont être impactées par ce réglage. Grâce à la valeur border-box passée à la propriété Css box-sizing, nous contraignons toutes les dimensions à celles définies par les attributs. Littéralement, nous les comprimons à la taille initiale de la boîte. Bref, nous corrigeons toutes les petites dérives.

• Enregistrer toutes les modifications et revenir sur la page Web,
• Puis, actualiser le cache du navigateur (CTRL + F5),

Comme vous pouvez le voir, la troisième image remonte sur la même ligne que les deux précédentes. Nous obtenons un album photos qui présente les images sur deux lignes et trois colonnes.



Si vous réduisez progressivement la taille de la fenêtre, les dimensions des photos s'amenuisent grâce à la règle (media) pour continuer de s'accepter côte à côte dans la présentation. Et dans le même temps, toujours grâce à la règle, les tailles de police régressent elles aussi en accord avec l'affichage redimensionné.

Enfin, si vous continuez de diminuer la taille de la fenêtre jusqu'à passer en dessous de la taille minimale définie par la règle, les comportements basculent pour adopter les réglages Css définis à l'origine dans la feuille de styles. Les calques des photos occupent tout l'espace disponible en largeur. De fait, ils se positionnent désormais les uns en dessous des autres avec des descriptifs à 17 pixels pour un affichage optimisé pour les appareils mobiles.