Suivi — Images Ajouter le texte alternatif en bas des images

#1511 Posté par . État de l’entrée : ouverte. Licence CC By‐SA.
Étiquettes :
3
15
mai
2015

Bonjour,

Je propose de pouvoir utiliser le texte alternatif des images comme descriptif en bas de l'image et de façon centrée dans les contenus.
Actuellement pour ajouter une description à une image visible à tous, il faut faire quelque chose comme ça :
![texte alternatif](URL)
description

Bien souvent le texte alternatif et la description souhaitée sont les mêmes, c'est gênant de devoir gérer deux éléments identiques, notamment en cas d'édition, de plus la description ne peut pas être centrée.

Une proposition de syntaxe :
![texte alternatif et description](URL)
Comportement actuel, aucun changement : rétro-compatibilité

![!texte alternatif et description](URL)
Nouveau comportement, ajout d'une description en bas de l'image (Notez l'ajout du "!")

Le rendu serait similaire à celui-ci :

Rendu de la proposition

Le code d'exemple :

<!DOCTYPE html>
<html>
 <head>
<style>
.picture 
{
 display:inline-block;
 text-align:center;
}
</style>
 </head>
 <body>
 <div class="picture">
 <img src="https://linuxfr.org/images/logos/linuxfr2_gouttes.png" alt="Le logo du site" />
 <div class="description">Le logo du site</div>
 </div>
 </body>
</html>

  • # HTML5 : figure & figcaption

    Posté par . Évalué à 1 (+0/-0).

    Les balises figure et figcaption du HTML5 me semble sémantiquement plus adaptées que de simples div.

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure

  • # Autre demande

    Posté par (site web personnel) . Évalué à 3 (+0/-0).

  • # Relance

    Posté par . Évalué à 3 (+0/-0).

    Je me permet de relancer cette proposition, elle me semble utile et ne nécessite pas beaucoup de changement dans le code à première vue.

    j'ai fais un patch du fichier /app/models/image.rb

    --- image.rb 2015年06月02日 19:09:22.087909046 +0000
+++ image.rb.new 2015年06月02日 19:10:32.265505928 +0000
@@ -77,8 +77,7 @@
 end
 def to_html
- "<img #{src_attr} #{alt_attr} #{title_attr}/>"
+ "<figure><img #{src_attr} #{alt_attr} #{title_attr}/><figcaption>#{CGI.escapeHTML alt_text.to_s}</figcaption></figure>"
 end
 end
-

    A vérifier cependant.

    • [^] # Re: Relance

      Posté par (site web personnel) . Évalué à 2 (+0/-0).

      Comme tu es l'auteur de l'entrée, tu peux l'éditer ;-) (ça fait la documentation à jour et une proposition d'implémentation) et je pourrai mettre à jour aide édition vu que c'est un wiki :D Je n'ai pas d'avis s'il faudrait compléter l'aide simplifiée affichée lorsqu'on poste un commentaire... et je ne sais plus si ça apparaît dans la FAQ)

      Tu ne reprends pas l'idée de rajouter un ! pour forcer l'affichage de la légende ? (ou ne pas le faire s'il n'est pas présent)

      Ça pourrait nous servir pour https://linuxfr.org/redaction/news/aux-origines-du-premier-gpu-une-bande-de-copains-de-l-ens mais je ne vois pas trop comment gérer le multi-ligne et la mise en gras/modif' de style sans introduire de risque d'injection de données :/

      • [^] # Re: Relance

        Posté par (site web personnel, Mastodon) . Évalué à 2 (+0/-0).

        À la lecture du patch, ça ne teste pas si ça commence par ! ou pas. Il me semble aussi que le filtrage devrait protéger contre les injections mais en perdant la possibilité de changements de styles. Est-ce que ça fait vraiment sens dans une légende ? Et si oui, est-ce que c’est le genre de truc qu’un truc aussi limité que Markdown devrait gérer ?

        "It is seldom that liberty of any kind is lost all at once." ― David Hume

        • [^] # Re: Relance

          Posté par (site web personnel) . Évalué à 2 (+0/-0). Dernière modification le 09 août 2026 à 02:36.

          mais en perdant la possibilité de changements de styles. Est-ce que ça fait vraiment sens dans une légende ? Et si oui, est-ce que c’est le genre de truc qu’un truc aussi limité que Markdown devrait gérer ?

          pour moi : non (autant ne pas se compliquer la vie, ni ouvrir des failles)

          pour autant l'utilisation de tableau pour https://linuxfr.org/redaction/news/aux-origines-du-premier-gpu-une-bande-de-copains-de-l-ens
          c'est un contournement, à défaut de mieux :/ mais ça gère le multiligne avec des défauts si ligne trop longue, qui n'est pas forcément nécessaire àmha et qui ne passera pas forcément sur mobile

          bref : une ligne de légende, en italique éventuellement, et autres possibilités selon les besoins et yala

          • [^] # Re: Relance

            Posté par (site web personnel, Mastodon) . Évalué à 2 (+0/-0).

            La mise en italique ou autre, peut se dicter par feuille de style ;-) et le retour à la ligne sera automatique et adapté à la largeur de l’image : ce sont les avantages du balisage avec figcation (...ou avec des div bien imbriqués) ;-)

            "It is seldom that liberty of any kind is lost all at once." ― David Hume

            • [^] # Re: Relance

              Posté par (site web personnel) . Évalué à 2 (+0/-0). Dernière modification le 17 août 2026 à 20:12.

              je parlais d'avoir des changements de mise en forme comme sur la dépêche (désormais publiée)
              https://linuxfr.org/news/aux-origines-du-premier-gpu-une-bande-de-copains-de-l-ens

              gras pour première ligne, fonte normale pour la deuxième dans cet exemple.

              Pour moi, une contrainte acceptable est que la légende soit une seule ligne et tout en italique (si il y a une description de l'image nécessaire, autant en faire un paragraphe en dessous ce qui complétera la légende et avec plus de styles/mises en forme disponibles

              • [^] # Re: Relance

                Posté par (site web personnel, Mastodon) . Évalué à 2 (+0/-0).

                J'avais vu et c’est un peu déroutant car j’ai plus l’habitude d’un style unique (j’ai même eu du mal à comprendre qu’il s’agissait d’une même image) hormis le titre qui doit être y être en emphase... et une étiquette numérotée séquentiellement pour les publications papier.
                Mes références en favori : le guide du Cégep du Vieux Montréal et le guide de la section Cinéma et jeu vidéo de l’Université de Montréal

                Sinon, j’aime bien l’approche de ZdS qui permet de choisir d’avoir les mises en formes comme tu le suggères.

                "It is seldom that liberty of any kind is lost all at once." ― David Hume

                • [^] # Re: Relance

                  Posté par (site web personnel) . Évalué à 2 (+0/-0).

                  ah oui, ZdS donne plus de possibilités, ça pourrait être bien aussi. Mais on a déjà un bug de rendu en rédaction sur la syntaxe Markdown dépendant de 2 § distincts, soit trouver un moyen que cela ne se produise pas, soit accepter la syntaxe uniligne proposée qui fonctionnera par défaut.

                  pour la numérotation automatique des figures, je n'ai pas particulièrement d'avis.

                  • [^] # Re: Relance

                    Posté par (site web personnel, Mastodon) . Évalué à 2 (+0/-0).

                    La numérotation automatique est, à mon avis, utile pour la publication papier/traditionnelle parce que ça facilite les références (les renvois « voir telle ou telle table » et les listes/tables des tableaux etc.) chose qu’en web on fait plutôt avec l’hyperlien...

                    La syntaxe étendue de ZdS ne s’applique, je crois, que si on pose l’image comme un paragraphe (ou peut-être aussi en fin de paragraphe ?) :) Mais bien d’accord que ce genre de petit plus est moins urgent que le bogue des liens par référence (ça, ça craint quand on l’utilise... je me souviens m’être arraché les cheveux en voulant participer à une news une fois.)

                    "It is seldom that liberty of any kind is lost all at once." ― David Hume

Envoyer un commentaire

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.