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

Style pour le logo

  • id: identifiant
  • class: classe(s) pour bloc
  • style: style inline pour bloc

Style pour le bloc externe

  • main-class: classe(s) pour le bloc du contenu
  • main-style: style inline pour le bloc du contenu

Divers

  • 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é.

du texte et une image

Universal Plugin

Le shortcode en mode code

<p>{up image-logo=</p>
  <div class="tc">
    <img src="/images/actions-demo/image-logo/up-lego.png" />
    <div class="t-blanc">Universal Plugin</div>
  </div>
<p>| pos=center,center}</p> 
    <p><img src="/images/photos/Perroquets-rouges-en-Equateur-mini.jpg" /></p>
<p>{/up image-logo}</p>

ou en bbcode

{up image-logo=
[div class="tc"]
  [img src="/images/actions-demo/image-logo/up-lego.png"]
  [b class="t-blanc"]Universal Plugin[/b]
[/div]
 | pos=center,center} 
--- mettre l'image en wysiwyg ---
{/up image-logo}

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.

 

Pour info, cette page utilise 15 action(s) :
upactionslist (1) flexbox (5) image-logo (6) jcontent-info (1) tabslide (1) toc (1)
Détails