FAT78 - Artisan numérique :-)
 

> Lab > Des images "responsives"

mardi 26 janvier 2016

Des images "responsives"

Puisque dans mon squelette "responsive" j’ai supprimé les filtres "|image_reduire", voici ce qui se passe si on insère, dans le texte de l’article, les images de la façon habituelle :
- avec le raccourci <docN> on obtient la vignette (cliquable) à taille fixe

JPEG - 114.3 ko

- avec le raccourci <embN> on obtient l’image en taille réelle

JPEG - 114.3 ko

Ce qui n’est pas du tout "responsive" !

Pour y remédier, on pourrait insérer les images en les plaçant dans un conteneur html dont on définira la largeur voulue en % et le paramètre max-width à la largeur réelle maximum d’affichage de l’image, comme ceci par exemple :

<div style="width:90%;margin:0 auto;max-width:800px;">
<img src="adresse url de l'image sur le serveur du site" width="100%" />
</div>

pour obtenir une image centrée et redimensionnée dynamiquement à 90% de la largeur de la colonne qui contient le texte.

Mais il y a plus simple ... j’ai écrit un nouveau modèle "vue.html" qui fait ce travail automatiquement : il suffit, tout simplement, d’insérer dans l’article <vueXX> où XX est le numéro ("identifiant") attribué par spip au fichier de l’image téléchargée pour que celle-ci s’affiche, parfaitement "responsive" !

L’image garde ses proportions natives et s’adapte automatiquement à la largeur de l’article.

En outre, j’ai prévu qu’on puisse affecter au conteneur de l’image les paramètres (facultatifs) suivants :
- align : alignement left, center ou right (par défaut = center)
- width : largeur en % (pour rester "responsive") (par défaut = 100%)
- maxwidth : largeur max en pixels (attention, écrire seulement la valeur, sans ajouter "px"), utile pour éviter que l’image affichée soit plus grande que la réelle ! (par défaut = largeur réelle de l’image)
- minwidth : largeur mini en pixel (attention, écrire seulement la valeur, sans ajouter "px"), utile pour éviter que l’image devienne un timbre poste ! (par défaut = 160)
- margin : marges gauche et droite (identiques) en % ou en pixels (par défaut = 0)
Ces paramètres sont suffisant pour insérer dans le texte une image en contrôlant l’emprise et le positionnement de son conteneur, qu’elle remplit à 100%.

Mais on peut aller plus loin avec les paramètres optionnels suivants :
- legende : texte (centré, italique, taille réduite) s’affichant sous l’image (par défaut = pas de texte)
— - legende=1 : texte = titre du document image (pas le nom du fichier)
— - legende=2 : texte = descriptif du document image
— - legende=3 : texte = titre + descriptif du document image
- imgwidth : largeur (en % ou en pixels) de l’image (par défaut = 100%)
- colorbgd : couleur du fond du conteneur de l’image (par défaut = "none")
Ces derniers paramètres permettent de redimensionner l’image elle même à l’intérieur de son conteneur (attention, dès qu’on donne des valeurs en pixels, l’image n’est plus "responsive").

On peu ainsi faire une mise en page particulière des images : par exemple, dans un conteneur de largeur = 60% de la largeur de l’article (limitée entre 300 et 600 pixels), sur fond vert foncé, calé à droite avec des marges de largeur = 5% de la largeur de l’article, une image qui occupe 80% de la largeur du conteneur ... pourquoi pas !

<vue3|width=60%|
minwidth=300|maxwidth=600|
colorbgd=beige|align=right
|margin=5%|imgwidth=80%>

Ainsi, la simple écriture de la balise <vue188> permet d’insérer dans l’article l’image d’identifiant "188", positionnée au centre et redimensionnée pour être affichée à 100% de la largeur de l’écran, mais limitée en largeur à la taille de l’image "188".


SPIP | | Plan du site | Suivre la vie du site RSS 2.0