Aller au contenu

Intégrer une image

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

<!-- 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`

Tip

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


Héberger une image sur le CDN de Geotribu

Traditionnellement, nous hébergeons les images sur notre propre serveur pour plusieurs raisons :

  • ça évite de surcharger les serveurs des autres sites en pointant dessus
  • ça évite les restrictions liées au "partage de ressources entre origines multiples", enfin le CORS quoi
  • ça permet de garantir de toujours disposer des images, même si elles n'existent plus à l'adresse originale (site supprimé, refonte du site, etc.)

Warning

L'accès au CDN de Geotribu est réservé à l'équipe. Même si nous laissons les liens vers les images en public, merci de ne pas pointer dessus abusivement depuis d'autres sites.

Bonnes pratiques

Sur le site historique de Geotribu, la difficile gestion des images a laissé en héritage chaotique : doublons en pagaille (jusqu'à 10 exemplaires dans certains cas...), noms d'images abscons rendant impossible la recherche, caractèrs spéciaux, dimensions démesurées (qui avait même provoqué un crash du serveur à l'époque 💥 !), etc.

Merci de suivre au mieux ces recommandations qui permettent de garantir une utilisation sereine des mêmes ressources par plusieurs personnes 🙏 :

  • chercher d'abord si l'image n'existe pas déjà (voir structure du CDN)
  • redimensionner les images avant de les téléverser (= uploader) : 800px maximum en largeur ou en hauteur sont largement suffisants pour illustrer un article ou une news sur Geotribu.
  • utiliser des formats avec de bons niveaux de compression :
    • JPEG ou mieux JFIF, PNG, WebP.
    • à éviter Bitmap, Tiff, etc.
  • nommer proprement les fichiers :
    • choisir un nom explicite qui permette la recherche par d'autres : carte_densite_nyt.jpg plutôt que 0f1f4706b8f1ea520747e3fd231a5bd0.jpg (ce dernier exemple n'est pas une invention spontanée, il correspond réellement à une image stockée dans le CDN...)
    • pas de caractères spéciaux (espaces, accents, etc.)

Ce n'est évidemment pas exhaustif et il n'y a pas de brigade des images dans l'équipe, on s'en remet donc au bon sens de chacun/e 🙂.

Structure

Globalement, voici comment les images sont organisées :

  • racine : 🚨 éviter d'ajouter de nouvelles images ici 🚨
  • articles-blog-rdp :
    • captures d'écrans utilisées pour illustrer une revue de presse
  • external
  • internal : ressources propres au site.
    • charte graphique
    • photos des contributeurs : nommage avec initiale du prénom et 3 premières lettres du nom
    • images liées à la section contribution du site, de cet article entre autres (captures d'écran, exemples, etc.)
    • icônes créées par Geotribu pour symboliser le sujet d'une news d'une revue de presse
  • logos-icones : entreprises, associations, logiciels, librairies, technologies, etc. Idéales pour l'icône d'une news de revue de presse.
  • projets-geotribu
  • slideshow : images du diaporama sur l'ancien site de Geotribu. Elles étaient pour la plupart pré-découpées en rectangle mais ça peut toujours servir à ds fins d'illustration. 🚨 éviter d'ajouter de nouvelles images ici 🚨.
  • tuto : contenus liés aux tutoriels publiés. Un sous-dossier par tutoriel.

Pas à pas

  1. Se connecter à au gestionnaire de fichiers en ligne : https://cdn.geotribu.fr/tinyfilemanager.php

    Tiny File Manager - Formulaire d'authentification

    l'identifiant et mot de passe sont transmis sur demande sur le Slack de l'équipe

  2. Utiliser la recherche pour savoir si jamais une image correspond au besoin

  3. Se positionner dans le dossier souhaité
  4. Cliquer sur ☁ Envoyer
  5. Glisser/déposer ou sélectionner l'image

    Téléverser une image

  6. Cliquer Retour et récupérer l'URL de l'image. Par exemple, avec un clic droit sur l'icône de lien ou en cliquant sur l'imahge puis sur `Ouvrir``

    Clic doit copier l'adresse du lien


Dernière mise à jour: 17 avril 2020
Contributions à cette page : Julien

Commentaires