image-logo ~ ajoute un logo ou légende à une image

Mon besoin était de mettre un petit badge sur une image en fonction de sa famille.

J'ai donc créé cette action toute simple pour ajouter un logo ou une légende sur une image.

➠ image_logo : Ajoute une image ou un texte sur une image

Cliquer pour lire la documentation

syntaxe {up image-logo=prefset,image_logo ou texte}image{/up image-logo}
author LOMART version UP-1.8 license GNU/GPLv3 tags image
  • image_logo: prefset,image_logo ou texte
  • pos = right,bottom: position horizontale (left, gauche, right, droite, center, centre), verticale (top, haut, bottom, bas, center, centre)
  • width (l,largeur,w): largeur logo en px, rem, %. % par défaut
  • class: classe(s) pour bloc
  • style: style inline pour bloc
  • main-class: classe(s) pour le bloc du contenu
  • main-style: style inline pour le bloc du contenu
  • css-head (base-css): style ajouté dans le HEAD de la page

    Un exemple simple

    Le résultat
    Up lego

    Le shortcode

    {up image-logo=images/actions-demo/image-logo/up-lego.png}
    <img src="/images/photos/Perroquets-rouges-en-Equateur-mini.jpg">
    {/up image-logo}
    On indique simplement le chemin vers le logo. Par défaut, il est affiché en bas à droite à sa taille d'origine.

    Cela a le mérite de la simplicité si l'on dispose d'un logo de dimensions adéquates.



    Le résultat
    Up lego

    Le shortcode

    {up image-logo=images/actions-demo/image-logo/up-lego.png
    | width=60px 
    | pos=left,top 
    | style=margin:10px}
    <img src="/images/photos/Perroquets-rouges-en-Equateur-mini.jpg">
    {/up image-logo}
    A peine plus compliqué, on indique la largeur (width) et la position du logo (pos). style nous permet d'éloigner le logo du bord de l'image.

    Pour spécifier la position, on indique en premier la position horizontale (left, center ou right), une virgule puis la position verticale (top, center ou bottom)  &#2b50;



    Avec un jeu d'option


    Le shortcode

    {up image-logo=etoile}
    <img src="/images/photos/Perroquets-rouges-en-Equateur-mini.jpg" alt="" />
    {/up image-logo}

    Le prefs.ini

    [etoile]
    logo = "&#x2b50;"
    pos="left,top"
    style="margin:10px;font-size:24px"
    Si le webmaster a prévu ce jeu d'options, il suffit au rédacteur de saisir son nom comme argument de l'action. Bien entendu, on utilise l'option de substitution pour saisir le chemin de l'image ou le texte.

    Cette action accepte également du texte pour le logo, cela permet de légender des images ou d'utiliser un caractère Unicode

    Avec du texte

    un brin de causette

    Le shortcode

    {up image-logo=un brin de causette
     | width=100
     | class=bg-30 bg-hover-vertFonce tc t-blanc}
    <img src="/images/photos/Perroquets-rouges-en-Equateur-mini.jpg">
    {/up image-logo}
    Pour ajouter une légende sur une image, il suffit de la mettre comme argument principal de l'action.

    width=100 force le bloc a occuper la largeur totale. L'unité par défaut est %, mais on peut l'exprimer en px, em et rem

    Les classes stylent le contenu : texte centré blanc sur un fond transparent à 30%. Au survol, le fond devient vert foncé.

    Sur un contenu mixte

    Même si la vocation première de cette action est d'ajouter un logo ou une légende sur une image, rien n'empêche de l'ajouter sur un bloc de contenu.

    Un titre

    Du contenu

    NOUVEAU

    {up image-logo=NOUVEAU
     | pos=right,top
     | class=badge-rouge m1 
     | main-class=bd-gris tc}
    <h2>Un titre</h2>
    <p>Du contenu</p>
    <p><img src="/images/photos/Perroquets-rouges-en-Equateur-mini.jpg" width="70%" /></p>
    <p><button class="btn btn-primary">Un bouton</button></p>
    {/up image-logo}
    Je pense que le shortcode se comprend facilement.

    Le texte du logo en haut à droite est "NOUVEAU". Il est affiché comme un badge sur fond rouge avec une marge pour l'éloigner du bord du bloc avec l'option class. main-class ajoute un liseré gris autour du bloc principal.