Permet une navigation transversale en affichant tous les articles référençant un mot-clé
{up jcontent-by-tags=id-ou-nom-tag}
syntaxe :
{up jcontent-by-tags=id-ou-nom-tag}
##title##{/up jcontent-by-tags}
Les mots-clés :
##title## ##title-link## ##subtitle## ##link##
##intro## ##intro-text## ##intro-text,100## ##content##
##image## ##image-link## ##image-src## ##image-alt##
##date-crea## ##date-modif## ##date-publish##
##cat## ##new## ##hits## ##tags-list##
##CF_id_or_name## : valeur brute du custom field
- jcontent_by_tags: ID ou nom du tag
- maxi: Nombre maxi d'articles dans la liste
- content-plugin: prise en compte des plugins de contenu pour ##intro et ##content##
- no-published (no_published): 1 pour obtenir les catégories non publiées
- current: 1 pour inclure l'article en cours
- sort-by = title: tri: title, created, modified, publish, id, hits, ordering
- sort-order = asc: ordre de tri : asc, desc
Modèles de présentation
- template (item-template): modèle de mise en page. Si vide le modèle est le contenu
balise & style pour le bloc principal
- main-tag (block) = div: balise pour le bloc englobant tous les articles. 0 pour aucun
- id: identifiant
- main-style: classes et styles inline pour bloc principal
- main-class: classe(s) pour bloc principal (obsolète)
balise & style pour un élément
- item-tag = div: balise pour un bloc article. 0 pour aucun
- item-style: classes et styles inline pour bloc principal
- item-class: classe(s) pour bloc principal (obsoléte)
Paramètre pour l'image
- image-src: lorempixel.com/150/150', // image par défaut
- image-alt = news: image, texte alternatif par défaut
Format pour les mots-clés
- date-format = %e %B %Y: format pour les dates
- date-locale: localisation pour les dates. Par défaut, celle du navigateur client.
- new-days = 30: nombre de jours depuis la création de l'article
- new-html = [span class="badge-red"]nouveau[/span]: code HTML pour badge NEW
- tags-list-prefix: texte avant les autres éventuels tags
- tags-list-style: classe ou style pour les autres mots-clés
Divers
- no-content-html = aucune catégorie pour ce mot-clé: retour si aucune catégorie trouvée
- css-head (base-css): style ajouté dans le HEAD de la page
Version 2.3 ajout des mot-clés pour customFields : ##CF_id_or_name
Version 2.9 le template peut être mis comme contenu
Version 3.1 Ajout option content-plugin pour charger les plugins de contenu. Prise en charge étendue des mots-clés pour les customFields
Cette action partage beaucoup de ses méthodes et options avec les autres actions dont le nom commence par un J.
Commençons en douceur
Affichons tous les articles avec le tag (mot-clé) : social.
Le résultat
Le shortcode
{up jcontent_by_tags=HTML}
<strong>##title-link##</strong>
{/up jcontent_by_tags}
Les explications
l'argument principal est le mot-clé ou son ID.
Le contenu entre shortcode est le tag pour définir le contenu affiché.
Ici, uniquement le titre avec un lien vers l'article. Le tout mis en gras, pour montrer la possibilité de mettre des balises HTML.
Avec de la mise en forme
joue un son
affiche des vidéos youtube
affiche des vidéos vimeo
affiche un lecteur vidéo ou audio
Le shortcode
{up jcontent_by_tags=media
| sort-by=title | sort-order=desc
| main-class=fg-row fg-auto-6 fg-auto-m4 fg-auto-s2 fg-gap tc
| image-src=//placeimg.com/150/150/arch}
##image-link##<div><b>##title-link##</b><br>##subtitle##</div>
{/up jcontent_by_tags}
Les explications
l'argument principal est le mot-clé. On précise l'ordre de tri. La mise en forme est réalisée par les classes CSS flexbox de UP. image-src est le chemin vers une image de remplacement si l'article n'en contient pas
Le contenu entre les shortcodes et un mélange de code html et de {mot-clé}.
Les customFields
Depuis la version UP-2.3, cette action gère les champs personnalisés.
Pour la démonstration, j'ai ajouté 2 champs à cet article : liste-image (id=3) et couleur (id=2)
{up jcontent_by_tags=19 | current}
[div style="border:2px solid ##couleur##; padding:5px; text-align:center"]
[b]##title##[/b]
[br]##subtitle##
[br]##liste-image | %label% : %rawvalue%##
[br][img src="/images/actions-demo/field/##3##"]
[/div]
{/up jcontent_by_tags}
1 : le tag d'id 19 est attribué uniquement à cet article.
L'option current est nécessaire pour le prendre en compte.
2 : le template est au format bbcode. La balise div ajoute une bordure de la couleur définie par le customField couleur. Il suffit de mettre son nom entre double dièse pour récupérer sa valeur, soit #FF0000
5 : un CF contient 3 éléments : son libellé (%label%), sa valeur (%value%) et sa valeur brute (%rawvalue%). Un mot clé sous cette forme est composé du nom ou id du CF, d'un caractère pipe (AltGr+6) et du modèle d'affichage.
6 : juste pour montrer qu'il est possible d'utiliser l'ID du CF entre double-dièse.
Avec l'aide d'autres actions
image | titre | sous-titre | catégorie | date création |
---|---|---|---|---|
image-gallery | galerie d'images responsives | Actions | 17 August 2018 | |
image-hover | affichage texte avec effets lors survol | Actions | 10 August 2017 | |
image-logo | ajoute un logo ou légende à une image | Actions | 5 February 2020 | |
image-magnify | voir les détails d'une photo | Actions | 12 September 2017 | |
image-pannellum | vue panoramique | Actions | 15 October 2019 | |
image-random | affiche une image aléatoire d'un dossier | Actions | 8 April 2020 | |
image-rollover | changer l'image au survol de la souris | Actions | 28 July 2018 | |
image-secure | empécher l'enregistrement des images | Actions | 15 March 2020 | |
imagemap | image clicable responsive | Actions | 10 December 2017 | |
jcat-image | image catégorie dans l'article | Actions | 16 May 2020 | |
slider-owl | bandeau défilant images et blocs HTML | Actions | 10 August 2017 | |
slideshow-billboard | diaporama d'images avec légendes | Actions | 10 August 2017 |
Le tableau ci-dessus est obtenu grâce à la collaboration de 2 actions.
Le shortcode
{up csv2table
| header=image;titre;sous-titre;catégorie
| col=5-30-70-c10
| model=blue
| css-head=#id td[vertical-align:middle]}
{up jcontent_by_tags=css
| main-tag=0
| item-tag=0}
##image##;<b>##title-link##</b>;##subtitle##;##cat##;##date-crea##
{/up jcontent_by_tags}
{/up csv2table}
Les explications
Pour mémoire, UP analyse les shortcodes enfants avant leurs parents.
jcontent_by_tags demande à récupérer du contenu sans mise en forme (main-tag et item-tag à zéro.
Le contenu retourne les différents champs en les séparant avec des points-virgules.
l'action csv2table récupère ce contenu mis en forme pour l'afficher en suivant les options indiquées.
Les options
La table ci-dessous est un comparatif des options proposées par les différentes actions Jxxx
A: jcontent-in-content, AL: jcontent-list, AC: jcontent-by-categorie (jnews), AS: jcontent-by-subcat, AT: jcontent-by-tags, CT: jcategories-by-tags, CM: jcontent-metadata
Si vous avez appelé ce tableau à partir de la démo d'une action, la colonne la concernant est sur fond jaune.
Option | A | AL | AC | AS | AT | CT | CM | Description |
---|---|---|---|---|---|---|---|---|
principale | ID(s) catégorie(s) séparé avec virgule, vide pour celui de l'article actuel ou 0 pour tout les IDs | |||||||
maxi | nombre maxi d'articles dans la liste. non précisé (par défaut) = tous | |||||||
exclude | 0 pour exclure l'article en cours | |||||||
current | toutes les catégories seront sélectionnées sauf celles indiquées dans l'option principale | |||||||
no-published | liste aussi les articles non publiés. Vrai par défaut | |||||||
content-plugin | prise en compte des plugins de contenu pour mots-clé content et intro. Peut échouer en cas d'appels récursifs | |||||||
sort-by | ordre de tri: title, ordering,created,modified,publish_up (par défaut),id,hits | |||||||
sort-order | ordre de tri : asc, desc (par défaut) | |||||||
author | filtre sur auteur: aucun (par défaut) OU id1,id2 OU article auteur de l'article en cours OU current utilisateur connecté. | |||||||
template | modèle de mise en page. Si vide le modèle est le contenu | |||||||
main-tag | balise pour le bloc englobant tous les articles. div par défaut, 0 pour aucun | |||||||
main-style | classes et styles inline pour bloc principal (inactif si main-tag=0) | |||||||
main-class | classe(s) pour bloc principal (inactif si main-tag=0) | |||||||
item-tag | balise pour le bloc d'un article. div par défaut, 0 pour aucun. | |||||||
item-style | classes et styles inline pour un article (inactif si art-tag=0) | |||||||
item-class | classe(s) pour un article (obsoléte) (inactif si art-tag=0) | |||||||
date-format | format pour les dates. '%e %B %Y' par défaut. (1) | |||||||
date-locale | localisation pour les dates au format 'fr_FR'. Celui du client par défaut. | |||||||
featured-html | code HTML pour article en vedette. Défaut: ⭐ ⭐ | |||||||
new-days | 30 par défaut. nombre de jours depuis sa création pour considérer un article comme nouveau | |||||||
new-html | Code HTML pour le badge NEW. nouveau par défaut | |||||||
image-src | image utilisée si aucune image n'est trouvée dans l'article. Défaut: '//lorempixel.com/300/300' | |||||||
image-alt | texte alternatif si aucune image n'est trouvé dans l'article | |||||||
tags-list-separator | séparateur entre les mots-cles | |||||||
tags-list-prefix | texte avant les autres clés éventuelles si tag {tag-list} | |||||||
tags-list-style | classe ou style pour les autres mots-clés | |||||||
no-content-html | texte si aucun contenu | |||||||
css-head | code CSS dans le head | |||||||
spécifique jcontent-list (ex article-category) | ||||||||
title | titre HTML si article trouvé. | |||||||
title-tag | niveau du titre | |||||||
title-style | classes et styles inline pour le titre | |||||||
title-class | classe(s) pour le titre | |||||||
list-style | classes et styles inline pour la liste | |||||||
list-class | classe(s) pour la liste | |||||||
class | idem main-class (conservé pour compatibilité descendante) | |||||||
style | idem main-style (conservé pour compatibilité descendante) | |||||||
spécifique jcontent-by-subcat | ||||||||
cat-level | 0 a 99 - niveau maxi des sous-categories explorées | |||||||
cat-tag | Balise pour les lignes catégories. LI pour passer en mode list arborescente | |||||||
cat-class | classes et styles inline pour les catégories | |||||||
cat-style | classes et styles inline pour les catégories | |||||||
cat-template | modèle pour les lignes de categories | |||||||
cat-root-view | affiche l'unique categorie racine. si root=jamais, si plusieurs=toujours | |||||||
cat-separator | pour separer l'arborescence des categories | |||||||
spécifique jcontent-metadata | ||||||||
meta-title-min | alerte coloré si le titre contient moins de lettres | |||||||
meta-title-max | alerte coloré si le titre contient plus de lettres | |||||||
meta-desc-min | alerte coloré si la description contient moins de lettres | |||||||
meta-desc-max | alerte coloré si la description contient plus de lettres |
(1) - Le format d'affichage est défini par l'option date-format. Sa valeur par défaut est : %e %B %Y qui affiche la date sous la forme 1 mai 2019.
Il s'agit de la codification PHP pour la fonction strftime. Les codes usuels sont %y année sur 2 chiffres, %Y année sur 4 chiffres, %m mois sur 2 chiffres, %b nom mois abrégé en 3 lettres, %B nom mois complet, %e jour (1-31), %d jour sur 2 chiffres (01-31), %A nom jour complet, %a nom jour abrégé, %H heure (00-23), %M minutes (00-59)
Les mots-clés
La table ci-dessous est un comparatif des mots-clés utilisés par les différentes actions Jxxx.
A: jcontent-in-content, AL: jcontent-list, AC: jcontent-by-categorie (jnews), AS: jcontent-by-subcat, AT: jcontent-by-tags, CT: jcategories-by-tags, CM: jcontent-metadata
Si vous avez appelé ce tableau à partir de la démo d'une action, la colonne la concernant est sur fond jaune.
Mot-clé | A | AL | AC | AS | AT | CT | CM | Description |
---|---|---|---|---|---|---|---|---|
##id## | ID de l'article | |||||||
##title## | titre de l'article sans lien vers l'article | |||||||
##title-link## | titre de l'article avec lien vers l'article | |||||||
##subtitle## | sous-titre (partie du titre après le tilde) (1) | |||||||
##maintitle## | titre (partie du titre avant le tilde) (1) | |||||||
##link## | à utiliser comme argument de l'attribut href d'une balise a. | |||||||
##intro## | texte d'introduction de l'article au format HTML. (2) | |||||||
##intro-text## | texte d'introduction de l'article au format texte sans aucune balise HTML. (2) | |||||||
##intro-text,100## | variante qui permet de limiter le nombre de caractères affichés (100 dans cet exemple). (2) | |||||||
##content## | Le contenu si existant. (2) | |||||||
##image## | image d'introduction de l'article ou à défaut la première image trouvée dans le texte d'introduction. | |||||||
##image-link## | image avec lien vers l'article | |||||||
##image-src## | variante du mot-clé précédent qui permet un plus grand contrôle sur le résultat. (4) | |||||||
##image-alt## | idem | |||||||
##date-crea## | date de création (4) | |||||||
##date-modif## | date de modification (4) | |||||||
##date-publish## | date de publication de l'article (4) | |||||||
##date-publish-end## | date de fin de publication de l'article (4) | |||||||
##date-featured## | date de mise en vedette de l'article (4) | |||||||
##date-featured-end## | date de fin de mise en vedette de l'article (4) | |||||||
##author## | nom de l'auteur de l'article | |||||||
##note## | note sur l'article | |||||||
##cat## | nom de la catégorie | |||||||
##cat-link## | lien vers la catégorie | |||||||
##new## | badge nouveau si l'article est récent. Voir les options ‘new-jours’ et ‘new-html’ | |||||||
##featured## | si article en vedette | |||||||
##count## | nombre d'article dans la catégorie | |||||||
##hits## | le nombre de vues de l'article | |||||||
##tags-list## | liste des mots-clés | |||||||
##uplist## | liste des actions dans l'article | |||||||
##upnb## | nombre d'actions dans l'article | |||||||
##CF## | CustomField. Remplacer CF par son nom ou son ID. Voir modèle avec %label%, %value% et %rawvalue% | |||||||
##access## | niveau d'accès requis | |||||||
##meta-index## | index ou no-index | |||||||
##meta-follow## | index ou no-index | |||||||
##meta-title## | longueur de la meta title avec alerte colorée | |||||||
##meta-desc## | longueur de la meta description avec alerte colorée | |||||||
##meta-key## | liste des meta keywords | |||||||
spécifique jcontent-by-subcat | ||||||||
##catpath## | chemin des catégories parentes |
(1) - il s'agit d'une astuce que j'utilise pour décomposer le titre d'un article en titre et sous-titre en les séparant par le caractère tilde (~). En dehors de la possibilité de styler différemment les 2 parties, un titre plus long est meilleur pour le référencement.
Concrétement, si le tag {subtitle} est présent dans votre template et que le titre contient un tilde, il sera scindé en {titre] et {subtitle}. Dans le cas contraire, le {subtitle} sera vide et {title}: contiendra la totalité du titre de l'article.
(2) - A la différence de Joomla, si l'introtext n'existe pas, il n'est pas remplacé par le contenu. Et vice-versa. Si le besoin existe, on peut créer un mot-clé "article,X" qui insère les X premiers caractères en supprimant les shortcodes UP.
(3) - Exemple de template: <img src="/{image-src}" alt="{image-alt}" class="img-sepia left" width="100px">
.
⚠ si l'article ne contient pas d'image, le reste du code sera quand même inséré.
(4) - Le format d'affichage est défini par l'option date-format. Sa valeur par défaut est : %e %B %Y qui affiche la date sous la forme 1 mai 2019. Il s'agit de la codification PHP pour la fonction strftime. Les codes usuels sont %y année sur 2 chiffres, %Y année sur 4 chiffres, %m mois sur 2 chiffres, %b nom mois abrégé en 3 lettres, %B nom mois complet, %e jour (1-31), %d jour sur 2 chiffres (01-31), %A nom jour complet, %a nom jour abrégé, %H heure (00-23), %M minutes (00-59)
Si cela est impossible, remplacez l'accolade ouvrante par son code {
, soit pour id : {id}
.
Une autre méthode est de mettre en gras une partie : {<b>id</b>}
.
Si vous l'utilisez avec une action csv2table, pour éviter le conflit avec le séparateur point-virgule, changer le séparateur utilisé ou mettre le contenu de la cellule entre guillemets. "&#123;id}"
ou {<b>id</b>}
upactionslist (1) readmore (1) span (3) tabslide (1) toc (1) jcontent_by_tags (4) flexbox (1) div (1) csv2table (1) addcsshead (1) jcontent_in_content (2) hr (1) jcontent-info (1)