Pouvoir ajouter du code HTML à partir d'un article serait bien pratique pour personnaliser la page pour un événement
{up addhtml=code HTML | selector=.foo | parent=2}syntaxe 2
{up addhtml | selector=.foo | parent=2}code HTML{/up addhtml}Exemple :
{up addhtml={up icon=star} | selector=.header-page > h1 | parent=2}- addhtml (add-html): Contenu HTML à ajouter. BBCode admis
- selector: sélecteur CSS référence pour l'insertion
- parent: niveau parent par rapport à selector ou si vide à la position du shortcode
- position = beforebegin: position par rapport au sélecteur : beforebegin, afterbegin, beforeend ou afterend
- filter: conditions. Voir doc action filter
- id: identifiant
- css-head (base-css): style ajouté dans le HEAD de la page
Un exemple simple
Si vous regardez la barre de menu en haut de ce site, vous verrez le mot Hello en rouge ajouté par ce shortcode :
Le shortcode
{up addhtml=[a href="#" class="t-red"]Hello[/a]
| selector=ul.menu
| position=beforebegin
}Le code de la page avant
<nav class="navbar" id="navbar">
<ul class="menu ">
</ul>
</nav>Le code de la page après
<nav class="navbar" id="navbar">
<a href="#" class="t-red">Hello</a>
<ul class="menu ">
</ul>
</nav>- L'option principale addhtml contient le code HTML à insérer. il est également possible de le saisir entre les shortcodes.
- L'option selector est le sélecteur CSS qui permet de définir la cible de l'insertion.
- position précise l'emplacement de l'insertion par rapport à la balise ciblée
- beforebegin : avant le début de la balise
- afterbegin : au début du contenu de la balise
- beforeend: à la fin du contenu de la balise
- afterend : après la fin de la balise
Sans sélecteur CSS
Pour ajouter une icône font-awesome devant le titre d'un article, le plus simple est d'insérer le code HTML habituel, soit <i class="fa fa-video"></i>
Cela ne pose pas de problème pour un article en mode page, on cible l'unique H1 de la page.
Dans le cas d'un blog sous Joomla 5 et le template Cassiopeia, la structure simplifiée du code HTML est la suivante :
<div class="com-content-category-blog__item blog-item">
<div class="item-content">
<div class="page-header">
<h2><a href="#">LE TITRE</a></h2>
</div>
<p>LE CONTENU avec le shortcode</p>
</div>
</div>Pour insérer le code HTML devant LE TITRE, on pourrait utiliser le sélecteur CSS div.page-header > h2 > a
Le souci est que ce sélecteur est le même pour tous les articles du blog.
Nous devons dans un premier temps remonter au parent commun div.item-content, puis redescendre au titre
{up addhtml=[i class='fa fa-video t-red'][/i]
| parent=1
| selector=div.page-header > h2 > a
| position=afterbegin
}L'action addhtml prend comme argument le code HTML à insérer au format BBCode.
L'option parent=1 remonte d'une génération pour définir le point de départ du sélecteur CSS qui est défini par l'option selector
L'option position indique l'emplacement où insérer le code HTML par rapport à la balise a.
Pour que l'icône ne soit pas cliquable, il suffit de choisir position=beforebegin pour l'insérer avant la balise a.
Idées d'utilisation
Une promotion limitée à une période
Si vous regardez le titre de cet article, le texte clignotant "UNE SUPER ACTION" est affiché par ce shortcode. Il est affiché après le titre et justifié sur la droite.
L'option filter limite son affichage dans le temps
Important: le code ci-contre est indenté pour la démo, mais il doit être saisi sur une seule ligne
{up addhtml
| selector=h1
| position=beforeend
| filter=datemax:20990101
}
{up text-blink | class=t-blanc b float-right}
UNE SUPER ACTION
{/up text-blink}
{/up add-html}upactionslist (1) addhtml (2) flexauto (3) text-blink (1) jcontent-info (1)