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
avec le raccourci <embN> on obtient l’image en taille réelle
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" !
- vue-html.zip
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)
link=lien url http... : insertion automatique d’un lien permettant d’ouvrir la page web pointée par link=
link=0 : insertion automatique d’un lien vers la même page web
link=1 : insertion automatique d’un lien permettant d’afficher l’image en plein écran (link=1 est actif par défaut)
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
— - legende=texte libre : le texte passé dans le paramètre "legende" est utilisé
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|legende=mais où allons-nous ...> 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", agrémentée d’une légende.
RSS 2.0