Seule ou associée à d'autres, cette action vous permet de disposer d'une solution visuelle et animée pour présenter vos nouveautés.
Cette action, très souple, dispose des fonctions de base pour récupérer vos articles selon plusieurs critères et les présenter dans la forme que vous souhaitez.
UP propose des personnalisations d'actions pour gagner du temps et éviter les saisies répétitives.
{up jcontent-by-categories=id-catégorie(s) | template=##title-link##}syntaxe 2 :
{up jcontent-by-categories=id-catégorie(s)}##title-link##{/up jcontent-by-categories}Une action très pratique pour lister les articles de la catégorie en cours, il suffit de taper
{up article-category}Les mots-clés :
##title## ##title-link## ##subtitle## ##maintitle## ##link##
##intro## ##intro-text## ##intro-text,100## ##content##
##image## ##image-src## ##image-alt##
##date-crea## ##date-modif## ##date-publish##
##author## ##note## ##cat## ##cat-link## ##new## ##featured## ##hits## ##tags-list##
##CF_id_or_name## : valeur brute du custom field
##upnb## : nbre actions UP dans la page - ##uplist## : nbre par actions
- jcontent_by_categories (jnews): ID(s) catégorie(s) séparé(s) avec virgule, vide pour celle de l'article actuel ou 0 pour toutes
- filter: conditions. Voir doc action filter
- maxi: Nombre maxi d'articles dans la liste. Vide = tous
- exclude: liste des id des catégories non reprises si option principale=0
- current: 1 pour inclure l'article en cours
- no-published (no_published) = 1: Liste aussi les articles non publiés
- content-plugin: prise en compte des plugins de contenu pour ##into et ##content##
- author: filtre sur auteur: liste des id ou article, current
- sort-by = publish_up: tri: title, ordering, created, modified, publish_up, id, hits, random
- sort-order = desc: ordre de tri : asc, desc
- no-content-html = Pas de nouvelles, bonnes nouvelles ...[br]No news, good news ...: texte si aucune correspondance. 0=aucun texte
Modèles de présentation
- template (item-template): modèle de mise en page. Si vide le modèle est le contenu
Balise et style pour le bloc principal
- main-tag (block) = div: balise pour le bloc englobant tous les articles. 0 pour aucun
- main-style: classes et styles inline pour bloc principal
- main-class: classe(s) pour bloc principal (obsolète)
Balise et style pour un article
- item-tag = div: balise pour le bloc d'un article. 0 pour aucun
- item-style: classes et styles inline pour un article
- item-class: classe(s) pour un article (obsolète)
Paramètre pour l'image
- image-src: lorempixel.com/300/300', // 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 bg-red t-white"]nouveau[/span]: code HTML pour badge NEW
- featured-html = ⭐: code HTML pour article en vedette
- tags-list-prefix: texte avant les autres éventuels tags
- tags-list-style = badge;margin-right:4px: classe ou style affecté à une balise span par mot-clé
- tags-list-separator: séparateur entre mots-clés
Style CSS
- id: identifiant
- css-head (base-css): code CSS dans le head
Version 2.4 Ajout mot-clé ##content##
Version 2.8 Ajout mot-clé ##cat-link##
Version 2.9 Ajout mot-clé ##upnb## et ##uplist## : nombre et liste des actions utilisées dans un article
Version 2.9.1 ajout sort-by=random (merci manuelvoileux)
Version 2.9 Ajout mot-clé ##maintitle## : partie titre avant tilde ~
Version 3.1 Ajout option content-plugin pour prise en charge plugins de contenu. Prise en charge des mots-clés pour les customFields
Le plus simple
{up jcontent_by_categories=8 | maxi=4}##title-link##{/up jcontent_by_categories}Avec ce simple shortcode, on obtient les titres des 4 derniers articles de la catégorie actions d'ID 8. Comme cet article fait partie de cette catégorie, j'aurais pû ne pas l'indiquer.
Par défaut, ils sont classés par date décroissante de publication. Le contenu entre les shortcodes contient uniquement le tag ##title-link## pour indiquer que l'on veut le titre et un lien vers l'article.
A peine plus compliqué :
{up jcontent_by_categories=8,2 | maxi=6 | sort-by=created | sort-order=asc | main-tag=ol | item-tag=li}
##title-link##<br><small>(créé le ##date-crea## par ##author##)</small>
{/up jcontent_by_categories}Les options du shortcode demandent les 6 premiers articles (maxi=6) de la catégorie actions et références (jcontent_by_categories=8,12) triés par date de création (sort-by=created) croissante (sort-order=asc).
En ajoutant l'option exclude, nous aurions eu toutes les catégories sauf les 8 et 2
Par défaut, le résultat est entouré par une balise <div>. Pour cet exemple, nous voulons une liste numérotée, soit UL pour le bloc principal et LI pour chaque article (main-tag=ol et item-tag=li).
Le contenu avant le shortcode fermant est du simple code HTML pour définir la présentation et les infos souhaitées.
-
upactionslist ~ interne - liste et docs des actions
(créé le 10 March 2017 par lomart) -
Présentation
(créé le 9 August 2017 par lomart) -
cell ~ mise en page avec table-cell
(créé le 10 August 2017 par lomart) -
meteo-france ~ prévision Météo France
(créé le 10 August 2017 par lomart) -
image-hover ~ affichage texte avec effets lors survol
(créé le 10 August 2017 par lomart) -
media-youtube ~ affiche des vidéos youtube
(créé le 10 August 2017 par lomart)
Un peu d'animation
Plutôt que d'ajouter plein d'options à cette action, j'ai préféré utiliser d'autres actions pour mettre en scène les news.
marquee : défilement horizontal
L'action "MARQUEE" permet de faire défiler du contenu horizontalement et verticalement. Il s'arrête lors du survol avec la souris et il est possible de déplacer le contenu en le faisant glisser. en savoir plus sur l'action marquee
vidéo en HTML5
12 September 2023 par lomart
choix aléatoire
25 September 2023 par lomart
contrôle des metadonnées
1 September 2023 par lomart
25 September 2023 par lomart
volet déroulant "lire la suite"
1 September 2023 par lomart
15 April 2023 par lomart
21 March 2023 par lomart
10 February 2023 par lomart
18 February 2023 par lomart
18 February 2023 par lomart
Le résultat ci-dessus est obtenu avec ces shortcodes :
{up marquee=les dernières actions | model=info | lbl-class=ph2 tc | lbl-pos=right}
{up jcontent_by_categories=8 | maxi=10 | item-style=display-inline-block; border-right:1px solid #069;ph3}
<b style="font-size:140%">##title##</b>
<br>##subtitle##
<br><span class="fs80">##date-crea## par ##author##</span>
{/up jcontent_by_categories}
{/up marquee}
Il faut toujours se rappeler qu'UP analyse les shortcodes en commençant par les enfants. Donc dans cet exemple, l'action jcontent_by_categories va générer du code HTML qui sera analysé et complété par l'action marquee
jcontent_by_categories affiche les 10 derniers articles (maxi=10) de la catégorie actions (jcontent_by_categories=8). Un style est ajouté aux articles pour les afficher en ligne avec un trait entre eux. ph3 est une classe qui ajoute un padding horizontal. Ne vous inquiétez pas si je mélange les styles et les classes, UP est très conciliant 😊. Le contenu ne devrait pas vous poser de problème, c'est du HTML !
marquee utilise le modèle info pour afficher le texte "les dernières actions". lbl-pos place ce libellé à droite et lbl-class centre le texte en ajoutant un padding.
marquee : défilement vertical
Le résultat
...
...
...
...
...
...
...Les shortcodes
{up marquee
| direction=up
| h=300px
| model=info
| lbl-pos=none
| msg-class=ph1
| scrollamount=25}
{up jcontent_by_categories=8
| maxi=10
| prefset=article-avec-image
| item-style=min-height:180px}
{/up marquee}
Les explications
Mêmes options pour jcontent_by_categories, sauf l'utilisation de prefset qui utilise un modèle de mise en page préparé par le concepteur du site dans le fichier custom/prefs.ini de l'action. J'ai ajouté une hauteur minimale pour avoir une hauteur utilisable dès le chargement.
Pour marquee, je pense que les options sont faciles à comprendre.
tab : dans des onglets
L'action "TAB" permet d'afficher du contenu dans des onglets ou un accordion. Sur un petit écran, le passage en mode accordion est automatique. en savoir plus sur l'action tab
Les résultats
- media-video
- random
- jcontent-metadata
- media-video
- random
- jcontent-metadata
- snippet
- readmore
...
Lire la suite crée le 25 September 2023 par lomart
Les shortcodes
{up tab
| content-style=min-height:370px
| espace-vertical=1}
{up jcontent_by_categories=8 | maxi=3
| prefset=article-pour-tab}
{/up tab}{up tab | side=left | auto=3000
| content-style=min-height:370px
| espace-vertical=1}
{up jcontent_by_categories=8 | maxi=5
| prefset=article-pour-tab}
{/up tab}Les seules différences entre les 2 exemples ci-dessus sont surlignées en jaune.
auto pour un changement d'onglet toutes les 3 secondes (merci pleconte). side pour demander les onglets sur le côté gauche. Ce qui permet d'augmenter le nombre de news avec maxi. Notez l'utilisation de espace-vertical, la nouvelle option de tab (v1.7) qui répartit le contenu sur la hauteur.
Pour jcontent_by_categories, il est important de préciser main-tag=0 et item-tag=0 afin de récupérer uniquement les données sans les blocs parents (wrappers).
tab : dans un accordion
Le résultat
- media-video
- random
- jcontent-metadata
Le shortcode
{up tab=accordion | auto=3000
| css-head=#id h3[margin-top:0]}
{up jcontent_by_categories=8 | maxi=3
| prefset=article-pour-tab}
{/up tab}
Les explications
Pas de grands changements:
tab=accordion pour changer de mode
css-head est spécifique à ce site, il sert à supprimer une margin-top sur les titres H3.
scroller : défilement vertical
A la différence de marquee dont le défilement est continu, cette action marque une pause sur chaque news
Le résultat
12 September 2023 par lomart
25 September 2023 par lomart
1 September 2023 par lomart
25 September 2023 par lomart
1 September 2023 par lomart
15 April 2023 par lomart
21 March 2023 par lomart
10 February 2023 par lomart
Le shortcode
{up scroller=5
| style=border:2px solid #369
| css-head=#id .treadmill-unit[outline:1px solid #369;padding-left:5px]}
{up jcontent_by_categories=8 | maxi=8 | main-tag=0}
<b>##title##</b> ##subtitle##<br><small>##date-crea## par ##author##</small>
{/up jcontent_by_categories}
{/up scroller}
Les explications
Nous utilisons l'action jcontent_by_categories pour récupérer les 8 derniers articles. La seule subtilité est de récupérer chaque élément séparément. Pour cela nous utilisons main-tag=0
Au niveau des options scroller, juste des ajouts de CSS pour soigner la présentation.
Le résultat
Le shortcode
{up scroller=230px
| css-head=#id .treadmill-unit:nth-of-type(even)[opacity:0.2]}
{up jcontent_by_categories | maxi=5 | main-tag=0
| prefset=article-avec-image}
{/up scroller}
Les explications
Pour cet exemple, hormis l'utilisation d'un template défini dans le prefs.ini de l'action jcontent_by_categories, nous utilisons les mêmes options.
La difficulté est de ne pas maitriser la hauteur des différents éléments. L'action utilise la hauteur du premier pour tous les éléments. Comme cela peut poser des problèmes, j'utilise une hauteur en pixels scroller=230px et une astuce CSS qui diminue l'opacité du 2ème élément (qui est pair).
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 (6) tabslide (1) toc (1) flexbox (1) jcontent_by_categories (9) marquee (2) icon (1) modal (1) tab (3) scroller (2) addcsshead (1) jcontent_in_content (2) jcontent-info (1)