Intégrer une image#

Cette page détaille les différentes possibilités d'intégration d'une image sur site de Geotribu. Globalement, c'est la syntaxe de base du Markdown étendue par différentes possibilités, notamment celle d'affecter des attributs HTML à la volée (merci attr_list), ce qui est bien pratique pour gérer le redimensionnement, le positionnement, etc.

{: .img-thumbnail-left }

![Texte de remplacement utilisé aussi comme légende](https://url_de_l_image.extension){: .img-thumbnail-left }

{: .img-center loading=lazy }

![Texte de remplacement utilisé aussi comme légende](https://url_de_l_image.extension){: .img-center loading=lazy }

Pour la suite, prenons deux exemples :

• une image externe, c'est-à-dire hébergée ailleurs que sur le CDN de Geotribu : https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Coronelli_globe_terrestre.jpg/360px-Coronelli_globe_terrestre.jpg du globe terrestre de Coronelli, issue de cette page Wikipedia https://fr.wikipedia.org/wiki/Globes_de_Coronelli
• une image interne, hébergée sur le CDN de Geotribu : https://cdn.geotribu.fr/img/internal/contribution/embed_image/coronelli_globe_celeste.jpg du globe céleste de Coronelli, issue de la même page Wikipedia mais téléversée sur le CDN de Geotribu

Syntaxe générale#

En markdown, intégrer une image se fait via la syntaxe suivante :

![Texte de remplacement au cas où l'image ne soit pas accessible](https://url_de_l_image.extension "Légende de l'image"){: balises d'attributs HTML }

À noter que par défaut, le texte de remplacement est utilisé comme légende qui est donc optionnelle. Ce qui donne donc :

![Texte de remplacement au cas où l'image ne soit pas accessible](https://url_de_l_image.extension){: balises d'attributs HTML }

![Texte de remplacement au cas où l'image ne soit pas accessible](https://url_de_l_image.extension "Légende de l'image"){: balises d'attributs HTML }

<!-- avec notre image externe, ça donne donc -->
![Image de Wikipedia](https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Coronelli_globe_terrestre.jpg/360px-Coronelli_globe_terrestre.jpg "Globe terrestre de Coronelli (Wikipedia)")

Style, position et dimension#

Par défaut, les images sont détourées d'une fine bordure gris foncé mais il est possible d'ajuster ce comportement :

• soit en utilisant les balises pré-configurées
• soit de personnaliser les attributs et classes CSS individuellement pour chaque image

Le site utilise l'extension Attribute Lists permettant d'affecter dynamiquement des attributs HTML en utilisant la syntaxe Markdown.

L'idée étant que l'attribut corresponde à un style CSS défini dans le fichier extra.css.

Vignette#

C'est le style appliqué pour les icônes des news des revues de presse : {: .img-thumbnail-left }.

![Geotribu logo](https://cdn.geotribu.fr/img/internal/charte/geotribu_logo_254x254.png "Logo de Geotribu"){: .img-thumbnail-left }

La balise `{: .img-thumbnail-left }` permet d'appliquer automatiquement le style vignette à l'image : pas de bordure, taille limitée à 75px, alignement à gauche et texte autour.

Centrer#

C'est le style le plus appliqué pour les images d'illustration des contenus : {: .img-center }.

![Image de Wikipedia](https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Coronelli_globe_terrestre.jpg/360px-Coronelli_globe_terrestre.jpg){: .img-center }

La balise `{: .img-center }` centre l'image par rapport au contenu.

Aligner à droite#

Pour aligner une image à droite, utiliser : {: .img-right }.

![Geotribu old logo](https://cdn.geotribu.fr/img/internal/charte/old_geotribu_logo.png "Ancien logo de Geotribu"){: .img-right }

La balise `{: .img-right }` permet d'aligner l'image à droite en laissant le texte autour, sans changer les dimensions.

Lightbox (mode galerie)#

Grâce au plugin Mkdocs GLightbox, les images sont automatiquement visibles dans un mode galerie (communément appelé lightbox) sans syntaxe additionnelle (depuis cette Pull Request d'octobre 2022).

Par défaut, toutes les images sont concernées sauf :

• les vignettes, donc les images avec la balise {: .img-thumbnail-left }
• les emojis

Il est possible de désactiver le mode galerie sur une image en particulier en lui attribuant la balise {: .off-glb }.
Il est possible de désactiver le mode galerie sur tout une page en ajoutant glightbox: false à l'en-tête du fichier

![Texte de remplacement](https://cdn.geotribu.fr/img/internal/charte/geotribu_banner.jpg){: loading=lazy width=200px }

![FOSS4G-FR 2016](https://cdn.geotribu.fr/img/articles-blog-rdp/divers/foss4g-geotribu.JPG "Une partie de l'équipe Geotribu au FOSS4G-FR 2016"){ loading=lazy width="200" .off-glb }

Style personnalisé#

Au-delà des styles prédéfinis, il est évidemment possible de personnaliser à la volée :

![Bannière Geotribu](https://cdn.geotribu.fr/img/internal/charte/geotribu_banner.jpg "Bannière de Geotribu"){: width=100px loading=lazy align=middle }.
Par exemple, appliquer une largeur maximum, appliquer un centrage du texte et activer le chargement asynchrone sur une image. Ou centrer tout un paragraphe.
{: text-align="center" }

Commentaires