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.
{up image-logo=prefset,image_logo ou texte}image{/up image-logo}- 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
{up image-logo=images/actions-demo/image-logo/up-lego.png}
<img src="/images/photos/Perroquets-rouges-en-Equateur-mini.jpg">
{/up image-logo}Cela a le mérite de la simplicité si l'on dispose d'un logo de dimensions adéquates.
{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}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) b50;
Avec un jeu d'option
{up image-logo=etoile}
<img src="/images/photos/Perroquets-rouges-en-Equateur-mini.jpg" alt="" />
{/up image-logo}Le prefs.ini
[etoile]
logo = "⭐"
pos="left,top"
style="margin:10px;font-size:24px"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
{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}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 PluginLe 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
{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}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.
upactionslist (1) flexbox (5) image-logo (6) jcontent-info (1) tabslide (1) toc (1)