Tuto mise en page #4 - Comment ajouter une image dans son article [Markdown] ?

Il parait qu'une image vaut mieux que mille mots. Du coup, pourquoi s'en priver? Améliore considérablement tes articles en y ajoutant des images pertinentes (et des gifs aussi, mais ça, on y reviendra!)

Avec l'éditeur Markdown il est très simple d'ajouter des images.
Vous avez plusieurs possibilités selon que le fichier est déjà en ligne ou pas.

Le fichier n'est pas encore en ligne

Si le fichier n'est pas encore accessible en ligne et que vous avez le fichier sous la main, faites le simplement glisser dans la zone d'édition.
Autrement cliquez sur le bouton sous la zone d'édition Insert images by dragging & dropping, pasting from the clipboard, or by selecting them. Une fenêtre vous permettra de choisir l'endroit où se trouve la photo.

Dans les deux cas la photo va être envoyé est stockée sur steemitimages.com (Cette action est irréversible, ne faite pas de connerie, n'envoyez pas la capture d'écran de votre mot de passe Steemit!).
L'URL où est stockée l'image se retrouve dans l'éditeur à l'endroit ou se trouvait votre curseur :

![<NOM_DU_FICHIER>](https://steemitimages.com/identifiant-hash/image.png)

Le fichier est déjà en ligne

Autrement si le fichier est déjà accessible en ligne, il suffit de prendre l'URL et de l'ajouter dans cette structure même structure:

![DESCRIPTION DE L'IMAGE](https://www.mon-hébergeur.fr/chemin/vers/mon/image.png)

Pour ceux qui ont quelques connaissances en HTML, cette structure Markdown sera transformée en balise HTML IMG de la façon suivante :

<img src="https://www.mon-hébergeur.fr/chemin/vers/mon/image.png"/>

Centrer une image

Peu de gens utilisent cette fonctionnalité, mais il est en fait assez facile de centrer du contenu, une image par exemple.

Pour ce faire il suffit d'entourer cette image par deux balise <center>...</center> comme ci-dessous :

<center>
![](https://steemitimages.com/DQmayAXp98wA7UoqzyhxhTwfx74ko8vGBm5MJw2nfVdq7AT/signature.rox%20xsmall.png)
[Source](https://fontmeme.com/signature-fonts/)
</center>

Comme montré dans l'exemple, vous pouvez également placer un lien entre ces balises pour ajouter la source de votre image.

Résultat

Avoue que ça claque !

Source

Ajouter une image à gauche ou à droite du texte ✍ ?

Il est possible d'avoir face à face, du texte et une image. Un petit dans ce cas-ci : il faut utiliser du HTML au lieu du Markdown.
Dans tous les cas il est possible d'ajouter des balises HTML dans vos articles; c'est rarement nécessaire SAUF quand il faut emboiter les unes dans les autres.

Voici ce que ca donne :

## SOUS-TITRE

<div class="pull-right"> 
<center>
<img src="https://www.mon-hébergeur.fr/chemin/vers/mon/image.png"/>
<a href="LIEN VERS LA SOURCE">SOURCE DE L'IMAGE</a>
</center>
</div>

VOTRE TEXTE ICI

pull-right peut être remplacé par pull-left si vous voulez avoir l'image à gauche.

Résultat

SOUS-TITRE

Lorem ipsum dolor sit amet, vim et meis invidunt, novum probatus sed ex, vel agam utroque atomorum et. Ei malis forensibus appellantur mei, sed essent aliquip forensibus in, et iracundia consectetuer concludaturque quo. Dicat nusquam ne eos, nec ad duis iriure splendide. Eum et elitr contentiones, his id consul luptatum deseruisse. Sit at eros facilis gubergren, in laboramus signiferumque vis. Illum omnium has eu, ad noster luptatum perpetua mel, adolescens definiebas eu vix.

Ut vel amet omnesque disputando. Ius ut laudem sensibus percipitur, corrumpit reformidans ius an, nobis scriptorem an eos. Sit cu reque indoctum inciderint, has deleniti iudicabit explicari no. Pro in magna integre splendide.

Et si tu te dis que je suis bien gentille avec toute ces explications mais que tout ça ne t'explique ni où trouver de belles images gratuites et encore moins comment mettre une image à la bonne taille pour que ce soit agréable visuellement, soit patient, ça arrive !

---

Retrouve mes articles précédents sur #comprendre-steem !

• Nouveaux sur Steemit ?
  #1 | #2 | #3 | #4 | #5 | #6 | #7 | #8 | #9 | #10| #11| #12 | #13

• Comment mettre ses articles en forme ? #1 | #2 | #3

Cet article a été co-écrit avec @oroger, mon amoureux.

👉 Si tu aimes cet article, n'hésite pas à upvoter / commenter / resteemer.