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-link## ##image-src## ##image-alt##
##date-crea## ##date-modif## ##date-publish##
##author## ##note## ##cat## ##new## ##featured## ##hits## ##tags-list##
author LOMART version 1.0 license GNU/GPLv3
  • jcontent_by_categories (jnews): ID(s) catégorie(s) séparé avec virgule, vide pour celle de l'article actuel ou 0 pour toutes
  • maxi: Nombre maxi d'article 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
  • prefset: jeu d'options défini par le webmaster dans prefs.ini
  • 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: format 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-rouge t-blanc">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 eventuels 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: code CSS dans le head

    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. Documentation
      (créé le 30 November -1 par lomart)
    2. Présentation
      (créé le 9 August 2017 par lomart)
    3. Liste (auto-générée) des actions
      (créé le 9 August 2017 par lomart)
    4. media-youtube ~ affiche des vidéos youtube
      (créé le 10 August 2017 par lomart)
    5. cell ~ mise en page avec table-cell
      (créé le 10 August 2017 par lomart)
    6. image-hover ~ affichage texte avec effets lors survol
      (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

    jcontent-by-tags
    liste des articles avec un mot-clé
    20 December 2019 par lomart
    lang

    22 December 2019 par lomart
    jcontent-list
    liste des articles d'une catégorie
    12 December 2019 par lomart
    jcategories-by-tags
    liste des catégories avec un mot-clé
    20 December 2019 par lomart
    php-error

    7 December 2019 par lomart
    jcontent-by-categories
    (jnews) les nouveautés sur votre site
    20 December 2019 par lomart
    jcontent-in-content
    pour mettre un article dans un article
    20 December 2019 par lomart
    hr
    ligne horizontale avec icône
    21 December 2019 par lomart
    scroller
    vos infos défilent verticalement
    18 December 2019 par lomart
    counter
    afficher un compteur
    20 November 2019 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

    jcontent-by-tags
    liste des articles avec un mot-clé

    \Liste avec mise en page des articles ayant un mot-clé.

    Lire la suite crée le 20 December 2019 par lomart

    lang

    UPchoisir un texte ou une image selon la langue visiteur

    Lire la suite crée le 22 December 2019 par lomart

    jcontent-list
    liste des articles d'une catégorie

    \Insérer la liste des articles d'une catégorie.

    Lire la suite crée le 12 December 2019 par lomart

    jcategories-by-tags
    liste des catégories avec un mot-clé

    \Liste des catégories ayant un mot-clé avec lien vers le blog des catégories.

    Lire la suite crée le 20 December 2019 par lomart

    php-error

    \Afficher ou masquer les messages d'erreur PHP

    Lire la suite crée le 7 December 2019 par lomart

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

    \Seule ou associée à d'autres actions, vous disposez d'une solution visuelle et animée pour présenter vos nouveautés.

    Lire la suite crée le 20 December 2019 par lomart

    jcontent-in-content
    pour mettre un article dans un article

    \Cette action permet de mettre un article dans un autre article

    Lire la suite crée le 20 December 2019 par lomart

    hr
    ligne horizontale avec icône

    \des lignes horizontales avec du style !

    Lire la suite crée le 21 December 2019 par lomart

    scroller
    vos infos défilent verticalement

    \Cette action permet de faire défiler verticalement les informations saisie entre les shortcodes

    Lire la suite crée le 18 December 2019 par lomart

    counter
    afficher un compteur

    \Ajouter un compteur dans vos articles

    Lire la suite crée le 20 November 2019 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
    • jcontent-by-tags
    • lang
    • jcontent-list

    liste des articles avec un mot-clé

    \Liste avec mise en page des articles ayant un mot-clé.

    Lire la suite crée le 20 December 2019 par lomart

    UPchoisir un texte ou une image selon la langue visiteur

    Lire la suite crée le 22 December 2019 par lomart

    liste des articles d'une catégorie

    \Insérer la liste des articles d'une catégorie.

    Lire la suite crée le 12 December 2019 par lomart

    • jcontent-by-tags
    • lang
    • jcontent-list
    • jcategories-by-tags
    • php-error

    liste des articles avec un mot-clé

    \Liste avec mise en page des articles ayant un mot-clé.

    Lire la suite crée le 20 December 2019 par lomart

    UPchoisir un texte ou une image selon la langue visiteur

    Lire la suite crée le 22 December 2019 par lomart

    liste des articles d'une catégorie

    \Insérer la liste des articles d'une catégorie.

    Lire la suite crée le 12 December 2019 par lomart

    liste des catégories avec un mot-clé

    \Liste des catégories ayant un mot-clé avec lien vers le blog des catégories.

    Lire la suite crée le 20 December 2019 par lomart

    \Afficher ou masquer les messages d'erreur PHP

    Lire la suite crée le 7 December 2019 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
    • jcontent-by-tags
    • lang
    • jcontent-list

    liste des articles avec un mot-clé

    \Liste avec mise en page des articles ayant un mot-clé.

    Lire la suite crée le 20 December 2019 par lomart

    UPchoisir un texte ou une image selon la langue visiteur

    Lire la suite crée le 22 December 2019 par lomart

    liste des articles d'une catégorie

    \Insérer la liste des articles d'une catégorie.

    Lire la suite crée le 12 December 2019 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
    jcontent-by-tags liste des articles avec un mot-clé
    20 December 2019 par lomart
    lang
    22 December 2019 par lomart
    jcontent-list liste des articles d'une catégorie
    12 December 2019 par lomart
    jcategories-by-tags liste des catégories avec un mot-clé
    20 December 2019 par lomart
    php-error
    7 December 2019 par lomart
    jcontent-by-categories (jnews) les nouveautés sur votre site
    20 December 2019 par lomart
    jcontent-in-content pour mettre un article dans un article
    20 December 2019 par lomart
    hr ligne horizontale avec icône
    21 December 2019 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

    jcontent-by-tags
    liste des articles avec un mot-clé

    \Liste avec mise en page des articles ayant un mot-clé.

    Lire la suite crée le 20 December 2019 par lomart

    lang

    UPchoisir un texte ou une image selon la langue visiteur

    Lire la suite crée le 22 December 2019 par lomart

    jcontent-list
    liste des articles d'une catégorie

    \Insérer la liste des articles d'une catégorie.

    Lire la suite crée le 12 December 2019 par lomart

    jcategories-by-tags
    liste des catégories avec un mot-clé

    \Liste des catégories ayant un mot-clé avec lien vers le blog des catégories.

    Lire la suite crée le 20 December 2019 par lomart

    php-error

    \Afficher ou masquer les messages d'erreur PHP

    Lire la suite crée le 7 December 2019 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), 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 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 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é.
    prefset jeu d'option défini par le webmaster dans custom/prefs.ini
    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 (obsoléte) (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: &#x2B50
    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. <span class='badge-rouge'>nouveau</span> 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-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)

    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), 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 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.<img src='...' alt='...'>
    ##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 3
    ##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

    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</id>}.

    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</id>}