Plugin Figure

Des documents en HTML5, avec figure et figcaption.

Aussitôt installé, ce plugin utilise les éléments HTML5 figure et figcaption pour les images et documents insérés avec légende (titre et/ou descriptif) dans les articles (et autres contenus contribués via l’espace privé). Techniquement, il surcharge les modèles de documents natifs de SPIP, sans apport fonctionnel.

Seul changement visible : le champ « crédits », qui est renseignable dans l’espace privé, est désormais affiché sur le site public.

Voici un exemple du code généré par ce plugin :

<figure class='spip_document_42 spip_documents right' style='float:right;width:200px;' role="group">
        <img src='IMG/jpg/doc42.jpg' alt='' width='200' height='150'>
        <figcaption class='spip_doc_caption' style='width:200px;'>
                <div class='spip_doc_titre'><strong>Titre du document</strong></div>
                <div class='spip_doc_descriptif'>Description du document</div>
                <div class='spip_doc_credit'><small>@Crédits</small><div>
        </figcaption>
</figure>

Pour en savoir plus :
-  HTML5 : Éléments <figure> et <figcaption>, Alsacréations, 2012.
-  4.4.11. The figure element, specification HTML 5.1 du W3C.

Dernière modification de cette page le 4 mai 2019

Discussion

3 discussions

  • 3

    Bonjour,

    Y a-t-il une raison particulière pour que Figure ne traite que « les images et documents insérés avec légende » et pas les

    1. <imgXX>

     ?

    Merci,
    françois

    • Tout à fait : l’élément figure permet de lier une légende à un media. En l’absence de légende, nul besoin de cet élément.

    • Ah : mais le comportement n’est pas le même quand on utilise <imgXX> et <docXX> avec un document qui n’a pas de légende : dans le premier cas on se retrouve avec :

      <p><span><a ...><img src... /></a></span></p>

      et dans le second avec :

      <figure><a ...><img src... /></a></figure>.

      La légende n’est donc pas un critère.

      Bon, et puis rien ne conditionne l’emploi de figure uniquement dans le cas où une légende est associée au document :
      https://developer.mozilla.org/fr/docs/Web/HTML/Element/figure#Premier_exemple

      Cela peut déclencher des discussions complexes de sémantique, mais de manière pratique, pour une gestion homogène des insertions de documents dans le corps du #TEXTE, l’utilisation systématique de figure serait clean, AMHA. Et puis c’est plus joli que <p><span>...</span></p> ;-)))

    • Peu importe que le code généré ne soit pas homogène, l’usage qui est fait de ces mode d’insertion ne l’étant pas.

      Par exemple, on peut utiliser <img|XX> pour insérer un petit picto au fil d’une phrase et dans ce cas, l’élément <figure> est à éviter.

      Le seul cas où l’élément <figure> est pertinent, dans SPIP, est lorsqu’une légende est associée au document. Dans les autres cas, faute de pouvoir prédire l’usage, on ne peut mieux baliser.

    Répondre à ce message

  • 1

    Bonjour,

    Merci pour cet outil ;-)

    Si j’ai bien compris, depuis que SPIP fournit le champ #CREDITS sur les documents, ce paramètre n’est pas utilisé dans les squelettes de la dist ?
    Et depuis HTML5, la dist ne propose pas non plus les <figure><figcaption> ?

     :-((

    françois

    • Oui, c’est exact. Les squelettes de la dist ne contiennent pas de balises HTML5, parce que cela introduirait des invalidités dans les sites construits dans d’autres versions de HTML. D’où ce plugin pour, si le webmestre le veut, des documents balisés en HTML5. Mais la dist ne lui impose pas.

    Répondre à ce message

  • rien ne se passe ...
    La v 0.4.2 dev est pourtant réputée compatible avec SPIP 3.1 (ici 3.1.7)

    est-ce que ça se passe bien également sur le site public j’ai essayé de coder directement en figure> </figure point n’y fait

    le plugin vidéo (html5) est également activé
    j’ai bien !DOCTYPE html qui autorise html5

    je cale

    en fait ce que je cherche c’est à tester un diaporama 100% html5 css3 ... donc ç’aurait été un bon début

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom