Aller au contenu

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.

Pas le temps de tout lire ? L'essentiel à retenir !

Voici les "balises" les plus communes à ajouter après la parenthèse fermante de l'image (![légende](url_image){: balises }).

Pour les icônes/logos, alignées à gauche avec texte à droite, ajouter :

{: .img-thumbnail-left }

Ce qui donne donc :

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

Pour les images d'illustrations, centrées et au chargement optimisé, ajouter :

{: .img-center loading=lazy }

Ce qui donne donc :

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

Pour la suite, prenons deux exemples :


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)")

Image de Wikipedia

Infobulle

On note que la légende est ajoutée en infobulle qui apparaît au survol prolongé de la souris sur l'image.

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.

Geotribu logo

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.

Image de Wikipedia

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.

Geotribu old logo

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

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

Par exemple, dans l'exemple suivant, la première image aura le mode galerie mais pas la seconde :

![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 }

Par exemple, dans l'exemple suivant, la première image aura le mode galerie mais pas la seconde :

Texte de remplacement

FOSS4G-FR 2016

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" }

Bannière Geotribu. Par exemple, appliquer une largeur maximum, appliquer un centrage du texte et activer le chargement asynchrone sur une image. Ou centrer tout un paragraphe.



  1. étape où un contributeur propose d'intégrer ses modifications dans le socle principal du projet. Voir la documentation de GitHub

Commentaires


Ce contenu est sous licence Creative Commons BY-NC-SA 4.0 International Pictogramme Creative Commons Pictogramme Creative Commons BY Pictogramme Creative Commons NC Pictogramme Creative Commons SA