frendeitpt

attr

J'ai écrit cette action pour éviter à un rédacteur de passer en mode code pour ajouter des classes à une image ajoutée avec TinyMCE.

🆙 attr : Ajoute des attributs à la première balise interne

Cliquer pour lire la documentation

syntaxe {up attr | class=bg-yellow}< p>texte< /p>{/up attr}
syntaxe {up attr | class=bg-yellow | tag=img}

< img src="/image.jpg" >

{/up attr}
@version: UP-2.6 @author: Lomart @license: GNU/GPLv3 @tags: HTML
  • attr: classe(s) et/ou style
  • tag: balise recherchée, sinon la première
  • css-head (base-css): style ajouté dans le HEAD de la page
  • class: classe(s) pour bloc interne
  • style: style inline pour bloc interne
  • xxx = yyy: couple attribut-valeur. ex: title=le titre, href=//google.fr

    Un exemple simple

    Un texte

    {up attr | class=p3 tc b bg-lightYellow bd-rouge}
    Un texte
    {/up attr}

    Ce shortcode ajoute des attributs au bloc contenant le texte.

    Peut importe la balise, c'est le premier bloc du contenu entre les shortcodes

    Saisie abrégée

    Un texte

    {up attr=p3;text-align:center;b;bg-lightYellow;border:4px dotted red}
    Un texte
    {/up attr}

    Il est possible d'indiquer des classes et/ou des styles comme argument principal.

    Si vous mélangez les deux comme dans notre exemple, n'oubliez pas de séparer tous les éléments par des points virgules.

    Avec un jeu d'options

    Pour faciliter et uniformiser les saisies, vous pouvez définir des jeux d'options.

    Un texte

    {up attr=red-dot}
    Un texte
    {/up attr}

    Et le jeu d'options

    [red-dot]
    class = "ombreMax rotate3 p3 tc b bg-lightYellow"
    style = "border:8px dotted red"

    Plus d'infos : 🆙 créer un jeu d'options (prefset)

    Un peu plus compliqué

    Les attributs sont ajoutés à la première balise du contenu entre les shortcodes. Cela pose problème, si l'éditeur ajoute une balise p ou div à votre insu

    Le résultat

    La saisie wysiwyg

    Dans cet exemple, le saut de ligne après le shortcode insère l'image dans une balise p.

    C'est lui qui reçoit le style bordure arrondie rouge.

    Le résultat

    La saisie wysiwyg

    L'ajout d'une option tag avec la balise que l'on veut cibler suffiit pour que les attributs lui soient affectés

    Une autre solution serait de saisir les shortcodes et l'image sur la même ligne. Pas facile de se souvenir de cet impératif !

    Il est préférable de créer un jeu d'options qui intègre l'option tag="img", de cette façon le rédacteur doit juste indiquer son nom comme argument principal.

    Le résultat

    La saisie wysiwyg

    Le jeu d'options

    [img-red-circle]
    class = "mcenter display-block rotate6 bd-rond ombreMax"
    style = "border:4px dotted red"
    tag = "img"

    Et les autres attributs

    Dans les exemples précédents, nous avons uniquement utilisé les attributs class et style.

    Vous pouvez utiliser tous les attributs autorisés par la balise ciblée. Il sera pris en compte par l'action attr

    La saisie wysiwyg

    Le résultat

    Cliquer sur l'image