frendeitpt

jcontent-by-categories ~ (jnews) les nouveautés sur votre site

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.

🆙 jcontent_by_categories (jnews) : liste des articles d'une catégorie

Cliquer pour lire la documentation

syntaxe : {up jcontent-by-categories=id-catégorie(s)}
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## ##link##
##intro## ##intro-text## ##intro-text,100## ##content##
##image## ##image-src## ##image-alt##
##date-crea## ##date-modif## ##date-publish##
##author## ##note## ##cat## ##new## ##featured## ##hits## ##tags-list##
author LOMART version UP-1.7 license GNU/GPLv3 tags Joomla
  • 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
  • maxi: Nombre maxi d'articles dans la liste. Vide = tous
  • exclude: liste des id des catégories non reprises si option principale=0
  • current = 0: 1 pour inclure l'article en cours
  • no-published (no_published) = 1: Liste aussi les articles non publiés
  • sort-by = publish_up: tri: title, ordering, created, modified, publish_up, id, hits
  • sort-order = desc: ordre de tri : asc, desc
  • author: filtre sur auteur: liste des id ou article, current
  • template (item-template): modèle de mise en page. Si vide le modèle est le contenu
  • main-tag = 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)
  • 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)
  • 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 = &#x2B50: code HTML pour article en vedette
  • no-content-html = Pas de nouvelles, bonnes nouvelles ...[br]No news, good news ...: texte si aucune correspondance. 0=aucun texte
  • image-src: lorempixel.com/300/300', // image par défaut
  • image-alt = news: image, texte alternatif par défaut
  • 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
  • css-head (base-css): code CSS dans le head

    Version 2.4 Ajout mot-clé ##content##

     

    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.

    1. upactionslist ~ interne - liste et docs des actions
      (créé le 10 mars 2017 par lomart)
    2. Présentation
      (créé le 9 août 2017 par lomart)
    3. cell ~ mise en page avec table-cell
      (créé le 10 août 2017 par lomart)
    4. meteo-france ~ prévision Météo France
      (créé le 10 août 2017 par lomart)
    5. image-hover ~ affichage texte avec effets lors survol
      (créé le 10 août 2017 par lomart)
    6. image-Compare ~ comparaison de 2 images
      (créé le 10 août 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

    upsearch
    recherche shortcode et contenu
    28 mai 2021 par lomart
    jcontent-info
    afficher des éléments de l'article en cours
    25 mai 2021 par lomart
    treeview
    affiche une liste sous forme d'un arbre
    11 mai 2021 par lomart
    folder-list
    affiche le contenu d'un dossier sur le serveur
    11 mai 2021 par lomart
    jcontent-by-subcat
    articles par catégorie et sous-catégories
    11 mai 2021 par lomart
    color - informations sur les couleurs UP

    11 mai 2021 par lomart
    popover
    popup lors d'un clic
    11 mai 2021 par lomart
    text-typewriter

    31 mars 2021 par lomart
    table-sort

    10 février 2021 par lomart
    field

    10 février 2021 par lomart
    les dernières actions

    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

    upsearch
    recherche shortcode et contenu

    \Recherche une action dans le contenu des articles et/ou modules

    Lire la suite crée le 28 mai 2021 par lomart

    jcontent-info
    afficher des éléments de l'article en cours

    \Affiche des informations sur l'article courant

    Lire la suite crée le 25 mai 2021 par lomart

    treeview
    affiche une liste sous forme d'un arbre

    \transforme une liste à puces en treeview

    Lire la suite crée le 11 mai 2021 par lomart

    folder-list
    affiche le contenu d'un dossier sur le serveur

    \pour lister le contenu d'un dossier sur le serveur

    Lire la suite crée le 11 mai 2021 par lomart

    jcontent-by-subcat
    articles par catégorie et sous-catégories

    \Liste des articles par catégorie et sous-catégories

    Lire la suite crée le 11 mai 2021 par lomart

    color - informations sur les couleurs UP

    \retourne le code web (#rvb) d'une couleur UP

    Lire la suite crée le 11 mai 2021 par lomart

    popover
    popup lors d'un clic

    \affiche une popup lors d'un clic sur un élément

    Lire la suite crée le 11 mai 2021 par lomart

    text-typewriter

    \ afficher des phrases avec un effet machine à écrire

    Lire la suite crée le 31 mars 2021 par lomart

    table-sort

    \ trier, filtrer et paginer une table HTML

    Lire la suite crée le 10 février 2021 par lomart

    field

    \ afficher ou récupérer un Custom Field

    Lire la suite crée le 10 février 2021 par lomart

    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
    • upsearch
    • jcontent-info
    • treeview

    recherche shortcode et contenu

    \Recherche une action dans le contenu des articles et/ou modules

    Lire la suite crée le 28 mai 2021 par lomart

    afficher des éléments de l'article en cours

    \Affiche des informations sur l'article courant

    Lire la suite crée le 25 mai 2021 par lomart

    affiche une liste sous forme d'un arbre

    \transforme une liste à puces en treeview

    Lire la suite crée le 11 mai 2021 par lomart

    • upsearch
    • jcontent-info
    • treeview
    • folder-list
    • jcontent-by-subcat

    recherche shortcode et contenu

    \Recherche une action dans le contenu des articles et/ou modules

    Lire la suite crée le 28 mai 2021 par lomart

    afficher des éléments de l'article en cours

    \Affiche des informations sur l'article courant

    Lire la suite crée le 25 mai 2021 par lomart

    affiche une liste sous forme d'un arbre

    \transforme une liste à puces en treeview

    Lire la suite crée le 11 mai 2021 par lomart

    affiche le contenu d'un dossier sur le serveur

    \pour lister le contenu d'un dossier sur le serveur

    Lire la suite crée le 11 mai 2021 par lomart

    articles par catégorie et sous-catégories

    \Liste des articles par catégorie et sous-catégories

    Lire la suite crée le 11 mai 2021 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
    • upsearch
    • jcontent-info
    • treeview

    recherche shortcode et contenu

    \Recherche une action dans le contenu des articles et/ou modules

    Lire la suite crée le 28 mai 2021 par lomart

    afficher des éléments de l'article en cours

    \Affiche des informations sur l'article courant

    Lire la suite crée le 25 mai 2021 par lomart

    affiche une liste sous forme d'un arbre

    \transforme une liste à puces en treeview

    Lire la suite crée le 11 mai 2021 par lomart

    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
    upsearch recherche shortcode et contenu
    28 mai 2021 par lomart
    jcontent-info afficher des éléments de l'article en cours
    25 mai 2021 par lomart
    treeview affiche une liste sous forme d'un arbre
    11 mai 2021 par lomart
    folder-list affiche le contenu d'un dossier sur le serveur
    11 mai 2021 par lomart
    jcontent-by-subcat articles par catégorie et sous-catégories
    11 mai 2021 par lomart
    color - informations sur les couleurs UP
    11 mai 2021 par lomart
    popover popup lors d'un clic
    11 mai 2021 par lomart
    text-typewriter
    31 mars 2021 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

    upsearch
    recherche shortcode et contenu

    \Recherche une action dans le contenu des articles et/ou modules

    Lire la suite crée le 28 mai 2021 par lomart

    jcontent-info
    afficher des éléments de l'article en cours

    \Affiche des informations sur l'article courant

    Lire la suite crée le 25 mai 2021 par lomart

    treeview
    affiche une liste sous forme d'un arbre

    \transforme une liste à puces en treeview

    Lire la suite crée le 11 mai 2021 par lomart

    folder-list
    affiche le contenu d'un dossier sur le serveur

    \pour lister le contenu d'un dossier sur le serveur

    Lire la suite crée le 11 mai 2021 par lomart

    jcontent-by-subcat
    articles par catégorie et sous-catégories

    \Liste des articles par catégorie et sous-catégories

    Lire la suite crée le 11 mai 2021 par lomart

    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
    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 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
    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

    (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
    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 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)
    ##link## a 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. (3)
    ##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)
    ##author## nom de l'auteur de l'article
    ##note## note sur l'article
    ##cat## nom de 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##
    ##tags-list## liste des mots-clés
    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)

    Attention : ne pas utiliser les mots-clés dans votre contenu

    Si cela est impossible, remplacez l'accolade ouvrante par son code &#123;, soit pour id : &#123;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. "&amp;#123;id}" ou {<b>id</b>}