Je sais qu'il est facile pour un rédacteur de se perdre dans les 150 actions proposées par UP version 5.1.
Dans cet article, je vais essayer de les regrouper par fonctionnalités et utilisations, en privilégiant celles que l'on utilise (ou que l'on devrait utiliser) le plus souvent.
La première version de UP date de septembre 2017. En (presque) 8 ans, certaines actions ont été supplantées par d'autres.
Ce document sera l'occasion de faire le point.
Il existe un autre document indispensable pour comprendre les subtilités de UP, c'est l'aide-mémoire rédacteur.
L'omniprésence des smartphones et tablettes nous oblige à penser responsive lors de la mise en page de nos articles et contenus.
Les trois actions que j'utilise le plus concernent la gestion horizontale (colonnes) du contenu.
- flexAuto est une grille responsive sur plusieurs colonnes de même largeur
- flexbox qui permet de choisir les largeurs des colonnes. La hauteur des blocs est identique sur une même ligne.
- masonry emboite des blocs de hauteurs différentes sur un nombre de colonnes variant selon la largeur de l'écran.
pour concevoir un bloc de contenu
- cell, une des premières actions de UP, est utile pour définir la largeur des colonnes selon la taille de l'écran en restant sur une seule ligne.
- center centre tous les blocs enfants en supprimant les margins superflus
- sameheight égalise la hauteur des enfants directs du bloc (p ou div)
- box affiche une boite avec un tite, sous-titre, image, contenu et action
Pour gagner de la place sur la page
- faq répartit les données dans un accordéon
- tab affiche du contenu dans des panneaux avec onglets en haut, à gauche ou à droite.
- readmore permet de cacher un bloc HTML qui sera accessible à l'aide d'un bouton 'lire la suite'
Il est souvent nécessaire de passer en mode code pour ajouter des balises et définir leurs attributs.
- les modifications sont invisibles lors d'une relecture. Il faut repasser en mode code pour les voir
- un éditeur mal paramétré ou un rédacteur avec moins de droits peut faire un ménage à postériori
- l'éditeur risque d'ajouter des classes et des styles à votre insu. Combien de temps ai-je avec cela sous tinyMCE !
- div et span vont ajouter les balises HTML de même nom pour faciliter la saisie des classes et styles.
- attr ajoute des attributs à la première balise trouvée entre ses shortcodes.
- html crée une entité HTML (balise) avec ses classes, style et attribut sans passer en mode code
- iframe permet d'introduire une iframe responsive dans un article
- link affiche un lien vers une URL, un numéro de téléphone ou un mail
- bbcode pour saisir du code HTML sans quitter l'éditeur WYSIWYG
Souvent nous chargeons des ressources de façon permanente alors qu'elle ne seront utilisées que par un article.
Pour économiser du temps et de la bande passante, pensez à ces actions.
- addcodehead ajoute du code libre dans le head.
- addcsshead ajoute du code ou fichier CSS dans le head.
- addfilehead Ajoute des fichiers JS ou CSS dans le head
- addscript ajoute du code ou un fichier JS ou JQuery
- addcsshead ajoute du code ou fichier CSS dans le head.
- addclass permet d'ajouter une classe à un sélecteur CSS ou un de ses ancétres. Indispensable pour modifier un bloc parent.
- color retourne la valeur d'une couleur de la feuille de style de UP
La plupart des actions proposent une option css-head qui permet définir un style qui cible uniquement cette instance de l'action.
- hr affiche un trait horizontal avec une icône et/ou du texte
- icon uniformise l'appel des icônes. Evite de passer en mode code pour la saisie
- listup Personnaliser des listes simples et ordonnées
- treeview Affiche une liste sous forme d'un arbre (treeview)
Pour alléger visuellement une page, vous pouvez utiliser ces actions qui masquent une partie du contenu
- tooltip des info-bulles au survol d'un élément
- popover affiche une grosse info-bulle lors d'un clic sur un élément.
- readmore afficher/cacher un bloc HTML à l'aide d'un bouton 'lire la suite'
- ajax-view affiche un bouton pour charger le contenu d'un article ou un fichier
- modal affiche du contenu dans une fenêtre modale (popup)
Proposer des nouveautés ou des informations
- marquee du contenu HTML défilant horizontalement ou verticalement
- scroller défilement vertical d'une liste d'éléments
La gestion des polices
- googlefont ajoute une police GoogleFont, ainsi que la classe pour l'utiliser
- text-fit permet d'ajuster la taille de la police d'un texte à son conteneur parent. Très pratique pour faire tenir un titre sur une ligne.
Pour les contenus fréquents
- snippet pour créer et charger des petits fichiers texte. HTML autorisé
- jcontent-in-content Affiche le contenu d'un article dans un autre
Pour internationaliser votre contenu
- lang retourne du contenu (texte, image) selon la langue du visiteur
Pour vous souvenir d'une info importante ou cacher temporairement du contenu
- note ajoute des commentaires visibles dans un éditeur WYSIWYG et pas sur le site
- table-by-columns rend la table responsive par empilement des lignes d'une colonne.
- table-by-rows table responsive par empilement des colonnes par lignes.
- table-fixe table responsive: la ligne d'entête reste visible
- table-flip table responsive par permutation lignes/colonnes
Si vous souhaitez ajouter des fonctions de tri et de filtrage à vos tableaux
- table-sort pour trier, filtrer et paginer une table
Plutôt que la saisie fastidieuse dans un article, importez vos données
- csv2table pour saisir ou importer du contenu au format CSV dans une table
- data2table affiche le contenu d'un fichier JSON, XML ou CSV sous forme d'un tableau
- sql Requête SQL avec présentation dans une table avec tri
- image-gallery une galerie d'images avec lightbox
Pour présenter quelques images défilantes en appui de votre contenu
- slider-owl bandeau défilant d'images ou de blocs HTML
- slider-tiny description de l'action. La 1ère ligne d'en-tête du script
- slideshow-billboard Slideshow responsive d'images avec légendes et liens
Une image avec des zones cliquables
- imagemap une image cliquable et responsive
Pour voir une image en relief
- image-pannellum Affiche un panorama 3D à partir d'une image equirectangular
Quelques actions pour des effets sur les images
- image-compare comparaison de 2 images par déplacement d'un volet
- image-hover superpose un contenu HTML sur une image avec des effets lors du survol
- image-logo ajoute une image ou un texte sur une image
- image-magnify affiche un effet de loupe sur une image
- image-random affiche aléatoirement une des images d'un dossier
- image-rollover change l'image au survol
- image-secure affiche une image de manière à compliquer sa récupération
Des lecteurs audio-vidéo en pur HTML
- media-audio affiche un lecteur (HTML5) pour un ou des fichiers audio hébergés sur le serveur
- media-video affiche une vidéo locale en HTML5
Des variantes
- media-plyr affiche un lecteur vidéo ou audio qui s'inscrit au maxima dans son bloc parent
- media-vimeo affiche une vidéo Viméo qui s'inscrit au maxima dans son bloc parent
- media-youtube affiche une vidéo Youtube qui s'inscrit au maxima dans son bloc parent
Un gadget bien utile dans certains cas
- sound-hover joue un son au survol d'un élément ou d'un événement JS
- pdf affiche un PDF dans le contenu ou génère un bouton pour l'afficher dans une fenêtre
- pdf-gallery la liste des PDF contenus dans un dossier
- file-download est un gestionnaire simple de téléchargements avec stats et protection par mot de passe
- file force le téléchargement d'un fichier
- file-explorer permets d'explorer un dossier et ses sous-dossiers avec prévisualisation et téléchargement.
- folder-list retourne la liste mise en forme du contenu d'un dossier sur le serveur
- file-office-view affiche un fichier MS Office (word, excel, powerpoint)
- file-in-content utilise tous les fichiers d'un dossier pour construire un article
- file-view Force le chargement d'un fichier pour l'afficher en brut
- markdown Affiche du contenu MARKDOWN provenant d'un fichier ou saisi entre les shortcodes
- ajax-view affiche un bouton pour charger le contenu d'un article ou un fichier. Possibilité de demander un mot de passe.
- popup ouvrent une fenêtre après un délai ou une position dans la page
- gotop affiche un bouton avec indicateur de position pour revenir en haut de page.
- scroll-indicator affiche la position dans la page dans un cercle autour du curseur
- page-search cherche un mot dans la page courante
- printer ajoute un bouton pour proposer l'impression d'une partie de la page. Idéal pour remplacer ce bouton dans les dernières versions de Joomla!
- anim-aos affiche du contenu avec des animations lors du défilement de la page
- text-blink attire l'attention en faisant clignoter un texte
- text-typewriter affiche plusieurs phrases avec un effet machine à écrire
- modal affiche du contenu dans une fenêtre modale (popup)
- marquee du contenu HTML défilant horizontalement ou verticalement
- scroller défilement vertical d'une liste d'éléments
Pour le prototype d'un site, il est utile d'avoir du texte et des images de remplissage
- lorem affiche du texte aléatoire (enrichissement HTML possible)
- lorem-flickr affiche une image aleatoire
- lorem-placeimg affiche une image aleatoire
- lorem-unsplash affiche une image aleatoire
- lorem-place Affiche une image factice aux dimensions indiquées
- csv2def Conversion d'un contenu au format CSV en liste de définition (DL/DT/DD)
- csv2list Conversion d'un contenu au format CSV en liste avec point de conduite
- csv2table Conversion d'un contenu au format CSV en table
- csv-info retourne la valeur brute d'un élément (ligne/colonne) d'un fichier CSV
- data2list affiche le contenu d'un fichier JSON, XML ou CSV sous forme d'une liste
- data2table affiche le contenu d'un fichier JSON, XML ou CSV sous forme d'un tableau
- data-info retourne des champs d'une source de données selon un template de mise en forme
- php permet d'exécuter du code PHP dans un article.
- php-error active les rapports d'erreurs PHP. Très pratique pour élever ponctuellement le niveau d'alerte
- sql Requête SQL avec mise en forme et tri
Un menu pour aller vers les sections de votre article
- toc sommaire automatique
Un menu minimaliste pour se déplacer dans un article
- form-select liste déroulante d'options
Un menu graphique
- imagemap une image cliquable et responsive
Pour accompagner un lien vers un site
- website affiche un screenshot d'un site avec un lien.
- website-preview affiche une prévisualisation du site au survol d'un lien
Proposer des nouveautés ou des informations
- marquee du contenu HTML défilant horizontalement ou verticalement
- scroller défilement vertical d'une liste d'éléments
Ces actions permettent d'animer votre site en ajoutant un fond de page, une information dans l'angle de la page. Celles-ci peuvent être limitées à une période.
- bg-image une image comme fond de site ou d'un bloc
- bg-slideshow une série d'images défilantes en fond du site ou d'un bloc
- bg-video une vidéo locale ou youtube en fond de site ou dans un bloc
- corner affiche un texte sur ruban dans un angle de la page
- snowfall pour simuler des chutes de neige ou autres pour des événements
- tabslide ajoute des onglets pour ouvrir un panneau sur les bords de la fenêtre
- osmap affiche une carte OpenStreetMap avec des marqueurs
- gmap affiche une carte google pour une adresse
- mapael affiche une carte vectorielle interactive
- chart des graphiques statistiques avec GoogleChart
- chart-org affiche l'organigramme d'une organisation
- mapael des données une carte vectorielle interactive
- barcode création de code à barres à partir de la librairie TCPDF.
- qrcode génère des QRCodes avec Google API
- countdown un compte à rebours ou une horloge digitale
- countdown-simple un compte à rebours simple et facilement adaptable par CSS
- counter un compteur avec préfixe et suffixe
- clocks-gmt une horloge analogique et/ou digitale avec l'heure d'un fuseau horaire
- date calcule et retourne une date avec ou sans mise en forme
- meteo-concept les prévisions météo pour à date donnée pour une ville FRANCAISE
- meteo-france affiche le widget de Météo France
- facebook-timeline affiche la timeline Facebook
- tweeter-timeline affiche la timeline X (ex-Tweeter)
Quelques actions ont pour but de fournir des listes de liens vers des articles
- jcontent-by-categories, une action du TOP10, liste les articles d'une ou plusieurs catégories
- jcontent-by-subcat, les articles classés par catégories et sous-catégories avec un treeview optionnel.
- jcontent-by-tags liste des articles avec un mot-clé (tag)
- jcategories-by-tags liste des catégories d'un mot-clé (tag)
- jcontent-in-content Affiche le contenu d'un article dans un autre
- jcontent-info affiche des informations sur l'article courant
- jcontent-list, l'ancêtre de jcontent-by-categories, est conservée pour les anciens utilisateurs. elle liste des articles d'une catégorie
- field retourne la valeur d'un custom field pour le contenu courant
- jcat-image affiche une image en rapport avec la catégorie de l'article courant
- filter affiche le contenu si toutes les conditions sont remplies (date, utilisateur, …)
- cache-cleaner efface les fichiers du cache pour un besoin ponctuel
- random sélectionne une ou plusieurs valeurs dans une liste ou un dossier
- replace subtitue un texte par un autre dans le contenu entre ses shortcodes. Pratique pour du contenu généré par UP
- donation formulaire de donation avec Paypal
- kawa sert un café virtuel. Parce que UP sait tout faire même le café ?
Certaines actions servent quasi-exclusivement pour Créer le dossier technique du site
- jcategories-list affiche l'arborescence des catégories
- jextensions-list liste les extensions installées sur le site
- jmenus-list affiche l'arborescence des menus
- jmodules-list liste des modules sur le site
Référencement et fréquentation
- jcontent-metadata pour contrôle des métadonnées des articles d'une ou plusieurs catégories
- jmenus-metadata les metadatas des menus et articles dépendants. Très pratique pour contrôler les statuts robots, les dates de publication et mise en vedette, la longueur des titres, ...
- sitemap Création d'un fichier 'sitemap.xml' en racine du site
- site-stat comptabilise le nombre d'appel de cette action et affiche le nombre de visite
- site-visit ancienne version de site-stat conservée pour les anciens utilisateurs
Quelques actions sont réservées au webmaster pour la maintenance de son plugin préféré
- upactionslist liste des actions de UP avec infos et paramètres. Un moyen, avec l'option ? dans le shortcode, d'avoir la documentation des actions avec vos prefsets facilement accessible.
- upprefset affiche la liste de tous les prefsets de UP pour le site et permet leurs exportations vers un autre site
- upscsscompiler recompile tous les fichiers SCSS présents dans les dossiers des actions
- upsearch recherche une action dans le contenu des articles et/ou modules
- upbtn-makefile créé les fichiers HTML pour le plugin editors-xtd avec vos prefsets, vos conseils aux rédacteurs et actions préférées
- Détails
Je reconnais qu'il est parfois difficile de trouver la bonne information.
Au travers de cet article, je vais essayer de vous guider parmi les documentations existantes.
Installer et découvrir UP
3 articles pour faire connaissance
- Installation et mise à jour : c'est la première chose à faire lorsqu'on découvre UP
- Premiers pas : un exemple concret pour voir les possibilités de UP
- Les actions par utilisations :comment trouver l'action qui correspond à notre besoin
L'aide intégrée
Elle est disponible :
- au début de chacune des démos sur ce site
- sur cette page : Liste (auto-générée) des actions qui regroupe toutes les action
- en ajoutant une option ? (point d'interrogation) à votre shortcode. Exemple :
{up gmap | ?}
- le nom de l'action, ses éventuels synonymes entre parenthèses et une description succincte
- un rappel de la syntaxe et quelques explications sur son fonctionnement
- la version, l'auteur, les crédits et un tag pour le classement
- les options disponibles avec leurs synonymes entre parenthèses, leurs valeurs par défaut après le signe égal et une explication
L'exemple ci-dessus, montre que ces 2 shortcode sont similaires. Je vous laisse chercher !
{up gmap=adresse | height=400}
{up googlemap=adresse | h=400}
Si je ne précise pas la valeur pour l'option weight,
elle sera égale à la valeur par défaut de 100%
Les shortcodes
UP permet de donner des instructions en mode code ou wysiwyg dans un article ou un module personnalisé à l'aide de shortcodes.
- ❶ Shortcodes
- ❷ Shortcodes annexes
- ❸ Traduction
- ❹ BBcode
- ❺ Options courantes
- ❻ FAQ
{up action=paramètre principal | option=valeur de l'option}
- un shortcode "ouvrant" commence toujours par ❴up (altGr+4 suivi du mot up)
- suivi d'un espace et du nom de l'action à réaliser : action
- si l'action attend un paramètre principal, on l'indique à la suite du signe égal
- il est possible d'indiquer plusieurs options en les séparant par le caractère pipe (altGr+6).
- il se termine toujours par une accolade fermante (altGr+=)
Certaines actions permettent de saisir un contenu de façon habituelle à la suite du shortcode.
On indique la fin de ce contenu par un shortcode "fermant" où le mot up est précédé d'un antislash suivi du nom de l'action :
{/up action commentaire_optionnel}
Le tiret et trait de soulignement ont la même signification.
Shortcodes comme argument
ils sont évalués en commençant par la fin de l'article et les plus inclus en premier.
{up table-par-lignes} ❹
{up csv2table} ❸
{up jnews=8 ❷
| template=##id##;##title##
| new-html={up icon=etoile} ❶
}
{/up csv2table}
{/up table-par-lignes}
Les actions sont autonomes et indépendantes. Cela peut poser des problèmes lorsqu'une action enfant ajoute directement du code dans le head. Dans ce cas, utilisez l'option filter de l'action.
Attention Il n'est pas possible de mettre des shortcodes comme argument d'une option dans le fichier prefs.ini
Les shortcodes séparateurs
ils sont utiliser pour isoler les différentes parties du contenu situé entre le shortcode ouvrant et fermant. Cette méthode est plus visuelle et facilite la saisie dans un éditeur comme TinyMCE ou JCE
{up filter | guest}
vous êtes invité
{===}
vous êtes identifié
{/up filter}
{up flexauto=2}
bloc 1
{=== commentaire}
bloc 2
{/up flexauto}
Pour être reconnu, un séparateur doit commencer par une accolade suivi de 3 signes égal et se terminer par une accolade.
Il est permis d'ajouter un commentaire avant l'accolade fermante ❴====== commentaire❵
Shortcodes internes ou secondaires
Utilisés pour fournir des informations optionnelles, ils sont insérés entre les shortcodes ouvrant et fermant. Ils ne commencent pas par up. Voir la documentation des actions concernées.
{up osmap=48.865, 2.30}
{marker=48.8709, 2.33223 | popup-text=... }
{/up osmap}
Tous les arguments des options peuvent être fournis en plusieurs langues en utilisant une de ces 2 méthodes :
{up hr
| icon=lang[en=/images/icons/32/gb.png;fr=/images/icons/32/france.png;de=/images/icons/32/germany.png]
| icon-text=lang[en=Hello;fr=Bonjour;de=Hallo]
}
{up hr
| icon=/images/icons/32/{up lang | en=gb | fr=france | de=germany}.png}
| icon-text={up lang |en=Hello | fr=Bonjour | de=Hallo}
}
La première méthode nécessite que l'argument débute par lang[
. On peut l'utiliser dans un fichier prefs.ini
La deuxième est plus simple d'utilisation, mais son usage est limité aux shortcodes.
Si aucune langue ne correspond à celle de l'internaute, c'est la première langue qui sera utilisée.
Le bbcode permet de saisir facilement et en toute sérénité du code HTML dans un éditeur.
Le principe :
on écrit du code HTML en remplaçant certains caractères pour qu'un éditeur wysiwyg ne les interprète pas.
Exemple : un mot en <b>gras</b>
affiche le code ou le résultat, alors que un mot en [b]gras[/b]
transmet le code à UP
Vous pouvez utiliser le bbcode de 2 façons :
- comme argument des options qui l'accepte. Consulter leur documentation.
- en utilisant l'action bbcode. exemple :
{up bbcode=un mot en [b]gras[/b]}
affiche un mot en gras
Un petit résumé des règles :
- par défaut, seules les balises les plus courantes sont prises en charge :
br,p,div,span,b,i,u,img,quote,ul,ol,li,code,tt,kbd
- on utilise le nom des balises HTML en remplaçant les <> par []
- pour afficher des crochets, on ajoute un antislash devant. Exemple :
\[
- pour les actions acceptant la saisie au format CSV, il faut doubler les guillemets doubles ou utiliser des guillemets simples.
Exemple :[b class=""t-rouge""]rouge[/b]
ou[b class='t-rouge']rouge[/b]
- les entités HTML neutralisées par les éditeurs Wysiwyg sont restaurées.
Exemple :dans TynyMCE vous saisissez
, il est converti et enregistré sous la forme&nbsp;
, UP le restaure
option=1 ou option (sans argument) sont considérées comme vraie, option=0 est considérée comme fausse.
id : identifiant du bloc principal de l'action. UP le crée automatiquement, mais vous pouvez le forcer si vous avez besoin de le réutiliser pour une autre action (ex: addcsshead)
? : affiche un résumé des commandes l'action dans la langue de l'utilisateur ainsi que les prefset définis par le webmaster.
debug : affiche la liste des options avec les valeurs actuelles. Celles par défaut et celles saisies dans le shortcode. En fin de message, vous trouverez la liste des prefset définis pour votre site.
prefset : permet d'appliquer un ensemble d'options par un nom explicite et facile à retenir. Un jeu d'options (prefset) peut aussi être appelé comme argument de l'option principale. {up hr=param}
et {up hr | prefset=param}
produisent le même résultat.
style, class : propriétés CSS ou nom(s) de classe pour le bloc principal de l'action. UP accepte que l'on mélange des noms de classes et des propriétés CSS : class=color:red;bg-yellow est valide.
Les accolades sont interdites à l'intérieur du shortcode. Pour indiquer la règle CSS a[title]{color:red}
, on doit écrire a\[title\][color:red]
xxx-style, xxx-class : propriétés CSS ou nom(s) de classe pour l'élément indiqué (ex: titre-class).
xxx-style-*, xxx-class-* : style et class par défaut pour tous les éléments. exemple : col-class-*=t-bleu
toutes les colonnes de la table en bleu. : col-class-6=t-rouge
la 6è colonne en rouge. 12 éléments maximum.
css-head : ajoute des règles CSS dans le head de la page. exemple : css-head=body[background:pink] #id a[text-decoration:underline] \[class^="foo"\][color:red]
les accolades {} sont remplacées par des crochets []. #id, sera remplacé par l'identifiant de l'action. Pour saisir un crochet, échapper-le avec un antislash.
filter : n'exécute pas l'action si une des conditions est fausse. exemple : filter=motclé:condition;!motclé:condition;...
le point d'exclamation inverse le sens de la condition
Le shortcode est visible sur la page générée.
- le plugin n'est pas activé
- espace entre l'accolade et le mot up
- l'accolade est en gras. Classique après un copier-coller depuis ce site.
le shortcode ne semble pas fonctionner
- oubli du slash devant le up du shortcode fermant
- le nom de l'action dans le shortcode fermant est différent de celui dans le shortcode ouvrant
message : contenu non trouvé
- le shortcode fermant est incorrect
les options ne sont pas prises en compte
- deux-points (au lieu du signe égal) comme séparateur paramètre/valeur. UP devrait vous le signaler par un message indiquant qu'il ne connait pas l'option. En cas de doute, penser à ajouter debug dans les options pour savoir ce que UP comprend!
comportement bizarre
- peut-être un ajout involontaire de balise HTML lors d'un copier-coller ou par l'éditeur (vérifier en mode code). Normalement, UP nettoie les balises inutiles avant de transmettre les infos à l'action.
- Avec un éditeur wysiwyg, le shortcode ouvrant est dans une balise P et le fermant dans une balise DIV
UP ne reconnait pas cette option : =1
- vous avez un caractère pipe (alt-gr+6) en trop dans le shortcode
Ces informations sont disponibles un peu partout sur ce site,
avec ce bouton
🆙 les shortcodes, mode d'emploiEgalement disponible sur la page Aide-mémoire rédacteur
avec ses versions PDF que je vous invite
à imprimer pour vous y reporter au moindre doute !
UP-memo-redacteur-v5.1-(fr).pdf
UP-memo-redacteur-v5.1-(gb).pdf
Les options généralistes
- css-head, cette option que l'on retrouve sur la majorité des actions permet d'appliquer des règles CSS sans quitter le shortcode en cours
- UP utilise des mots-clés. pour mettre en forme les résultats dans des options templates. La liste est disponible dans l'aide intégrée. Leur nom est entouré par des ##
- quelques actions proposent une option filter pour définir les conditions d'utilisation
Le bouton UP pour les éditeurs
Pour chaque action, vous retrouverez :
- Une aide succinte et les infos de votre webmaster
- la liste des options disponible avec une aide et mention des valeurs par défaut
- la possibilité de fermer le shortcode et d'indiquer le nombre de parties
Le CSS
Pour avoir un rappel de toutes les classes disponibles, télécharger et imprimer la version PDF.

Si vous voulez adapter les couleurs de base de la feuille de style de UP : Personnaliser les couleurs de UP
Personnaliser UP
Dans les articles démo sur les actions, vous verrez souvent ce bouton qui affiche dans plusieurs onglets les modifications permises.
🆙 Comment personnaliser une action- Prefset : comment programmer les jeux d'options
Des explications pour comprendre les jeux d'options, les utiliser et les programmer. - Personnalisation et mise à jour de UP
avec une approche plus technique, cet article vous explique les adaptations que vous pouvez apporter.
Vous y trouverez la liste et les fonctions des fichiers de UP - Personnaliser les couleurs de UP
Si vous voulez modifier les couleurs de base de la feuille de style de UP, toutes les infos sont ici - Créer une action
Un tutoriel pour concevoir une action à partir des modèles proposés - Site de démonstration des actions
Pour les développeurs, comprendre et implanter les démonstrations des actions - Aide-mémoire développeur et sa version PDF
UP-memo-developpeur-v5.1-(gb).pdf
- L'action upbtn-makefile permet de personnaliser le contenu du plugin éditeur.
- Les messages de UP essaient d'être le plus discret possible. Découvrez comment !
Les traductions
UP n'utilise pas la méthode proposée par Joomla pour les traductions, cet article vous explique pourquoi !
Autres
- tarteAuCitron - prise en charge
Un tuto pour implanter cette solution RGPD sur votre site - Créer le dossier technique du site
Un pas à pas pour proposer une documentation dynamique de votre site
Bonus
Pour tout savoir sur UP, la présentation que j'ai réalisée en mai 2022 lors du Joomladay de Bruxelles
div (7) listup (8) flexauto (4) modal (3) jcontent-in_content (1) file-download (4) icon (4) flexbox (1) media-plyr (1) tabslide (1) toc (1) jcontent-info (1)
- Détails
Cette section regroupe des informations générales bien pratiques pour l'utilisation de UP.
Couleurs sûres et nommées
Polices d'icône
Caractères Unicode
🎯 le Top 100
Symboles
- ⭐ Etoiles
- ⏱ Heure
- ☁ Météo
- ❈ Astérisque
- ✄ Ciseaux
- ❎ Croix
- ✑ Crayons
- ☘ décorations typographiques
- ❝ Guillemets
- ❖ Losanges
- ☛ Mains
- ✅ Coche - validation
- ❵ Parenthèses - accolades
- ✚ Plus
- ✟ Religions
- ☯ Divers
Formes
- ⭕ Cercles
- ⭖ Ellipses
- ► Triangles
- ▣ Carrés-rectangles
- 🔶 Losanges
- ➧ Fléches-simples
- ⏩ Fléches-colorées
- ➽ Fléches
- ┋ Filets
- 🆙 Panneaux-bleus
- 🔗 Divers
Humain
- 👧 Personnes
- ♿ Handicap
- ✋ Parties du corps
- 🍽 Alimentation
- 👒 Vétements
- 🎖 Bijoux-décorations
- 💊 Santé-soins
- 🎓 Ecole
- ⚤ Signes
- ♋ Zodiaque
Travail
- 💶 Achats-argent
- 📧 Courrier-mail
- 📞 Téléphone
- 📆 Calendrier-date
- 🔍 Bureau accessoires
- 📕 Livres
- 📝 Documents
- 💻 Ordinateurs
- 🔨 Outils
- 🔒 Cadenas-clef
- 🔔 Cloches
- ♲ Ecologie
- 💣 Armes
Loisirs
- 🎁 Fêtes
- 🏈 Sports
- 🃏 Jeux de Cartes
- 🂉 Jeux de Dominos
- ⚅ Jeux de dés
- ♘ Jeux déchec
- 🀄 Jeux de Mahjong
- 🎯 Jouets
- ☔ Météo
- ⛪ Religions
- 🎭 Cinéma-TV
- ɦ Musique
- Détails
Cette liste d'actions est la documentation générée automatiquement par le plugin à partir des informations récupérés dans le code source de l'action.
- de cibler le parent d'un sélecteur CSS ou être relatif à l'emplacement du shortcode
- de créer la règle CSS avec l'option 'css-head=.foo[color:red]'
syntaxe
{up addclass=nom_classe}
Utilisation : changer l'image de fond à partir d'un article *
- addclass: nom de la classe ajoutée à la balise
- selector = body: balise cible. Ne pas oublier le point pour une classe ou le # pour un ID
- parent: 1 si on cible le parent de selector, 2 le grand-père, ...
options secondaires
- id: identifiant
- css-head (base-css): code CSS pour head. Attention utiliser [] au lieu de {}
- filter: conditions. Voir doc action filter (v1.8)
syntaxe 1
{up addCodeHead=}
syntaxe 2
{up addCodeHead=meta | property=og:title | content=Page title}
Attention : l'option XXX doit être remplacée directement dans le shortcode par un nom d'attribut et sa valeur
- addcodehead: code à ajouter dans le head ou balise
- xxx = yyy: couple attribut-valeur. ex: title=le titre, href=//google.fr
options secondaires
- filter: conditions. Voir doc action filter (v1.8)
- id: identifiant
syntaxe 1
{up addCssHead=.foo[color:red]}
Attention: mettre des [ ] au lieu de {}
syntaxe 2
{up addCssHead}
.foo{color:red}
{/up addCssHead}
syntaxe 3
{up addCssHead=chemin_fichier_css}
Utilisation : charger un fichier CSS spécifique à une page
- addcsshead: fichier ou code CSS. ATTENTION [ ] à la place des {} pour code dans shortcode
- filter: conditions. Voir doc action filter (v1.8)
- id: identifiant
{up addfilehead=file1.js, file2.css, //site.fr/file.js}
- addfilehead: liste des fichiers ou URL. séparateur virgule
- filter: conditions. Voir doc action filter (v1.8)
Si le paramètre principal est body, le code est inséré à la position du shortcode
syntaxe
{up addScript=body | jquery }
code ou fichier{/up addScript}
- addscript = head: ou body pour insérer le code à la position du shortcode
- jquery: 1: entoure avec appel jquery (sauf fichier)
- filter: conditions. Voir doc action filter (v1.8)
- id: identifiant
syntaxe
{up ajax-view=999 | btn-label=Voir un article}
syntaxe
{up ajax-view=fichier.ext | btn-label=afficher un fichier}
syntaxe
{up ajax-view=fichier.jpg | btn-label=[img src='photo-mini.jpg'][br]Cliquer pour voir l'image en grand | password=1234}
- ajax_view: id article ou chemin vers fichier txt ou image
Style du bouton d'appel du contenu ajax
- btn-label = en=load content;fr=charger le contenu: texte sur le bouton appel
- btn-style = btn btn-primary: style et classe du bouton appel
- btn-tag = div: balise principale
Demande de mot de passe
- password: mot de passe pour télécharger le fichier
options secondaires
- HTML: 0= aucun traitement, 1=affiche le code, ou liste des tags à garder (ex: img,a)
- EOL: forcer un retour à la ligne
- ext-images = jpg,png,gif,webp: les extensions des fichiers images autorisés
Style
- id: identifiant
- main-tag (block) = div: balise principale
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
{up anim-aos}
votre texte {/up anim-aos}
syntaxe 2 : anime les tags indiqués dans le contenu
{up anim-aos | repeat=liste tags}
contenu avec les tags cibles {/up anim-aos}
syntaxe 3 : anime tous les tags indiqués à partir de la position du shortcode jusqu'à la fin de l'article
{up anim-aos | repeat=liste tags}
*- anim_aos = zoom-in-right: nom de l'animation
- delay: délai en millisecondes (50-3000 ms)
- duration: durée animation en millisecondes (50-3000 ms)
- easing: effet: linear, ease-in-back, ease-out-cubic, ease-in-sine
- offset: en px, hauteur pour déclenchement par rapport au bas de l'écran.
- anchor-placement: déclenche l'effet lorsque le scrolling de l'élément arrive à certaines positions
- once: one-time effect or not
- repeat: applique l'effet à tous les tags. Ex: h2,h3
- css-before: style de l'élément avant l'animation
- css-after: style de l'élément après l'animation
- id: identifiant
- style: style inline appliqué au bloc
- class: classe(s) appliquée(s) au bloc
{up attr | class=bg-yellow}
< p>texte< /p>{/up attr}
syntaxe
{up attr | class=bg-yellow | tag=img}
< img src="/image.jpg" >
{/up attr}
- attr: classe(s) et/ou style
- tag: balise recherchée, sinon la première
Toutes les autres clés sont considérées comme des attributs
- xxx = yyy: couple attribut-valeur. ex: title=le titre, href=//google.fr
options secondaires
- id: identifiant
- class: classe(s) pour bloc interne
- style: style inline pour bloc interne
- css-head (base-css): style ajouté dans le HEAD de la page
{up barcode=text | type=...|height=..|width=...|color=...}
- barcode = text: valeur alphanumérique du code code barre
- type = EAN13: type de code-barres : C39,C39+,C39E,C39E+,C93,S25,S25+,I25,C128,C128A,C128B,EAN2,EAN5,EAN8,EAN13,UCPA,UPCE,MSI,MSI+,POSTNET,PLANET,RMS4CC,KIX,IMB,IMBPRE,CODABOR,CODE11,PHARMA,PHARMA2
- format = html: format de sortie
- height (h,hauteur) = 30: hauteur du code à barres
- width (l,largeur,w) = 1: espacement des barres
- color = #000: Couleur du code-barre. En mode PNG, on attend des valeurs RGB séparées par des virgules, sinon la couleur en forme texte.
- align = center: alignement code barres et texte (left, center, right)
- showtext = 1: montrer le texte ayant permis de générer le code barres
styles
- id: identifiant
- class: Class(s) pour bloc
- style: Inline style pour bloc
- css-head (base-css): Régles CSS définie par le webmaster (ajoutées dans head)
{up bbcode=content}
syntax 2
{up bbcode}
content {/up bbcode}
- bbcode: contenu au format BBCODE
- tags: balises à traiter. vide: par défaut, liste (a,b,p) ou balise en plus de défaut (+a,b,p)
- css-head (base-css): style ajouté dans le HEAD de la page
fond du site :
{up bg-image=chemin_image}
fond du bloc :
{up bg-image=chemin_image}
contenu {/up bg-image}
fond d'un autre bloc :
{up bg-image=chemin_image | bg-selector=#foo}
*doc : https://developer.mozilla.org/fr/docs/Web/CSS/background
images
- bg_image: images séparées par des points-virgules
- mobile: image ou règle(s) css (si smartphone)
- path: chemin de base ajouté devant le nom des fichiers
emplacement du fond image
- bg-selector = body: sélecteur du bloc pour image(s) de fond
paramètres de l'image
- bg-color: couleur sous image
- bg-repeat = no-repeat: répétition de l'image : no-repeat, repeat-x, repeat-y, repeat, space
- bg-position = center: position de l'image : left|center|right top|center|bottom
- bg-size = cover: remplissage : cover, contain, 100%, 100px
- bg-attachment = scroll: défilement de l'image : scroll, fixed, local
- bg-overlay: image ajoutée en overlay
transparence du contenu de la page
- page-selector: si un bloc est défini, sélecteur du bloc sur lequel appliquer la transparence
- page-overlay = 70: transparence sous la forme 70, #RGBA, image overlay ou règle CSS
options secondaires
- filter: conditions. Voir doc action filter (v1.8)
- center: centrage vertical du contenu entre shortcodes
- id:
- style: style inline pour bloc
- css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
fond site :
{up bg-slideshow=liste images ou dossier}
fond bloc :
{up bg-slideshow=liste images ou dossier}
contenu{/up bg-slideshow}
fond autre bloc :
{up bg-slideshow=liste images ou dossier | bg-selector=#foo}
doc : https://developer.mozilla.org/fr/docs/Web/CSS/background
images
- bg_slideshow: dossier ou images séparées par des points-virgules
- mobile: image ou règle(s) css
- path: chemin commun aux images indiquées en argument principal
- shuffle: tri aléatoire des images. 1=toutes, sinon le nombre d'images pour alléger le chargement
emplacement du fond image
- bg-selector = body: bloc portant le slideshow
paramètres de l'image
- bg-overlay: calque superposé à l'image de fond (png, opacité, RGBA, CSS)
- bg-color: couleur sous image
transparence du contenu de la page
- page-selector: bloc sur contenu
- page-overlay: background de page-selector (png, opacité, RGBA, CSS)
options secondaires
- filter: conditions. Voir doc action filter (v1.8)
- center = 1: centrage vertical du contenu entre shortcodes
- id: identifiant
- style: classes et styles inline pour bloc créé
- css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
- js-options: options non prévues par l'action
paramétres de l'animation
- delay = 5000: durée par image
- transition = fade: random,blur,flash,negative,burn,slideLeft,slideRight,slideUp,slideDown,zoomIn,zoomOut,swirlLeft,swirlRight
- transitionDuration = 1000: durée transition
- animation: kenburns,kenburnsLeft,kenburnsUp,kenburnsDown,kenburnsUpLeft,kenburnsUpRight,kenburnsDownLeft,kenburnsDownRight,random
- animationDuration = auto: durée des animations
- timer = 1: affiche barre de progression
fond site :
{up bg-video=fichier video}
fond bloc :
{up bg-video=fichier video}
content{/up bg-video}
video
- bg_video: fichier video ou ID video Youtube.
- poster: fichier image affiché avant chargement vidéo
- mobile: image ou css si un appareil mobile est détecté
paramètres de la vidéo
- bg-position = 50% 50%: 50% 50% = position poster et video
- bg-ratio = 16/9: proportion de la video
- bg-overlay: calque superposé à l'image de fond (png, opacité, RGBA, CSS)
- bg-color: couleur de fond sous la vidéo lors chargement
transparence du contenu de la page
- page-selector: bloc sur contenu
- page-overlay: background de page-selector (png, opacité, RGBA, CSS)
options secondaires
- center: style et classe pour centrage vertical du contenu entre shortcodes
- filter: conditions. Voir doc action filter (v1.8)
- id: identifiant
- style: classes et style inline pour bloc créé
- class: classes pour bloc créé (deprecated)
- css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
gestion tarteaucitron
- height (h,hauteur) = 400px: hauteur d'une video Youtube ou Vimeo avec tarteaucitron
- rgpd = 1: 0 pour ne pas appliquer la règle pour le RGPD
{up box=model | title=title}
contenu HTML{/up box}
##title## ##title-link## ##subtitle## ##subtitle-link## ##title-subtitle## ##title-subtitle-link##
##link## ##target##
##image## ##image-link## ##image-css## ##image-css-xxx##
##action-link## ##action-text##
##content##
##head## & ##/head## : une balise DIV avec les attributs définis par head-class & head-style
##body## & ##/body##
- box: model [danger, info] ou prefset
- template (item-template) = ##head## ##title-link## ##subtitle## ##image## ##/head## ##content## ##action-link##: modèle
- multibox = 3-2-1: nombre de blocs sur la même ligne (desktop-tablet-mobile)
- multibox-class = fg-vspace-between-1: classe(s) pour le bloc externe
- multibox-style: style CSS pour le bloc externe
box
- id:
- class: classe(s) pour la box
- style: style inline pour la box
title
- title (titre): titre. Si vide et demandé : on prend le premier hx du contenu
- title-tag = h4: balise pour titre
- title-class: class user pour titre
- title-style: style inline pour titre
- title-link-class: class user pour titre avec lien
- title-link-style: style inline pour titre avec lien
subtitle
- subtitle: sous-titre
- subtitle-tag = h5: mise en forme du sous-titre
- subtitle-class: class user pour sous-titre
- subtitle-style: style inline pour sous-titre
- subtitle-link-class: class user pour sous-titre avec lien
- subtitle-link-style: style inline pour sous-titre avec lien
image
- image: image. Si vide et demandée : on prend la première image du contenu
- image-alt: texte alternatif pour l'image. Par défaut, le nom du fichier humanisé
- image-class: class user pour image
- image-style: style inline pour image
- image-link-class: class user pour image avec lien
- image-link-style: style inline pour image avec lien
action
- action: texte du bouton action
- action-tag = div: mise en forme du bouton action
- action-class: class user pour action
- action-style: style inline pour action
- action-link-class: class user pour action avec lien
- action-link-style: style inline pour action avec lien
link
- link: lien. . Si vide et demandé : on prend le premier lien sur title ou image
- link-target: _blank pour nouvelle fenêtre
header
- head-class: class pour le bloc entête. en général title, subtitle, image
- head-style: style pour le bloc entête
body
- body-class: class pour le bloc. en général content et action
- body-style: style pour le bloc. en général content et action
general
- css-head (base-css): style CSS inséré dans le HEAD
- align-vertical = fg-vspace-between-1: type de repartition verticale en multibox
syntaxe
{up cache-cleaner=com_modules}
// defaut : com_content- cache_cleaner = com_content: liste des dossiers du cache ou * pour tous (séparateur: point-virgule)
- folder-exclude: chemin relatif (à folder-cache) des dossiers à conserver (séparateur: point-virgule)
- folder-cache: dossier racine du cache. vide=celui défini dans la configuration Joomla
- file-mask = *.php: masque pour sélectionner les fichiers. *.* = tous, *.{php,html} = php et html
{up cell=x1-x2}
contenu avec 2 blocs enfants{/up cell}
syntaxe 2 :
{up cell=x1-x2}
contenu cell-1 {====}
contenu cell-2{/up cell}
x1-x2 sont les largeurs sur la base d'une grille de 12 colonnes
exemple cell=6-6 pour 2 colonnes égales.
On utilise les largeurs de la classe UP-width
- cell = 12: nombre de colonnes
- mobile: nombre de colonnes sur petit écran
- tablet: nombre de colonnes sur moyen écran
style des blocs enfants (colonnes)
- class-*: class pour tous les blocs colonnes. sinon voir class-1 à class-6
- style-*: style inline pour tous les blocs colonnes. sinon voir style-1 à style-6
style et options secondaires
- id: identifiant
- class: class bloc principal
- style: style inline bloc parent
- filter: conditions. Voir doc action filter (v1.8)
{up center=classe/style(s)}
contenu{/up center}
note: cette action reconnait les classes et les styles dans : bg-yellow;color:red
- center: classe(s) et style(s) pour le bloc interne (celui qui est centré)
- id: identifiant
- class: classe(s) pour bloc externe
- style: style inline pour bloc externe
- css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
{up chart=type_chart}
... data ...{/up chart}
- chart: type de chart : area, bar,bubble,column,combo,line,pie,scatter,SteppedArea
- separator: séparateur des valeurs dans la liste
mise en forme du graph
- area: valeur en % dans l'ordre : left, top, width, height. EX: 10,25,90,75
- maximized: affichage remplit le bloc
- height (h,hauteur): min-height bloc parent
- colors: liste des couleurs
titre du graph
- title (titre): titre du graphique
- title-position: in, out, none (defaut)
- title-style: color: 'blue', fontsize: '14px', bold:true (attention à la syntaxe)
légende du graph
- legend-position: in, none (defaut), top, bottom
- legend-style: ex: color:'blue',fontSize:14,bold:true
Paramètres spécifiques selon le type de graph
- vertical: horizontal par défaut ou vertical. Tous sauf bar et bubble
- bar-width: largeur des barres en %. Area, bubble, pie, scatter & stepped
- 3D: camembert en relief. Tous sauf pie
- donut: part du trou central. ex: 0.5 pour la moitié. uniquement pour pie
- isstacked: 0, true (absolute) ou relative. Tous sauf bubble, line, pie & scatter
- options: les autres options proposées par google.chart (remplacer {} par [] dans la chaine JSON )
style et options secondaires
- id: identifiant
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): style ajouté dans le HEAD de la page
{up chart-org}
liste UL / OL {/up chart-org}
- chart_org: aucun argument
- line-color: couleur liaisons entre bloc
- color-bg: couleur arrière-plan par défaut des blocs
- color-text: couleur par défaut des textes
- border: bordure (outline) par défaut des blocs. ex: 1px red solid
- radius: arrondi des blocs. border doit être none
style des blocs selon le niveau
- color-bg-*: couleur des blocs de niveau 1 à 6
- color-text-*: couleur des blocs de niveau 1 à 6
- border-*: bordure (outline) des blocs de niveau 1 à 6. ex: 1px red solid
style et options secondaires
- id: identifiant
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): style ajouté dans le HEAD de la page
{up clocks-gmt=ville | offset=décalage horaire}
- clocks_gmt: Nom de la ville (pour légende)
- label-style: style inline pour le nom ville
- digital-style: style inline pour horloge digitale
- date-style: style inline pour date
- base-js-params: règles JS définies par le webmaster (ajout dans init JS)
style général
- id: id genérée automatiquement par UP
- class: classe(s) ajoutées au bloc principal
- style: style inline ajouté au bloc principal
- css-head (base-css): autres règles CSS définies par le webmaster (ajout dans le head)
Paramétres Javascript pour l'horloge
- offset: GMT offset
- title (titre) = Greenwich, England: titre
- skin = 1: indice images (voir la démo)
- dst = 1: gestion heure d'été
- analog = 1: afficher horloge analogique
- digital = 1: afficher horloge digitale
- timeformat = HH:mm: format pour la date
- date: afficher la date
- dateformat = MM/DD/YYYY: format pour l'heure
- imgpath: chemin vers les images
{up color=UP-COLOR-NAME}
- color: nom UP de la couleur (français ou anglais) ou de la variable CSS (--red)
- default = #000: couleur retournée si nom couleur inexistant
- info: affiche la liste des couleurs avec leurs valeurs
{up corner=texte}
syntaxe 2 (bloc) :
{up corner=texte}
contenu du bloc{/up corner}
- corner: texte affiché dans le coin ou ruban
position, taille et style du corner
- position = top-left: angle sous la forme top-left ou tl
- width (l,largeur,w) = 100px: coté du carré
- height (h,hauteur) = 100px: coté du carré
- angle = 45: angle en valeur absolue
- shadow: ajoute une ombre 'orientée' au corner. La valeur indiquée est la force de l'ombre
- color = #ffffff: couleur du texte
- bgcolor = #ff0000: couleur de fond du coin
- style: styles CSS (non proposés ci-dessus) pour le coin
- class: idem style
si le corner est clicable
- url: lien
- target = _blank: ou _self pour ouvrir le site dans le même onglet
style du bloc si le shortcode a un contenu
- bloc-class: classe(s) pour bloc
- bloc-style: style inline pour bloc
style et options secondaire
- id: identifiant
- css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
- filter: chaine de conditions. Voir documentation filter
{up countdown=201801010000}
// délai jusqu'à une date{up countdown=120}
// compte à rebours en secondes{up countdown}
// affiche une horloge- countdown: date, nombre de secondes ou vide pour horloge
- align: left, center ou right
style et options secondaires
- id: identifiant
- class: classe
- style: style inline
- filter: condition d'éxécution
paramétres Javascript pour configuration du compteur
- callback: Fonction appelée à la fin du compte à rebours
- captionSize: fontsize legendes
- countdownAlertLimit = 10: alerte en seconde avant fin countdown
- displayCaptions: 1 = légendes affichées
- displayDays: nb chiffres affichés pour jours
- fontFamily = Verdana, sans-serif: Police pour chiffres
- fontSize = 28: Taille police en pixels pour chiffres
- lang = en: Défini automatiquement par UP
- seconds: Temps initial en secondes pour le compte à rebours
- start = 1: démarrer automatiquement la minuterie
- theme = white: style : white, black ou blue
{up countdown-simple=AAAAMMJJHHMM}
- countdown_simple: date cible ou délai si débute par +
- model: CSS de base pour la présentation (digital, rainbow)
- digit-view = YMDHMS: afficheurs. Mettre un X pour ne pas l'afficher. Pour les premiers non affichés, la valeur sera convertie et ajoutée au premier affiché
Textes ajoutés au compteur
- intro-text: texte avant les afficheurs
- close-text: texte après les afficheurs
- prefix: texte avant valeur
- suffix = lang[en=years,months,days,hours,minutes,seconds;fr=années,mois,jours,heures,minutes,secondes]: texte après valeur
- elapsed-text = lang[en=Too late;fr=Trop tard]: Texte ou bbcode affiché si délai écoulé
style des chiffres
- digit-class: classe(s) pour les chiffres
- zero: ajoute un zéro devant les heures, minutes et secondes
style et options secondaires
- id: identifiant
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
- filter: condition d'éxécution
{up counter=0,100}
- counter: min,max : valeurs de départ et de fin
- width (l,largeur,w): largeur minimal (par défaut en pixels)
- mono = 1: force la police en monospace
style et options secondaires
- id: identifiant
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
- filter: conditions. Voir doc action filter (v1.8)
paramétres Javascript pour configuration du compteur
- start: valeur de départ du compteur
- end = 100: valeur d'arrivée du compteur
- easing = swing: ou linear : effet
- duration = 1500: durée du décompte en millisecondes
- prefix: texte devant compteur. BBcode autorisé
- suffix: texte après compteur. BBcode autorisé
{up csv2def=emplacement-fichier}
// le contenu est lu dans un fichier2/
{up csv2def}
[=item=]definition
[=item1; "item;2"; ...=]
definition1
{===}
definition 2
{/up csv2def}
- csv2def: chemin vers fichier à afficher
- separator = ;: séparateur des colonnes (fichier uniquement)
- HTML: pour fichier (contenu CSV): 0=affiche le rendu, 1=affiche le code ou liste des tags conservés (strip_tags)
- model = stack: stack: empile par défaut. flex: sur 2 colonnes
Style du bloc liste de définition
- class: classe(s) pour la balise DL
- style: style inline pour la balise DL
Style des termes définis (DT)
- term-class: classe(s) pour le bloc des termes
- term-style: style pour le bloc des termes
- term-style-separator: style pour séparer les différents termes
Style des définitions (DD)
- def-class: classe(s) pour le bloc des definitions
- def-style: style pour le bloc des définitions
- def-style-separator: style pour séparer les différentes définitions
ne concerne que le mode FLEX
- flex-vgap = 10: espace vertical (px) entre les blocs dt/dd
- flex-hgap = 10: espace horizontal (px) entre les blocs dt et dd
- flex-term-width = 25: largeur en pourcentage de la colonne des termes
options secondaires
- id: identifiant
- css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
{up csv2list=emplacement-fichier}
// le contenu est lu dans un fichier2/
{up csv2list}
article 1;5€
article 2;25€
{/up csv2list}
Ressources : caractères unicode, caractères spéciaux et couleurs sures
- csv2list: chemin vers fichier à afficher
- separator = ;: séparateur des colonnes
- HTML = b,a,span,strong,i,em,u,mark,small,img,code: 0= aucun traitement, 1=affiche le code, ou liste des tags a garder (strip_tags)
- model = stack: nom de la classe modèle dans le fichier csv2list.css
Style des points de conduite
- leaders: points de conduite
- leaders-color: couleur points de conduite
style du bloc principal de la liste
- class: classe(s) pour la balise UL
- style: style inline pour la balise UL
- bgcolor: couleur de fond. #FFF par defaut
style des lignes de la liste
- col-style-*: style inline pour les nièmes balise SPAN
- list-style: code hexadecimal et couleur du caractère (bb,red ou 26BD,#F00)
Style de l'entête
- header: 0: pas de titre, 1: la première ligne du contenu sera le titre des colonnes
- header-class: classe(s) pour la première balise LI si titre
- header-style: style pour la première balise LI si titre
- header-bgcolor: couleur de fond du titre
Style du pied de liste
- footer: 0: pas de pied, 1: la dernière ligne du contenu sera le pied des colonnes
- footer-class: classe(s) pour la dernière balise LI si pied
- footer-style: style pour la dernière balise LI si pied
- footer-bgcolor: couleur de fond de la dernière ligne
style et options secondaires
- id: identifiant
- css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
{up csv2table=emplacement-fichier}
2/ le contenu est saisi entre les shortcodes
{up csv2table}
article 1;5€
"article 2";25€
{/up csv2table}
- csv2table: URL ou chemin et nom d'un fichier local
- separator = ;: séparateur des colonnes
- HTML: 0= aucun traitement, 1=affiche le code, ou liste des tags a garder (strip_tags)
- model: nom de la classe modèle dans le fichier csv2table.css : noborder, line, blue, green
style de la table
- class: classe(s) pour la table
- style: style inline pour la table
style des colonnes
- col-list: liste des colonnes utilisées. ex: 1,2,5 (v2.8)
- col: alignement et largeur des colonnes sous la forme x-D-C5-100 pour rien-droite-centre 5%-100% (voir doc)
- col-style-*: style inline pour tous les blocs colonnes. sinon voir style-1 à style-6
style des lignes
- color-contrast: couleur des lignes impaires. la couleur des lignes paires est à définir dans class ou style
Entête des colonnes
- header: 0: pas de titre, 1: premiere ligne contenu, titre des colonnes format CSV
- header-class: classe(s) pour la balise thead
- header-style: style pour la balise thead
Pied des colonnes
- footer: 0: pas de pied, 1: dernière ligne contenu, pied colonne
- footer-class: classe(s) pour la balise tfoot
- footer-style: style pour la balise tfoot
style et options secondaires
- id: identifiant
- css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
{up csv-info=chemin-fichier | col=x | line=x}
- csv_info: URL ou chemin et nom d'un fichier local
- separator = ;: séparateur des colonnes
- line = -1: Titre dans la 1ere colonne ou numéro de la ligne où se trouve l'information. un nombre négatif recherche à partir de la fin
- col = 1: Titre de la colonne dans la première ligne ou numero de colonne de l'information. Négatif à partir de la fin
- default = [b class="t-red"]###[/b]: valeur retournée si coordonnées cellule hors feuille
{up data2list=data_source}
emplacement et type des données
- data2list: URL vers data ou fichier
- datatype: pour forcer la détection du type de données (json, xml, csv)
- encoding: codage des caractères de la source. ex: ISO-8859-1
uniquement pour des données CSV ou XML
- csv-header = 1: 1 si la première ligne contient les titres des colonnes.
- csv-header-title: titres des colonnes séparées par csv-separator. Si défini, remplace les titres du fichier
- csv-separator = ;: caractère séparateur pour les colonnes
- xml-attributes: les champs dans la balise ouvrante sont dans un sous-tableau @attributes, Non par défaut
sélection des lignes
- lign-root: chemin vers la ligne racine. Exemple: trk/trkseg
- lign-select: indice(s) de(s) ligne(s) de données ou col1:val1;ou val2, colN:valN pour recherche contenu
- lign-filter: filtrage après lign-select sous la forme champ[=>,<=,==,<>]valeur OU field>
- lign-sort: tri des données sous la forme champ1:asc|desc, champ2:asc|desc, ...
- lign-max: nombre de lignes retournées
sélection des colonnes/champs
- col-include: liste des champs retournés (séparateur virgule)
- col-exclude: liste des champs non retournés (séparateur virgule)
template pour mise en forme
- template = ##LABEL##: ##VALUE##: modèle pour une ligne
- array-subtitle: contenu du premier niveau de la liste. vide=indice
mise en forme du contenu
- col-class: classes pour les champs (champ1:class1 class2,champ2:class)
- col-label: correspondance entre nom du champ et titre colonne (champ1:col1,champ2:col2, ...)
type des contenus
- col-type: date, url, image, boolean, string ou format pour fonction php: sprintf
- date-format = %e %B %Y: format pour les dates
- boolean-in = 1,0: valeurs dans fichier pour true,false,null
- boolean-out = lang[fr=oui,non,-;en=yes,no,n.a.]: texte en sortie pour les valeurs true,false,null
- url-target = _blank: Cible pour ouverture URL
- image-path: chemin vers une image dans les données
- image-max-size: coté du carré dans lequel elle sera inscrite. Exemple: 100px
si un champ est vide
- col-empty: contenu d'un champ si vide u égal à zéro. ex: colname:none, ...
- col-empty-invisible: 1 = ne pas afficher les labels des champs avec valeur vide
- no-data-html = en=no data for %s;fr=aucune donnée pour %s: contenu si aucune donnée disponible. BBcode admis.
habillage du bloc retourné
- id:
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): style ajouté dans le HEAD de la page
Gestion du cache interne
- cache-delay = 30: durée du cache en minutes. 0 pas de cache
{up data2table=data_source}
emplacement et type des données
- data2table: URL vers data ou fichier
- datatype: pour forcer la détection du type de données (json, xml)
- encoding: codage des caractères de la source : ISO-8859-1
uniquement pour les données CSV ou XML
- csv-header = 1: 0 ou 1 pour indiquer que la première ligne contient les titres de colonnes
- csv-header-title: liste des titres de colonnes séparés par csv-separator
- csv-separator = ;: caractère séparateur pour les colonnes
- xml-attributes: les champs dans la balise ouvrante sont dans un sous-tableau @attributes, Non par défaut: 0 /* [st-sel-lign] sélection des lignes *
sélection racine données et lignes
- lign-root: chemin de la clé racine. Exemple: trk/trkseg
- lign-select: indice du groupe de données ou champ:valeur pour recherche contenu
- lign-filter: filtrage après lign-select sous la forme champ[=>,<=,==,<>]valeur OU field>
- lign-sort: tri des données sous la forme champ1:asc|desc, champ2:asc|desc, ...
- lign-max: nombre de lignes retournées
sélection des colonnes/champs
- col-include: liste des champs (séparateur virgule) retournés
- col-exclude: liste des champs (séparateur virgule) non retournés
Mise en forme des colonnes
- col-list:
- col-class: classes pour les champs (champ1:class1 class2,champ2:class)
- col-label: correspondance entre nom du champ et titre colonne (champ1:col1,champ2:col2, ...)
type des contenus
- col-type: date, url, image, boolean, compact ou format pour fonction php: sprintf
- date-format = %e %B %Y: format pour les dates
- boolean-in = 1,0: valeurs dans fichier pour true,false,null
- boolean-out = lang[fr=oui,non,-;en=yes,no,n.a.]: texte en sortie pour les valeurs true,false,null
- url-target = _blank: Cible pour ouverture URL
- image-path: chemin vers une image dans les données
- image-max-size: coté du carré dans lequel elle sera inscrite. Exemple: 100px
si un champ est vide
- col-empty: contenu d'un champ si vide ou égal à zéro. ex: colname:none, ...
habillage du bloc retourné
- model: nom de la classe modèle dans le fichier data2table.css : noborder, line, blue, green
- id:
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): style ajouté dans le HEAD de la page
internal action cache
- cache-delay = 30: durée du cache en minutes. 0 pas de cache
{up data-info=data_source | template=##nom_champ##}
emplacement et type des données
- data_info: URL vers data ou fichier
- datatype: pour forcer la détection du type de données (json, xml, csv)
- encoding: codage des caractères de la source : ISO-8859-1
uniquement pour des données CSV ou XML
- csv-header = 1: 0 ou 1 pour indiquer que la première ligne contient les titres de colonnes
- csv-header-title: liste des titres de colonnes séparés par csv-separator
- csv-separator = ;: caractère séparateur pour les colonnes
- xml-attributes: les champs dans la balise ouvrante sont dans un sous-tableau @attributes, Non par défaut: 0 /* [st-sel-lign] sélection des lignes *
sélection des lignes
- lign-root: chemin de la clé racine. Exemple: trk/trkseg
- lign-select: indice du groupe de données ou champ:val1;val2 pour recherche champ=val1 ou val2
- lign-filter: filtrage après lign-select sous la forme champ[=>,<=,==,<>]valeur OU field>
- lign-sort: tri des données sous la forme champ1:asc|desc, champ2:asc|desc, ...
- lign-max: nombre de lignes retournées
template pour mise en forme
- template (item-template): modèle de mise en forme résultat
type des contenus
- col-type: date, url, image, boolean, compact ou format pour fonction php: sprintf
- date-format = %e %B %Y: format pour les dates
- boolean-in = 1,0: valeurs dans fichier pour true,false,null
- boolean-out = lang[fr=oui,non,-;en=yes,no,n.a.]: texte en sortie pour les valeurs true,false,null
- url-target = _blank: Cible pour ouverture URL
- image-path: chemin vers une image dans les données
- image-max-size: coté du carré dans lequel elle sera inscrite. Exemple: 100px
si un champ est vide
- col-empty: contenu d'un champ si vide u égal à zéro. ex: colname:none, ...
- no-data-html = en=no data for %s;fr=aucune donnée pour %s: contenu si aucune donnée disponible. BBcode admis.
habillage du bloc retourné
- id: identifiant
- tag: balise pour bloc principal
- class: classe(s) ou style inline pour bloc principal
- style: classe(s) ou style inline pour bloc principal
- css-head (base-css): style ajouté dans le HEAD de la page
cache interne
- cache-delay = 30: durée du cache en minutes. 0 pas de cache
syntaxe
{up action=option_principale}
- date: date reconnue par la fonction php : strtotime
- format = %A %e %B %Y: format. ex: %A %e %B %Y
- locale: le code pays (en_US) ou NULL=celui en cours
- timezone: fuseau horaire. Ex: Europe/Paris ou Atlantic/Reykjavik. vide=celui du serveur
- id: identifiant
- tag = span:
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): style ajouté dans le HEAD de la page
{up div=class_and_style}
content{/up div}
- div: classes et style (séparateur : point-virgule)
- id: si indiqué, l'attribut ID est ajouté à la balise SPAN
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): style ajouté dans le HEAD de la page
- xxx = yyy: couple attribut-valeur. ex: title=le titre, href=//google.fr
{up donation=compte_paypal}
- donation: Votre adresse e-mail PayPal enregistrée ou votre identifiant PayPal
- template (item-template) = ##title## [span style="white-space:nowrap;padding:6px;display:inline-block"]##amount## ##currency##[/span] ##button##: modèle mise en page
définition du titre (##title##)
- title (titre): texte pour ##title##. bbcode accepté
- title-tag: balise pour le titre (##title##) span par défaut si title-style
- title-style: classes et styles pour le titre
définition du texte d'accompagnement (##text##)
- text: texte bbcode pour motclé ##text##
- text-tag: balise pour le titre (##text##) span par défaut si text-style
- text-style: classes et styles pour texte d'accompagnement
définition du bouton (##button##)
- button = lang[en=Donate;fr=Faire un don]: texte ou image Paypal pour ##button##
- button-style = b;t-grisFonce;background:#FFC439;border:#ECB300 1px outset;border-radius:50px;cursor:pointer: classes et styles pour bouton (##button##)
définition du montant et de la devise (##amount## & ##currency##)
- amount = 10: Montant du don. Inutile si ##amount##
- currency-code = EUR: Devise. Inutile si ##currency##
- currency-list = EUR,USD,GBP,CHF,AUD,HKD,CAD,JPY,NZD,SGD,SEK,DKK,PLN,NOK,HUF,CZK,ILS,MXN: liste des devises acceptées. 1ère par défaut
- amount-style: classes et styles pour montant (##amount##)
- currency-style: classes et styles pour choix devises (##currency##)
Données transmises et utilisées par le site de Paypal
- item-name = Donation: La raison de vos dons. Sera imprimé sur la confirmation PayPal
- image-url: URL du logo de de votre organisme affiché sur la confirmation d Paypal
- url-valid = http:: ', // Chemin complet vers la page de retour après un paiement correct
- url-cancel = http:: ', // Chemin complet vers la page de retour après un échec de paiement
- use-sandbox: pour tester la donation
style et options secondaires
- id: id pour bloc externe
- class = tc: classe(s) pour bloc externe
- style: style inline pour bloc externe
- css-head (base-css): style ajouté dans le HEAD de la page
{up facebook=facebook id}
voir https://developers.facebook.com/docs/plugins/page-plugin
- facebook_timeline: ID facebook. Voir https://findmyfbid.com
- tabs = timeline: Onglets à afficher, par exemple : timeline, events, messages
- width (l,largeur,w) = 200: La largeur du plugin en pixels. Valeur mini = 180, maxi = 500
- height (h,hauteur) = 500: La hauteur du plugin en pixels. valeur mini = 70.
- adaptwidth = 1: Essayer d’adapter la largeur au conteneur.
- facepile = 1: Affiche les photos de profils quand des amis aiment le contenu.
- hidecover: Masque la photo de couverture dans l’en-tête
- smallheader: Utiliser un en-tête réduit
style et options secondaires
- id: identifiant
- class: classe bloc parent
- style: style inline bloc parent
{up faq}
-- titre en H4
-- contenu HTML
{/up faq}
*- faq: aucun argument nécessaire
Définition des titres des onglets
- title-tag = h4: pour utiliser une autre balise pour les titres
- title-tag-preserve: 1 pour conserver 'title-tag' au lieu de div
- title-class: classe et/ou style inline pour le titre (onglet)
- title-style: classe et/ou style inline pour le titre
Définition des panneaux
- content-class: classe et/ou style inline pour le contenu
- content-style: classe et/ou style inline pour le contenu
style et options secondaires
- id: identifiant
- css-head (base-css): style ajouté dans le HEAD
Divers
- filter: conditions. Voir doc action filter
{up field=id_or_name_field}
// contenu brut du champ{up field=id_or_name_field | model=value}
// contenu mis en forme du champ{up field=id_or_name_field | model=label : [b]%id_or_name_field%[/b]}
// modèle avec BBCODE- field: id ou name du champ
- model: modèle BBCODE avec id ou nom des champs entre signes %
- separator: sépare les éléments d'un tableau pour rawvalue
- tag: balise pour bloc principal
style et options secondaires
- id: identifiant
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): style ajouté dans le HEAD de la page
Le fichier peut etre affiché (si prise en charge par navigateur client)
ou le téléchargement peut-etre forcé avec changement de nom optionnel
Une icône représentative est affichée devant le lien
syntaxe :
{up file=nomfichier.ext | download | icon |target }
texte du lien
{/up file}
- file: chemin et nom du fichier à télécharger
- download: vide ou nom du fichier récupéré par le client
- icon = 32: chemin et nom de l'icone devant le lien ou taille de l'icone selon extension du fichier (16 ou 32)
- target: argument ou _blank si option sans argument
- rel: nofollow, noreferrer, ...
style et options secondaires
- id: Identifiant
- class: classe(s) pour la balise a
- style: style inline pour la balise a
{up file-download=dossier ou fichier}
syntaxe 2
{up file-download=dossier ou fichier}
##icon## ##filename-link##{/up file-download}
présentation des liens :
##link## ##/link## ##filename-link## ##filename## ##icon## ##icon-link##
##hit## ##lastdownload##
##info## ##size## ##date##
- file_download: fichier ou dossier
- file-mask: pour sélectionner les fichiers d'un dossier. ex: fic-*
- file-max: nombre maximal de fichiers retournés
- extensions = zip, pdf,txt,md,png,jpg,gif,svg,doc,docx,xls,xlsx,odt,ods: extensions autorisées
- sort-by-date: 1 pour tri selon date des fichiers.
- sort-order = desc: desc ou asc = ordre affichage
- password: mot de passe pour télécharger le fichier
- template (item-template) = ##icon## ##filename-link## (##size## - ##date##) [small]##hit## ##lastdownload##[/small] [br]##info##: modèle de mise en page. keywords + bbcode
Définition du type de liste
- main-tag (block) = ul: balise pour la liste des fichiers
- main-style: style pour la liste des fichiers
- main-class = list-none: classes pour la liste des fichiers
Définition d'une ligne pour un fichier
- item-tag = li: balise pour un bloc fichier
- item-style: style pour un bloc fichier
- item-class: classes pour un bloc fichier
- link-style: style pour le lien (classes admises)
- icon = 32: chemin et nom de l'icône devant le lien ou taille de l'icône selon extension du fichier (16 ou 32)
format pour les mots-clés
- format-date = lang[en=m/d/Y H:i;fr=d/m/Y H:i]: 'd/m/Y H:i' format pour la date
- model-hit = téléchargé %s fois: présentation pour ##hit##
- model-lastdownload = dernier téléchargement le %s: présentation pour ##lastdownload##
- model-info = %s: présentation pour ##info##
style et options secondaires
- id: identifiant
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
- filter: condition pour exécuter l'action
{up file-explorer=folder_relative_path_on_server}
##file## : chemin/nom.extension - pour copier/coller comme argument shortcode
##dirname## : chemin (sans slash final)
##basename## : nom et extension
##filename## : nom sans extension (sans le point)
##extension## : extension
##relpath## : chemin relatif au chemin passé comme principal argument
##size## : taille du fichier
##date## : date dernière modification
##icon## : icone ou vignette du fichier
##download## : bouton pour télécharger
##view-btn## : bouton pour voir le fichier dans une fenêtre modale
##view## & ##/view## : balise a (ouvrante et fermante) avec attributs pour voir le fichier dans une fenêtre modale
Motclé disponible pour le dossier en format liste (ul/li)
##foldername## : nom du dossier (sans l'arboresccence)
##folderpath## : chemin et nom du dossier (avec l'arboresccence)
- file_explorer: chemin relatif du dossier sur le serveur
- mask: masque de sélection des fichiers
- file-exclude: fichiers non listés. (separateur=virgule)
- folder-recursive: niveaux d'exploration des sous-dossiers
- view-root: si main-tag=ul, affiche t'on la racine
- view-unknow-ext: 1: affiche tous les fichiers, 0: seules les extensions connues
type de contenu des fichiers. +ext1,ext2 : pour ajouter
- ext-none: liste des extensions sans préview, ni téléchargement
- ext-download-only: fichiers non visualisables, téléchargement uniquement. défaut: zip,rar
- ext-image: les fichiers images. défaut: jpg,png,webp,gif
- ext-pdf: les fichiers pdf. défaut: pdf
- ext-office: les fichiers bureautiques. défaut: doc,docx,odt,xls,xlsx,ods,pps,ppsx,pptx
- ext-audio: les fichiers audios. défaut: mp3,ogg
- ext-video: les fichiers vidéos. défaut: mp4,ogv
- ext-ajax: fichiers gérés en ajax. défaut: txt,csv,html,url
- ext-iframe: fichiers gérés comme iframe. défaut : aucun
Modèle de mise en forme
- template (item-template) = ##icon## ##basename## ##view-btn## ##download##: modèle de mise en forme du résultat
- template-folder = [b]##foldername##[/b]: modèle de mise en forme pour les dossier en vue liste
Balises pour les blocs parents et enfants
- main-tag (block) = ul: balise principale. indispensable pour utiliser id, class et style
- item-tag = li: balise pour un fichier ou dossier. DIV si main-tag différent de UL
Format des éléments mot-clé
- date-format = %Y/%m/%d %H:%M: format de la date
- size-decimal: nombre de décimales pour la taille du fichier
- icon-thumbnail = 1: pour les images, on affiche une vignette
- icon-size = 32: 16, 32 ou 48: taille de l'icone ou vignette
- icon-path: le chemin vers vos fichiers icônes. ce dossier doit contenir 3 sous-dossiers 16,32 et 48
configuration bouton télécharger
- download-label = 📥: texte ou bbcode pour le bouton télécharger
- download-style: classes et/ou styles du bouton pour télécharger
configuration bouton voir
- view-label = 👁: texte du bouton pour voir le fichier
- view-style: classes et/ou styles du bouton ou du lien pour voir le fichier
Styles CSS
- js-params: règles JS définies par le webmaster
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): style ajouté dans le HEAD de la page
- id: Identifiant
{up file-in-content=fichier ou dossier}
Mots-clés
##title## : le nom du fichier txt
##content## : le contenu du fichier txt
##image## : fichier image de même nom que le fichier texte
##date## : la date du fichier
- file_in_content: chemin et nom du fichier
- file-mask: pour sélectionner les fichiers d'un dossier sur le serveur. ex: fic-*
- maxi: nombre maxima de fichier (selon sort-order).
- sort-order = desc: sens du tri. asc ou desc. Tri selon date
- msg-no-file = en=no file;fr=aucun fichier: message si aucun fichier PDF dans le dossier
- template (item-template) = [h2]##title##[/h2][div]##image####content##[/div]: modèle pour affichage
balise et style du bloc contenant les différents fichiers
- main-tag (block) = div: balise pour le bloc externe (si main-tag<>0)
- main-style: idem class & style
balise et style du bloc d'un fichier
- item-tag = div: balise pour le bloc d'un fichier (si item-tag<>0)
- item-style: style et classe pour le bloc d'un fichier
Définition pour ##image##
- image-style: style et classe pour l'image
- image-popup: 1 pour afficher en grand dans fenêtre modale
- image-extension = jpg,JPG,jpeg,JPEG,png,PNG: liste des extensions acceptées
Formattage
- HTML: 0= aucun traitement, 1=affiche le code, ou liste des tags à garder (ex: img,a)
- EOL: forcer un retour à la ligne
- format-date = lang[en=m/d/Y H:i;fr=d/m/Y H:i]: format pour la date. ex: 'd/m/Y H:i'
style et options secondaires
- id: identifiant
- class: classe(s) pour bloc (si main-tag<>0)
- style: idem class
- css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
{up file_office_view=nom_fichier}
- file_office_view: nom du fichier
- mode = office-embed: ou office-view, google-docs, google-drive
- width (l,largeur,w) = 100%: largeur du bloc conteneur
- height (h,hauteur) = 50vh: hauteur du bloc conteneur
style et options secondaires
- id: identifiant
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): style ajouté dans le HEAD de la page
{up file-view=chemin fichier}
Utilisation :
- charger du contenu récurrent à plusieurs pages
- voir un fichier CSV
- voir le code HTML
- file_view: chemin et nom du fichier
Style du bloc
- main-tag (block) = div: balise principale. 0 pour aucune
- class: classe(s) pour bloc
- style: style inline pour bloc
Mise en forme du fichier
- HTML: 0= aucun traitement, 1=affiche le code, ou liste des tags à garder (ex: img,a)
- EOL: forcer un retour à la ligne
style et options secondaires
- id: identifiant
- css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
SYNTAXE 1 (condition comme option):
{up filter | datemax=20171225}
contenu si vrai {====}
contenu si faux {/up filter}
Le contenu si faux est optionnel. Il doit être après le contenu si vrai et séparé par
{===}
(au minima 3 signes égal)SYNTAXE 2 (condition comme argument principal):
{up filter=datemax:20171225}
contenu si vrai {====}
contenu si faux {/up filter}
SYNTAXE 3 (mono-shortcode):
{up filter | guest=0 | return-true=REGISTER | return-false=GUEST}
--> guest=0 est vrai si un utilisateur est connecté
--> la valeur retournée est saisie comme option
SYNTAXE 4 (multi-conditions et négation):
{up filter=!day:1,7 ; hperiod:0900-1200,1500-1900 | return-true=OUVERT | return-false=FERME}
--> vrai si pas lundi ou dimanche et entre 9-12h ou 15-19h
- filter: condition sous la forme cond1:val1,val2 ; cond2:val1,val2
Les conditions
- datemax: vrai jusqu'à cette date AAAAMMJJHHMM
- datemin: vrai à partir de cette date AAAAMMJJHHMM
- period: vrai entre ces dates AAAAMMJJHHMM-AAAAMMJJHHMM
- day: liste des jours autorisés. 1=lundi, 7=dimanche
- month: liste des mois autorisés. 1=janvier, ...
- hmax: vrai jusqu'à cette heure HHMM
- hmin: vrai à partir de cette heure HHMM
- hperiod: vrai entre ces heures HHMM-HHMM
- guest: vrai si utilisateur invité
- admin: vrai si admin connecté
- user: liste des userid autorisé. ex: 700,790
- username: liste des username autorisé. ex: admin,lomart
- group: liste des usergroup autorisé. ex: 8,12
- lang: liste des langues autorisées. ex: fr,ca
- mobile: vrai si affiché sur un mobile
- homepage: vrai si affiché sur la page d'accueil
- server-host: vrai si le domaine du serveur contient un des termes de la liste
- server-ip: vrai si l'adresse IP du serveur des dans la liste
- artid: vrai si l'ID de l'article courant est dans la liste
- catid: vrai si l'ID de la catégorie de l'article courant est dans la liste
- menuid: vrai si l'ID du menu actif est dans la liste
- equal: vrai si op1 = op2 no case sensitive
- smaller: vrai si op1 > op2 no case sensitive
- bigger: vrai si op1 < op2 no case sensitive
retour pour version mono-shortcode
- return-true = 1: valeur retournée si vrai et pas de contenu
- return-false: valeur retournée si faux et pas de contenu
Divers
- info: affiche les valeurs actuelles des arguments pour les conditions
- id: identifiant
{up flexauto=x_ordi | tablet=x_tablet | mobile=x_mobile }
contenu{/up flexauto}
syntaxe 2 :
{up flexauto=x_ordi-x_tablet-x_mobile }
contenu{/up flexauto}
x=1 à 12 est le nombre de colonnes sur grand écran et tablette. 4 sur mobile.
- flexauto = 3: nombre de colonnes sur grand écran ou ordi-tablet-mobile
- tablet = 2: nombre de colonnes sur moyen écran
- mobile = 1: nombre de colonnes sur petit écran
Style bloc principal
- id: identifiant
- class: class ou style pour le bloc principal
- style: class ou style pour le bloc principal
Style des blocs secondaires
- bloc-tag = 1: uniquement si {===} 0=pas de bloc
- class-*: class pour tous les blocs colonnes. sinon voir class-1 à class-12
- style-*: style inline pour tous les blocs colonnes. sinon voir style-1 à style-12
- bloc-style: style inline UNIQUEMENT ajoutés au bloc enfant
Style ajouté dans le head de la page
- css-head (base-css): style ajouté dans le HEAD de la page
{up flexbox=x1-x2}
contenu avec plusieurs blocs enfants{/up flexbox}
syntaxe 2 :
{up flexbox=x1-x2}
contenu bloc-1 {====}
contenu bloc-2{/up flexbox}
x1-x2 sont les largeurs relatives des colonnes
exemple : flexbox=4-8 ou flexbox=33-66 pour 2 colonnes (équivalent: span4 et span8)
Note : les options class-1 à class-6 et style-1 à style-6 sont à saisir directement dans le shortcode
- flexbox: nombre de colonnes ou prefset sous la forme x-x-x-x
- tablet: nombre de colonnes sur moyen écran sous la forme x-x-x-x
- mobile: nombre de colonnes sur petit écran sous la forme x-x-x-x
Style bloc principal
- id: identifiant du bloc principal
- class: class ou style pour le bloc principal
- style: class ou style pour le bloc principal
Style des blocs secondaires
- bloc-tag = 1: ajoute un bloc DIV autour des contenus enyre {===}
- class-*: class pour tous les blocs colonnes. sinon voir class-1 à class-6
- style-*: style inline pour tous les blocs colonnes. sinon voir style-1 à style-6
- bloc-style: style inline UNIQUEMENT ajoutés au bloc enfant
Style ajouté dans le head de la page
- css-head (base-css): style ajouté dans le HEAD de la page
{up folder_list=folder_relative_path_on_server | template=##file## (##size)}
0##file## : chemin/nom.extension - pour copier/coller comme argument shortcode
##dirname## : chemin (sans slash final)
##basename## : nom et extension
##filename## : nom sans extension (sans le point)
##extension## : extension
##relpath## : chemin relatif au chemin passé comme principal argument
##size## : taille du fichier
##date## : date dernière modification
Motclé disponible pour le dossier en format liste (ul/li)
##foldername## : nom du dossier (sans l'arboresccence)
##folderpath## : chemin et nom du dossier (avec l'arboresccence)
- folder_list: chemin relatif du dossier sur le serveur
- mask: masque de sélection des fichiers
- recursive: niveaux d'exploration des sous-dossiers
Modèle de mise en forme
- template (item-template) = ##file##: modèle de mise en forme du résultat
- template-folder = [b]##foldername##[/b]: modèle de mise en forme pour les dossier en vue liste
Balises pour les blocs parents et enfants
- main-tag (block): balise principale. indispensable pour utiliser id, class et style
- item-tag = p: balise pour un fichier ou dossier
Format des éléments mot-clé
- date-format = %Y/%m/%d %H:%M: format de la date
- decimal = 2: nombre de décimales pour la taille du fichier
Styles CSS
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): style ajouté dans le HEAD de la page
- id: Identifiant
{up form-select=action_onchange}
liste options CSV (label;value){/up form-select}
- form_select = url: mot-clé (url, url-blank) ou argument pour onchange ou prefset
- file: fichier CSV pour contenu
- separator = ;: séparateur colonnes du fichier CSV
- size = 1: nombre de lignes affichées (6) ou hauteur de la liste (ex: 50vh).
- no-content-html = en=content not found : %s;fr=contenu non trouvé : %s: message erreur. %s:nom fichier
Label avant le select
- label: texte ajouté au dessus de la liste
- label-style: classes et style inline pour le label
bouton après le select
- btn (bouton): texte du bouton pour valider le choix dans la liste. active raccourci: enter et double-clic sur liste
- btn-style: classes et style inline pour le bouton
Styles CSS
- id: Identifiant
- style: classes et styles
- css-head (base-css): style ajouté dans le HEAD de la page
- filter: conditions. Voir doc action filter
{up gmap=1 rue de la paix, Paris}
IMPORTANT: il faut saisir son APIKey dans les paramétres du plugin sous la forme: gmap-key=apikey
- gmap (googlemap): adresse postale
- width (l,largeur,w) = 100%: largeur de la carte
- height (h,hauteur) = 300px: hauteur de la carte
Gestion RGPD (tarteaucitron)
- rgpd = 1: 0 pour ne pas appliquer la règle pour le RGPD
Styles CSS
- class: classe
- style: style-inline
- id: identifiant
{up googlefont=nompolice}
contenu {/up googlefont}
{up googlefont=nompolice | class=foo}
< p class="foo">...< p>- googlefont: nom police
- size: ajout font-size et line-height
- family: famille de substitution (cursive, fantasy)
Divers
- tag = span: balise HTML pour entourer le contenu
- className: nom de la classe pour utiliser la police ailleurs dans la page
Style
- id: identifiant
- css-head (base-css): complément de css: color, font-size, ....
{up gotop}
- gotop: texte ou caractère unicode pour la flèche. ex \25b2, \21ea ou top
- circle-bgcolor: couleur de fond du cercle
- circle-color: couleur de la bordure du cercle
- circle-color-active: couleur de la bordure pour la partie activé
- icon-color: couleur pour l'icone ou le texte
- icon-color-hover: couleur pour l'icone ou le texte lors du survol
Divers
- id: identifiant
- css-head (base-css): style ajouté dans le HEAD de la page
{up hr=nom_class_modele}
syntaxe 2 :
{up hr=nom_prefset}
syntaxe 3 :
{up hr=1px, solid, #F00, 50%}
- hr: nom icône, code unicode, chemin image ou nom dans prefs.ini + color, size
la ligne de séparation
- hr-border-top = 3px double #666: style du trait supérieur
- hr-border-bottom: style du trait inférieur
- hr-width = 100%: largeur du trait
- hr-height: hauteur pour bg
- hr-bg: argument pour background : couleur, dégradé, image
- hr-align = center: position de la ligne : left, center, right
- hr-style: style inline pour la ligne
- hr-class: classe pour la ligne
texte ou image sur la ligne
- icon: icon. admet raccourci icon, size, color
- icon-text: texte en remplacement ou après l'icone
- icon-size = 24px: taille icone en px, rem (px par defaut) - coté du carré dans lequel est inscrit l'image
- icon-color: couleur pour icon et texte
- icon-bg = #ffffff: couleur de fond
- icon-space = 4px: espace entre icon et trait
- icon-h-offset: décalage horizontal en px ou rem négatif pour aller vers la gauche
- icon-v-offset: décalage vertical dans la même unité que icon-size. Par défaut moitié de icon-size
- icon-style: style inline pour l'icône ou le texte
Divers
- fontname = icomoon: pour icomoon ou FontAwesome ou autres (a mettre dans pref.ini)
- id: identifiant
{up html=div | class=foo | id=x123}
contenu{/up html}
--> < div id="x123" class="foo">contenu< /div>
Syntaxe 2 :
{up html=img | class=foo;border:1px red solid | src=images/img.jpg}
--> < img class="foo" style="1px red solid" src="/images/img.jpg" >
note: toutes les options sont considérées comme des attributs de la balise
Syntaxe 3 :
{up html=h1.foo.xx}
équivaut à {up html=h1 | class=foo xx}
- html = div: balise html
- id: ID spécifique
- class: classe(s)
- style: style inline
- xxx = yyy: couple attribut-valeur. ex: title=le titre, href=//google.fr
{up icon=nom_icone}
syntaxe 2 :
{up icon=Ux1F7A7}
syntaxe 3 :
{up icon=images/icone.png}
syntaxe 4 :
{up icon=Ux1F7A7,#F00,2rem}
Important : indiquer dans prefs.ini le préfixe pour la police d'icones installée sur le site
- icon: jeu d'options ou src,color,size
- src: nom icône, code unicode, chemin image (indispensable si prefset)
- size: taille icône ou coté du carré dans lequel est inscrit l'image. px, rem, em, % (px par defaut). Responsive= basesize, breakpoint1:size1, breakpointN:sizeN
- color: couleur
- color-hover: couleur lors survol icône (sauf image et unicode coloré)
Pour ajouter l'icône à un bloc sur la page
- selector: selecteur CSS pour identifier le bloc ciblé
Divers
- info: 1 affiche la liste des icônes définies dans prefs.ini comme un message debug, 2 la retourne pour affichage à la place du shortcode
- title (titre): texte affiché au survol de l'icone
- prefix = icon-: pour icomoon ou 'fa fa-' pour font-awesome (a mettre dans pref.ini)
- fontname = icomoon: pour icomoon ou FontAwesome ou autres (a mettre dans pref.ini)
Style CSS
- style: style inline
- class: classe
- id: identificateur
{up iframe=URL}
- iframe: URL site distant
- preview: image affichée avant chargement de l'iframe
paramétre de l'iframe
- allowfullscreen = allowfullscreen: autorise le plein ecran
- scrolling = no: affiche les ascenseurs si nécessaire
- ratio = 16:9: sous forme largeur:hauteur ou ratio 0.5625 ou pourcentage 56.25%
- height (h,hauteur): hauteur (utile pour mobile)
Style CSS
- id: identifiant
- class: classe(s) pour bloc externe
- style: style inline pour bloc externe
- css-head (base-css): style ajouté dans le HEAD de la page
Interne, conservé pour compatibilité
- iframe-class: classe(s) pour bloc
- iframe-style: style inline pour bloc
{up imagecompare}
< img src="/avant.jpg" >
< img src="/apres.jpg" >
{/up imagecompare}
- image_compare: aucun argument nécessaire
Style CSS
- id: Identifiant
- class: classe(s) pour le bloc
- style: style inline pour le bloc
paramètres Javascript pour la configuration
- initVisibleRatio = 0.2: position initiale
- interactionMode = drag: mode: drag, mousemove, click
- addSeparator = 1: ajoute séparateur (ligne verticale)
- addDragHandle = 1: ajoute poignée sur séparateur
- animationDuration = 450: durée animation en ms
- animationEasing = linear: animation: linear, swing
- precision = 2: précision rapport, nb decimales
syntaxe 1
{up image-gallery=chemin_image | alt=texte}
syntaxe 2
{up image-gallery=chemin_dossier}
syntaxe 3
{up image-gallery}
contenu avec des images{/up image-gallery}
- image_gallery: fichier image, dossier pour galerie ou largeurs des images contenues
- layout = masonry-3-2-1: layout pour galerie : grid-x-x-x, none-x-x-x, shuffle-x-x-x
- grid-ratio: pour layout grid, rapport hauteur/largeur. 1:carré, 0.7:horizontal, 1.4:vertical
- nb-img: nombre de vignettes affiché pour la galerie d'un dossier, 0 = toutes
- gallery = 1: affiche la galerie dans une lightbox. Saisie obligée pour faire une galerie des images du contenu
- random: tri aléatoire des images pour gallerie depuis un dossier
- sort-desc: tri alphanumérique descendant
configuration de la legende (type et style)
- legend: label pour image unique
- legend-type = 2: 0:aucune, 1:hover-top, 2:hover-bottom, 3:sous l'image
- legend-class: classe(s) pour la légende vignette
- legend-style: style pour la légende vignette
- legend-template: modèle pour légende séparée par 3 tirets. ex: [span style=""]##1##[/span][span style=""]##after@##[/span]
pour proposer le téléchargement haute-définition de l'image
- download-label: texte ajouté à la légende . Ex: lang[en=Download; fr=Télécharger] ou 📥
- download-title: texte de la bulle d'aide
- download-style: classe ou style pour le lien de téléchargement. Ex: color:#FFF;bg-white
style des images
- img-class: classe(s) pour bloc figure avec image et legende
- img-style: style inline pour bloc avec image et legende
style du bloc principal
- id: identifiant
- class: classe(s) pour bloc principal
- style: style inline pour bloc principal
- css-head (base-css): style CSS inséré dans le HEAD
options pour layout=masonry uniquement (recherche et classement par sous-dossiers)
- search: afficher un champ de recherche
- shuffle-reverse: inverser l'ordre d'affichage des sous-dossiers
mode chargement progressif (layout=masonry uniquement)
- infinite-scroll: 0 ou le nombre d'images affichées pour activer infinite scroll
gestion responsive. paramétres des images adaptées (srcset)
- img-sizes: largeur image en pourcentage de wmax-page en mode desktop, tablette et mobile. 100,100,100 par défaut
- wmin-image = 250: largeur mini de l'image pour prise en charge
- wmax-page = 1200: largeur maxi du conteneur contenu de la page
- wmax-lightbox = 1200: largeur image dans lightbox
- wmax-lightbox-mobile = 768: largeur image dans lightboox sur mobile ou 0 pour désactiver. Multiplié par pixel-ratio
- pixel-ratio: facteur DPR. ex: 0:sans, vide, 1 ou 2: 2, 3:3
- quality = 70: taux compression jpeg
- similarity = 80: taux minimal. Si la largeur entre 2 images alternatives est inférieure a 80%, la plus petite n'est pas cree
- bp-tablet = 768: point de rupture tablette
- bp-mobile = 480: point de rupture smartphone
gestion du dossier de stockage des variantes de tailles pour les images (a mettre dans custom/prefset.ini)
- srcset-dir: par défaut, dans le dossier de l'image. 'tmp/subdir' = non sauvegardé par Akeeba-backup
- srcset-raz: 1 pour supprimer tous les sous-dossiers srcset du dossier passé comme option principale
{up image-hover=images/image.jpg | effect=xx}
-- contenu HTML affiché au survol
{/up image-hover}
Voir la démo pour les numéros des effets
- image_hover: nom de l'image
- effect = 11: nom de l'effet à trouver sur le site démo
Style CSS pour le bloc externe
- id: identifiant
- class: classe
- style: style inline
Style CSS pour l'image
- img-class: classe pour image
- img-style: style inline pour image
Style CSS pour le contenu HTML
- text-class: classe pour bloc texte lors survol
- text-style: style inline pour bloc texte lors survol
Divers
- css-head (base-css): code css pour le head. ATTENTION [] au lieu de {}
{up image-logo=prefset,image_logo ou texte}
image{/up image-logo}
- image_logo: prefset,image_logo ou texte
- pos = right,bottom: position horizontale (left, gauche, right, droite, center, centre), verticale (top, haut, bottom, bas, center, centre)
- width (l,largeur,w): largeur logo en px, rem, %. % par défaut
Style pour le logo
- id: identifiant
- class: classe(s) pour bloc
- style: style inline pour bloc
Style pour le bloc externe
- main-class: classe(s) pour le bloc du contenu
- main-style: style inline pour le bloc du contenu
Divers
- css-head (base-css): style ajouté dans le HEAD de la page
{up image-magnify=petite image | imgzoom=grande image pour zoom}
syntaxe 2
{up image-magnify=image pour vignette et zoom}
- image_magnify: fichier image normale
- imgzoom: fichier image utilisé pour le zoom. si vide: image principale
Paramètres de la loupe
- size: diamètre de la loupe en pixel
- radius: taille de l'arrondi de la loupe en pixel
- border: modele de bordure pour la loupe. fin ou vide
Style CSS
- class: classe(s) ajoutées au bloc principal
- style: style inline ajouté au bloc principal
- id: id genérée automatiquement par UP
{up image_pannellum=chemin_image_equirectangular}
*
*- image_pannellum: chemin de l'image
- height (h,hauteur) = 400px: hauteur en px ou vh
- width (l,largeur,w) = 100%: largeur en px ou %
- fullscreen: 1 pour autoriser la vue plein écran
- language: liste motclé (bylineLabel,loadButtonLabel,loadingLabel) + traduction. Exemple:bylineLabel:lang[en=by %s;fr:par %s], loadingLabel:Loading...
- options: liste des options supplémentaires . ex: showZoomCtrl:true,compass:true - Attention au min/maj. voir cette page
Style CSS
- id: id genérée automatiquement par UP
- class: classe(s) ajoutées au bloc principal
- style: style inline ajouté au bloc principal
- css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
paramètres Javascript pour configuration
- panorama: chemin image (il est rempli automatiquement avec l'argument principal du shortcode)
- preview: chemin image preview
- type = equirectangular: type de l'image
- title (titre): titre. pseudo BBCode et traduction acceptes
- author: auteur. pseudo BBCode et traduction acceptes
- authorURL: lien vers site auteur
- autoLoad: chargement auto de l'image
- autoRotate: rotation nombre de degrés par seconde
- showControls = 1: 0 pour masquer tous les boutons
- showZoomCtrl = 1: 0 pour masquer les boutons +/- du zoom
- showFullscreenCtrl = 1: 0 pour masquer le bouton plein écran
- hotSpotDebug: 1 pour afficher les coordonnées hotspot dans la console
syntaxe 1 :
{up image-random=folder}
syntaxe 2 :
{up image-random}
image 1{===}
image 2 avec lien{/up image-random}
syntaxe 3 :
{up image-random}
content 1{===}
content 2{/up image-random}
- image_random: dossier des images
- path-only: retourne uniquement le chemin de l'image pour utilisation par une autre action.
Style CSS
- id: Identifiant
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): style ajouté dans le HEAD de la page
{up image-rollover=image_base | hover=image_survol}
- image_rollover: image repos
- hover: image au survol
- click: image lors clic
Style CSS
- id: identifiant
- class: classe(s) pour bloc
- style: style inline pour bloc
{up image-secure=chemin_image}
- image_secure: chemin relatif vers image jpg ou png
- folder-source = images: dossier racine des images originales
- folder-strip = images/image-secure: dossier avec les images fractionnées
- nb-strip = 5: nombre de bandes
- alt: texte alternatif pour image. Si vide: nom du fichier humanisé
- quality = 80: pourcentage qualité en JPG
- reset: force la génération des images strip
- delete-source: supprime l'image source après génération des strips
Style CSS
- id: identifiant
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): style ajouté dans le HEAD de la page
{up imagemap=chemin_image}
< area target="" alt="" title="" href="/" coords="" shape="">;
OU pour prévenir l'effacement par editeur (remplacer les <> par [])
[area target="" alt="" title="" href="/" coords="" shape=""];
{/up imagemap}
utiliser un générateur en ligne pour définir les zones : www.image-map.net
- imagemap: le chemin et nom de l'image
Style CSS
- id: id genérée automatiquement par UP
- class: classe(s) ajoutées au bloc principal
- style: style inline ajouté au bloc principal
{up jcat_image}
- jcat_image: dossier/chemin/url vers une image si la catégorie n'en possède pas
Style CSS
- id: identifiant
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): style ajouté dans le HEAD de la page
{up jcategories-by-tags=id-ou-nom-tag}
MOTS-CLES :
##title## ##title-link## ##subtitle## ##link##
##intro## ##content## : la description de la catégorie en HTML
##intro-text## ##intro-text,100## : la description de la catégorie en TEXT
##image## ##image-link## ##image-src## ##image-alt##
##date-crea## ##date-modif## ##new## ##count## ##hits## ##tags-list##
- jcategories_by_tags: ID ou nom du tag
- maxi: Nombre maxi d'article dans la liste
- no-published (no_published): 1 pour obtenir les catégories non publiées
- content-plugin: prise en compte des plugins de contenu pour ##into et ##content##
- sort-by = title: tri: title, ordering, created, modified, id, hits
- sort-order = asc: ordre de tri : asc, desc
- no-content-html = [p]aucune catégorie pour ce mot-clé[/p]: retour si aucune catégorie trouvée
Modèle pour affichage résultat
- template (item-template): modèle de mise en page. Si vide le modèle est défini par le contenu
Style du 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)
Style d'une ligne résultat
- item-tag = div: balise pour le bloc. 0 pour aucun
- item-style: classes et styles inline
- item-class: classe(s)
Paramètres pour images
- image-src: lorempixel.com/150/150', // image par défaut
- image-alt = news: image, texte alternatif par défaut
Formats 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 eventuels tags
- tags-list-style: classe ou style pour les autres mots-clés
Style CSS
- id: identifiant
- css-head (base-css): style ajouté dans le HEAD de la page
syntaxe :
{up jcategories-list=id}
MOTS-CLES ITEM MENU:
##id## ##access## ##title-link## ##title## ##note## ##extension## ##language##
- jcategories_list: id catégorie ou vide pour toutes
- component = Content: nom de l'extension pour laquelle récupérer les catégories
- level: nombre de niveaux. O = tous
Modèles de présentation
- template (item-template) = ##title-link##[small] (id:##id##) ##access## ##extension## ##language##[/small] ##note##: modèle de mise en page. keywords + bbcode
- model-note = [i class="t-blue"]%s[/i]: présentation pour ##note##
Balise et style du bloc principal
- main-tag (block) = ul: balise pour bloc parent
- style: classes et styles
- id: identifiant
Balise pour les lignes
- item-tag = li: balise pour blocs enfants (lignes)
Style CSS
- css-head (base-css): style ajouté dans le HEAD de la page
{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## ##id##
##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
- featured = show: show : tous les articles, 0 ou hide : sauf les articles en vedette, 1 ou only : uniquement les articles en vedette
- 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
{up jcontent-by-subcat=id-categorie}
liste des articles d'une catégorie et ses sous-catégories
syntaxe 2 :
{up jcontent-by-subcat}
liste des articles de la catégorie en cours et ses sous-catégories
syntaxe 3 :
{up jcontent-by-subcat=0}
liste des articles de toutes les catégories
syntaxe 4 :
{up jcontent-by-subcat}
##title##{/up jcontent-by-subcat}
variante : saisie template pour articles entre shortcodes
Les mots-clés article:
##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##
##upnb## : nbre actions UP dans la page - ##uplist## : nbre par actions
##CF_id_or_name## : valeur brute du custom field
Les mots-clés catégorie:
##catpath## : Chemin des categories depuis la categorie racine.
ex: si on demande la categorie 2 avec 3 niveaux (subcat=3): 2.1 > 2.1.1 > 2.1.1.1
##title## ##title-link## ##link## : titre et lien de la categorie
##alias## ##note## ##id## ##count## : nombre d'articles dans la catégorie
Sélection des catégories
- jcontent_by_subcat: ID catégorie, vide pour celle de l'article actuel ou 0 pour toutes
- exclude: liste des id des catégories non reprises si option principale=0
- cat-level = 99: 0 a 99 - niveau maxi exploration des sous-catégories
filtrage et tri des articles
- maxi: Nombre maxi d'articles dans chaque catégorie. Vide = tous
- current: 1 pour inclure l'article en cours
- content-plugin: prise en compte des plugins de contenu pour ##into et ##content##
- no-published (no_published): Liste aussi les articles non publies
- author: filtre sur auteur: liste des id user ou article, current
- sort-by = title: tri: title, ordering, created, modified, publish_up, id, hits
- sort-order = asc: ordre de tri : asc, desc
Paramètres d'affichage des catégories
- cat-template = [small]##catpath##[/small] [b]##title##[/b]: modèle pour les lignes de catégories
- cat-tag = h5: balise pour ligne catégorie. LI pour passer en format liste UL/LI
- cat-class: classe(s) pour la ligne catégorie
- cat-style: style pour la ligne catégorie
- cat-separator = »: pour séparer l'arborescence des catégories
- cat-root-view = 1: afficher l'unique catégorie racine. root=jamais, plusieurs=toujours
Paramètres d'affichage des articles
- template (item-template): modele de mise en page. Si vide le modèle est le contenu
- item-tag = div: balise pour le bloc d'un article.
- item-style: classes et styles inline pour un article
- item-class: classe(s) pour un article (obsolete)
style du bloc principal
- main-tag (block) = p: balise pour le bloc englobant tous les articles.
- id: identifiant pour main-tag
- main-style: classes et styles inline pour bloc principal
- main-class: classe(s) pour bloc principal (obsolete)
Format pour les mots-clés
- date-format = %e %B %Y: format pour les dates
- date-locale: localisation pour les dates. Par defaut, celle du navigateur client.
- new-days = 30: nombre de jours depuis la création de l'article pour badge 'nouveau'
- new-html = [span class="badge bg-red t-white"]nouveau[/span]: code HTML pour badge NEW
- featured-html = ⭐: code HTML pour article en vedette
- image-src: lorempixel.com/300/300', // image par defaut
- image-alt = news: image, texte alternatif par defaut
- tags-list-prefix: texte avant les autres éventuels tags
- tags-list-style = badge;margin-right:4px: classe ou style affecte a une balise span par mot-cle
- tags-list-separator: séparateur entre mots-cles
Divers
- no-content-html = lang[en=No content found;fr=Aucun contenu trouvé: texte si aucune correspondance. 0=aucun texte
- css-head (base-css): code CSS dans le head
{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
{up jcontent-in-content=id_article}
syntaxe 2 :
{up jcontent_in_content=145}
template{/up jcontent_in_content}
Les mots-clés :
##id## ##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##
##CF_id_or_name## : valeur brute du custom field
- jcontent_in_content: ID de l'article
- 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##
Modèle de présentation
- template (item-template) = ##content##: modèle de mise en page. Si vide le modèle est le contenu. BBCode accepté
Balise & style pour le bloc parent
- main-tag (block) = div: balise pour le bloc d'un article. 0 pour aucun
- id: identifiant
- main-style: classes et styles inline pour un article
- main-class: classe(s) pour un article (obsoléte)
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.
Style CSS
- css-head (base-css): code CSS dans le head
{up jcontent-info=nom_info}
syntaxe 2 :
{up jcontent_info}
<b>une info :</b> ##nom_info##{/up jcontent_info}
syntaxe 3 :
{up jcontent_info | template=[b]une info :[/b] ##nom_info##}
Les mots-clés :
##id## ##title## ##subtitle##
##image## ##image-src## ##image-alt## ##image-legend##
##image-full## ##image-full-src## ##image-full-alt## ##image-full-legend##
##date-crea## ##crea_by## ##date-modif## ##modif_by##
##url-a## ##url-b## ##url-c##
##date-publish## ##date-unpublish##
##note## ##cat## ##catid## ##breadcrumbs##
##featured## ##hits## ##tags## ##tags-link## ##author##
##CF_id_or_name## : valeur brute du custom field
- jcontent_info: le nom d'un élément ou rien
Modèle de présentation
- template (item-template) = ##content##: modèle de mise en page. Si vide le modèle est le contenu. BBCode accepté
balise & style du bloc principal
- tag = _div: balise pour le bloc d'un article. _div = div si class ou style, sinon rien. = 0=jamais
- id: identifiant
- style: classes et styles inline pour un article
- class: classe(s) pour un article (obsoléte)
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.
- featured-html = [b class="t-gris"]★[/b], [b class="t-jauneFonce"]★[/b]: présentation mise en vedette
- tags-list-prefix: texte avant les autres eventuels tags
- tags-list-style = badge;margin-right:4px: classe ou style affecte a une balise span par mot-cle
- tags-list-separator: separateur entre mots-cles
- path-separator = »: caractère ou bbcode pour séparer les items menus ou les catégories
- path-current-class = b: style de l'élement terminal d'un chemin
- path-parent-class = fs90: style des élements parents
- path-order = asc: asc: élément terminal à la fin, desc : au début
- path-link = 1: affiche les liens sur les éléments.
Style CSS
- css-head (base-css): code CSS dans le head
{up jcontent-list=id-catégorie(s)}
Une action très pratique pour lister les articles de la catégorie en cours, il suffit de taper
{up jcontent-list}
- jcontent_list (article_category): ID de la catégorie ou vide pour celle de l'article actuel
- maxi: Nombre maxi d'article dans la liste
- no-published (no_published) = 1: Liste aussi les articles non publiés
- author: filtre sur auteur: liste des id ou article, current
- sort-by = title: tri: title, ordering, created, modified, publish_up, id, hits
- sort-order = asc: ordre de tri : asc, desc
Style du bloc principal
- id: identifiant
- main-class: classe(s) pour bloc principal (obsoléte)
- main-style: classes et styles inline pour bloc principal
- class: idem main-class. Conservé pour compatibilité descendante
- style: idem main-style. Conservé pour compatibilité descendante
Titre : balise et style
- title (titre): titre HTML si article trouvé.
- title-tag = h3: niveau du titre
- title-style: classes et styles inline pour le titre
- title-class: classe(s) pour le titre (obsoléte)
Style de la liste
- list-style: classes et styles inline pour la liste
- list-class: classe(s) pour la liste (obsoléte)
Style CSS
- css-head (base-css): code CSS dans le head
syntaxe 1 :
{up jcontent-metadata=id-categorie(s) | template=##title-link##}
syntaxe 2 :
{up jcontent-metadata=id-categorie(s)}
##title-link##{/up jcontent-metadata}
--- Les mots-clés :
##title## ##title-link## ##subtitle## ##maintitle## ##link## ##id##
##intro## ##intro-text## ##intro-text,100## ##content##
##image## ##image-src## ##image-alt##
##date-crea## ##date-modif## ##nivaccess## ##id##
##author## ##note## ##cat## ##cat-link## ##new## ##featured## ##hits## ##tags-list##
##upnb## : nbre actions UP dans la page - ##uplist## : nbre par actions
##date-publish## ##date-publish-end## ##date-featured## ##date-featured-end##
##meta-index## ##meta-follow## ##meta-title## ##meta-desc## ##meta-key##
##robots-cfg## ##robots-cat## ##robots-art##
- jcontent_metadata: 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: 1 pour inclure l'article en cours
- nivaccess = 1: liste des groupes pour niveau d'accés. 1=public only, 0=tous, 1,9=public et guest
- content-plugin: prise en compte des plugins de contenu pour ##intro et ##content##
- no-published (no_published) = 1: Liste aussi les articles non publiés
- 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 = aucun article ne correspond aux critéres ...[br]no item matches the criteria ...: 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 = %d/%m/%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
spécifique jcontent-metadata
- meta-title-min = 30: nombre de caractéres minimum/raisonnable pour la balise title de la page. Nom du site inclus selon config
- meta-title-max = 65: nombre de caractéres maximum pour la balise title de la page. Nom du site inclus selon config
- meta-desc-min: nombre de caractéres minimum/raisonnable pour la balise meta/description de la page
- meta-desc-max = 160: nombre de caractéres maximum pour la balise meta/description de la page
Style CSS
- id: identifiant
- css-head (base-css): code CSS dans le head
{up jextensions-list=prefset ou type(s)}
MOTS-CLES:
##id## ##client## ##type## ##name-link## ##name## ##author## ##version## ##note## ##folder## ##state##
- jextensions_list = component,module,plugin: nom d'un prefset ou un des types suivants : component,module,plugin,template
- type-exclude: 1= tous les types sauf ceux passés en paramètre principal
- client: 0=site, 1=admin, 2=tous
- minimal-id: pour exclure les composants du core Joomla 3.0
- author-exclude = Joomla! Project: pour exclure les composants du core Joomla 4.0
- actif-only: 1 pour lister les extensions dépubliées
- sort = type,folder,name: tri
Modèle de présentation
- template (item-template) = ##state####name##[small] ##client## ##type## ##folder## ##version## (id:##id##) ##author## [/small] ##note##: modèle de mise en page. keywords+bbcode
Balise et style du bloc principal
- main-tag (block) = ul: Balise pour bloc principal
- style: classes et styles
- id: identifiant
Balise pour les lignes
- item-tag = li: Balise pour blocs lignes
Format pour les mots-clés
- model-folder = %s: présentation pour ##folder##
- model-version = vers:%s: présentation pour ##version##
- model-note = [i class="t-blue"]%s[/i]: présentation pour ##note##
- state-list = [b style="color:red"]✕ [/b]: liste de choix : inactif, actif 🔴
Style CSS
- css-head (base-css): style ajouté dans le HEAD de la page
{up jmenus-list=menutype}
MOTS-CLES MENUTYPE:
##id## ##menutype## ##title## ##description##
MOTS-CLES ITEM MENU:
##id## ##title## ##link## ##title-link## ##note## ##access## ##language## ##component##
##level## ##image## / v51
- jmenus_list: prefset, nom menutype ou vide pour tous
- menuid: ID menu parent pour limiter à cette branche
Balise et style du bloc principal
- main-tag (block) = ul: balise pour la liste des fichiers
- style: classes et styles
- id:
Modèle de présentation
- template-menutype = [h5]##title## (id:##id##)[/h5] ##description## / ##menutype##: modèle pour menutype. keywords + bbcode
- template-menu = ##title-link##[small] (id:##id##) ##access## - ##component## ##language##[/small] ##note##: modèle item menu. keywords + bbcode
- model-note = [i class="t-blue"] %s[/i]: modèle pour ##note## keywords + bbcode
Style CSS
- css-head (base-css): style ajouté dans le HEAD de la page
{up jmenus-metadata=menutype}
MOTS-CLES MENUTYPE:
##id## ##menutype## ##title## ##description##
MOTS-CLES ITEM MENU:
##id## ##title## ##title-link## ##menutype## ##note## ##access## ##language##
##level## ##type## ##home##
##image## icon ou class ?
##publish_up## ##publish_down## ##index## ##follow##
MOTS-CLES ARTICLES (v51)
##id##, ##title##, ##title-link', ##title-size##, ##alias##, ##state##, ##access##, ##featured##,
##created##, ##modified##, ##publish_up##, ##publish_down##
##catid##, ##catname##, ##language##, ##index##, ##follow##
##featured_up## ##featured_down##
- jmenus_metadata: prefset, liste menutype (sep:virgule) ou vide pour tous
- menutype-exclude: liste des menutypes non repris. (sep:virgule)
- menuid: ID menu parent pour limiter à cette branche
Balise et style du bloc principal
- main-tag (block) = ul: balise pour la liste des fichiers
- style: classes et styles
- id:
Modèle de présentation
- public-only: 1: visible par les robots, 0: visible par utilisateur courant
- template-menutype = [h2]##title##[/h2]: Modèle pour les lignes menutype
- template-menu = ##state[0:icon-unpublish t-rouge,1:,-2:icon-trash t-gris] # [span class="%%"] [/span] ####home[1:fa fa-home,0:] # [span]%%[/span] ####image##[b]##title-link##[/b] (id##id####language!* # - %%##) ##access!Accès public # [span class="bg-red t-white ph1"]%%[/span]####menutype## / ##type## ##publish_up>#now # [mark class="t-vert"] publié le %% [/mark]## ##publish_down>#now # [mark class="t-rouge"] dépublié le %% [/mark]####index=noindex # [span class="t-red"] %%[/span]## ##follow=nofollow # [span class="t-red"] %%[/span]####note # [div class="t-bleu i"]%%[/div]##: Modèle pour les lignes menu
- template-article = ##featured[1:⭐,0:] # [span]%%[/span] ####title-link## (##id##) ##access!Accès public # [span class="bg-red t-white ph1"]%%[/span]## ##index=noindex # [span class="t-red"] %%[/span]####follow=nofollow # [span class="t-red"] %%[/span]##: Modèle pour les lignes article
- menu-state-show = 1,0,2,-2: liste des états affichés pour les menus : 0:inactif, 1:actif 2:archive, -2:poubelle
- article-state-show = 1,0,2,-2: liste des états affichés pour les articles : 0:inactif, 1:actif 2:archive, -2:poubelle
- article-sort-by = title: tri: title, ordering, created, modified, publish_up, id, hits, random
- article-sort-order = asc: ordre de tri : asc, desc
Format pour les mots-clés
- date-format = %d/%m/%Y: format pour les dates
- date-locale: localisation pour les dates. Par défaut, celle du navigateur client.
Style CSS
- css-head (base-css): style ajouté dans le HEAD de la page
{up jmodules-list=position ou client_id}
MOTS-CLES:
##id## ##client## ##position## ##module## ##title##
##state## ##note## ##ordering## ##language##
Critères de sélection des modules
- jmodules_list: prefset ou position(s). vide=tous les modules site
- position-exclude: 1= toutes les positions sauf celles passées en paramètre principal
- client: 0=site, 1=admin, 2=tous
- module: nom du module. ex: LM-Custom-SITE
- module-exclude: 1= tous les modules sauf ceux passés au paramètre module
- actif-only: 1 pour lister les extensions dépubliées
- order = position, ordering, title: ordre de tri. sépérateur virgule
- no-content-html = [p]aucun module a cette position[/p]: retour si aucune catégorie trouvée
Balise et style du bloc principal
- main-tag (block) = ul: balise pour le bloc englobant tous les modules. 0 pour aucun
- id: identifiant
- main-style: classes et styles inline pour bloc principal
- main-class: classe(s) pour bloc principal (obsolète)
Balise et style d'un bloc module
- item-tag = li: balise pour un module. 0 pour aucun
- item-style: classes et styles inline pour bloc ligne
- item-class: classe(s) pour bloc ligne (obsolète)
Modèle de présentation
- template (item-template) = \[##position##\] [b class="##state##"][/b] [b]##title##[/b] [small] (id:##id## - ##module##) ##language##[/small] ##note##: modèle de mise en page.
- model-note = [i class="t-blue"]%s[/i]: présentation pour ##note##
- state-list = icon-unpublish t-rouge, icon-publish t-vert, icon-trash t-gris: liste de choix : inactif, actif 🔴
Style CSS
- css-head (base-css): style ajouté dans le HEAD de la page

Vite tapez ce shortcode :
syntax
{up kawa=long | sugar | speculoos=lotus }
- kawa (coffee): vide = café court, long = café long
- sucre (sugar) = 1: option sucre
- speculoos: speculoos base ou spécifier marque (lotus)
Style CSS
- id: identifiant
- class: classe(s) pour bloc
- style: style inline pour bloc
{up lang | fr=oui | gb=yes}
syntaxe 2 :
{up lang | lang-order=en-fr}
contenu anglais {====}
contenu français {/up lang}
syntaxe 3 :
{up lang}
retourne le meilleur code langue selon lang-order- lang: langue pour vérifer le rendu (vide en production)
- lang-order = en,fr: ordre de saisie des langues dans contenu
Style CSS
- tag: balise entourant le contenu retourné
- id: identifiant
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
Divers
- info: affiche la langue du navigateur et celle affichée
- http: utilise l'entête HTTP au lieu de Factory::getLanguage()
{up link=URL | label=label | blank | class=...}
- link: URL ou EMAIL pour l'attribut href
- label: texte alternatif pour le lien
- blank: ouvre le lien dans un nouvel onglet
Icône
- icon: icone affichée devant le lien : 0=pas d'icône, 1=icône par defaut, Unicode, fonticon ou image
- icon-style: classes et styles pour l'icône
- icon-url = Ux1F517: Icone par defaut pour les URL
- icon-phone = Ux260E: Icone par defaut pour les téléphone - v2.9
- icon-mail = Ux2709: Icone par defaut pour les MAIL
Style CSS
- id: identifiant
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): style ajouté dans le HEAD de la page
Divers
- font-prefix = icon-: pour icomoon ou 'fa fa-' pour font-awesome (a mettre dans pref.ini)
- filter: conditions. Voir doc action filter (v2.9)
{up listup=style puce}
list UL/OL {/up listup}
- listup: style des puces (séparateur point-virgule) par niveaux (markers) (séparateur virgule)
Valeurs par défaut
- ul-default = square;t-c1: type liste par défaut
- ol-default = decimal;t-c1: type liste numérotée par défaut
Style CSS
- id: identifiant
- class: classe(s) pour bloc principal
- style: class ou style inline pour bloc principal
- style-*: class ou style pour les niveaux des puces
- css-head (base-css): style ajouté dans le HEAD de la page
Divers
- start: indice pour début liste numérotée
- valid-type = rounded-alpha,squared-alpha,circled-decimal,rounded-decimal,decimal-leading-zero,lower-alpha,upper-alpha,lower-roman,upper-roman: types de liste (numérotée) autorisés
- fonticon = FontAwesome: police d'icônes installée sur le site
Syntaxe :
{up lorem=liste des arguments ci-dessous }
- (integer) - Nombre de paragraphes (P) générés. 4 par défaut
- short, medium, medium, verylong - La longueur moyenne d'un paragraphe.
- decorate - ajoute bold, italic, ...
- link - ajoute des liens.
- ul - ajoute listes.
- ol - ajoute listes ordonnées.
- dl - ajoute listes description.
- bq - ajoute bloc citation
- code - ajoute des exemples de code.
- headers - ajoute des titre hx.
- allcaps - TOUT EN MAJUSCULES.
- prude - version prude.
- plaintext - Retourne text sans balise HTML.
exemple appel : https://loripsum.net/api/2/code/decorate
.
Pour avoir un texte sans aucun tag, utilisez :
{up lorem=2,plaintext | tag=0}
.Même sans balise P, le nombre de paragraphes influe sur la longueur du texte retourné.
- lorem: nombre de paragraphe et mots-clés séparés par des virgules
Divers
- max-char: nombre maxima de caractères
- max-word: nombre maxima de mots
Style CSS
- tag = div: (v1.6) tag du bloc contenant le texte en retour ou tag=0 pour aucun.
- id: pour forcer l'id (sans effet, si tag=0)
- class: classe(s) pour bloc (sans effet, si tag=0)
- style: style inline pour bloc (sans effet, si tag=0)
{up loremflickr=type | width=xx | height=xx}
.
Note : width & height sont les dimensions de l'image retournée par lorempixel. Pour l'afficher en remplissant le bloc parent, il faut ajouter style=width:100%
Le site //lorempixel.com étant fermé, l'action utilise le site //loremflickr.com
on peut appeler l'action par loremflickr ou lorempixel
- lorem_flickr (lorempixel,lorem_placeimg) = joomla: mot(s) clé(s) séparé par des virgules
- height (h,hauteur) = 200: hauteur image téléchargée
- width (l,largeur,w) = 200: largeur image téléchargée
- orientation: H ou V pour utiliser des photos horizontale ou verticale avant recadrage
- color = g: NON DISPONIBLE (g (gris), p (pixellisé), red, green, ou blue)
- number = 1: nombre d'images retournées
- cache-delai = - 1: durée de validité du cache. 0:aucun, 1:une heure, -1:illimité
- cache-reset: efface TOUS les fichiers dans le cache
Methode pour retour
- mode = img: balise img ou dir pour le chemin vers le dossier
Bloc parent
- main-tag (block) = div: balise du bloc parent à l'image si options main-class ou align
- main-class: classe(s)
- align: alignement horizontal : left, center, right
Style CSS
- id: identifiant
- class: classes et styles image(s) en mode=img
- style: classes et styles image(s) en mode=img
La couleur du fond et du texte peut être spécifiée par son code hexadecimal ou son nom
syntaxe
{up lorem-place=250x150 | text=... | bg-color=gold | text-color=333}
- lorem_place: dimension de l'image largeur x hauteur
- width (l,largeur,w) = 300: largeur de l'image en pixels
- height (h,hauteur) = 300: hauteur de l'image en pixels
- bg-color = CCC: Couleur de fond. Code hexa ou nom.
- text-color = 333: Couleur du texte. Code hexa ou nom.
- text: texte affiché. 56 caractères maxi. Saut de ligne: \n
- font = Lato: police : Lato,Montserrat,Oswald,PT Sans,Roboto,Lora,Open Sans,Playfair Display,Raleway,Source Sans Pro
- format = svg: svg, png, jpeg, gif ou Webp.
gestion du cache
- cache-delai = - 1: durée de validité du cache. 0:aucun, 1:une heure, -1:illimité
- cache-reset: efface TOUS les fichiers dans le cache
style
- id: identifiant
- class: classe(s) et style pour bloc
- style: classe(s) et style pour bloc
- css-head (base-css): style ajouté dans le HEAD de la page
{up lorem-placeimg=catégorie | width=xx | height=xx | grayscale | sepia }
--> catégorie = any, animals, arch, nature, people, tech
- lorem_placeimg = any: type d'image: any, animals, arch, nature, people, tech
- height (h,hauteur) = 200: hauteur image téléchargée
- width (l,largeur,w) = 200: largeur image téléchargée
- grayscale: rendu en niveau de gris
- sepia: rendu sépia
Style CSS
- id: identifiant
- class: classe(s) (obsolète)
- style: classes et styles
{up lorem-unsplash=#image | width=xx | height=xx }
rechercher n° image sur https://picsum.photos/images
- lorem_unsplash: n° de l'image sur https://picsum.photos/images
- height (h,hauteur) = 200: hauteur image téléchargée
- width (l,largeur,w) = 200: largeur image téléchargée
- random: force la récupération aléatoire
- grayscale: pour rendu en niveaux de gris
- blur: rendu flou
- gravity: recadrage : north, east, south, west, center
Style CSS
- id: identifiant
- class: classe(s) (obsolète)
- style: classes et styles
{up mapael=nom_carte}
{default-area | ...}
{default-plot | ...}
{default-link | ...}
{area=ID | value=X | ...}
{plot=ID | coord=lat,lon | value=[X1,X2] | text=... | ...}
{link=ID | between=lat1,lon1,lat2,lon2 | factor=0.5 | ...}
{link=ID | between=plot-ID-1, plot-ID-2 | factor=0.5 | ...}
{legend-area=TITRE | ...}
{legend-plot=TITRE | ...}
{legend-slice=LABEL | value=X | ...}
{legend-slice=LABEL | min=X | max=Y | ...}
{/up mapael}
# Options shortcode principal :
zoom=min,max | zoom-init=niv,lat,lon | csv-xxx | ...
# Options communes à tous les shortcodes secondaires :
bd-color | bd-color-hover | bd-dash | bd-width | bd-width-hover | bg-color | bg-color-hover
class | eventHandlers | href | target | transform-hover
text | text-attrs | text-attrs-hover | text-margin | text-position
tooltip | tooltip-class | tooltip-offset-left | tooltip-offset-top | tooltip-overflow-right | tooltip-overflow-bottom
options
# Options spécifiques à defaultPlot et plot
type | size | height | width | url | path
saisie rapide : circle=W,color | square=W,color | image=WxH,url | svg=WxH,path
# Options pour area
value
# Options pour plot
value | coord | plotsOn
# Options pour link
between | factor
# Options pour legend-area et legend-plot
mode | exclusive | display | legend-class
ml | mb | ml-label | ml-title |mb-title | color-title | color-label | color-label-hover
hide-enabled | hide-opacity | hide-animation
# Options pour legend-slice
value | min | max
legend-slice/label | clicked | display
legend-font-size | legend-bd-color | legend-bd-width
- mapael: nom de la carte (fichier .js)
- zoom: valeur mini,maxi du zoom
- zoom-init: niveau initial et coordonnées du centre
- options: liste des options au format mapael. ex: default-area: {attrs:{fill:"#dda0dd"},attrsHover:{fill:"#FF00FF"}}
Gestion des fichiers CSV
- csv-areas: fichier CSV pour définir les areas. Les sous-shortcodes 'area' sont ignores
- csv-areas-model: modele pour construire la définition d'une zone
- csv-plots: fichier CSV pour définir les plots. Les sous-shortcodes 'plot' sont ignores
- csv-plots-model: modele pour construire la définition d'un point
- csv-links: fichier CSV pour définir les links. Les sous-shortcodes 'link' sont ignores
- csv-links-model: modèle pour construire la définition d'un lien
Style des bulles d'aide
- tooltip-class: Nom de classe CSS des infobulles
- tooltip-style: Proprietes CSS pour les infobulles
Divers
- before-init: voir demo
- after-init: voir demo
Style CSS
- make-html = 1: par défaut, les blocs pour la ou les légendes sont crees au-dessous de celui pour la carte.
- map-class = map: Nom de classe CSS du conteneur de la carte
- id: remplace l'id generee automatiquement par UP
- class: classe(s) ajoutees au bloc principal
- style: style inline ajoute au bloc principal
- css-head (base-css): style ajoute dans le HEAD de la page
{up markdown}
contenu{/up markdown}
syntaxe 2:
{up markdown=nom_fichier_md}
Utilisation : afficher un fichier changelog.md *
- markdown: chemin et nom du fichier markdown ou vide pour contenu
- strip-tags = 1: 0 pour conserver les tags HTML dans le contenu saisi entre les shortcodes. Ils sont toujours conservés si la source est un fichier.
Style CSS
- id: identifiant
- class: classe(s) pour bloc (obsolète)
- style: classes et styles pour bloc
{up marquee=label}
texte du message défilant {/up marquee}
*- marquee: le texte de l'etiquette
- model = base: style CSS dans .upmq-*style*. 0=aucun
- height (h,hauteur) = 100px: hauteur defaut pour scroll vetical
Style CSS
- out-class: classe(s) pour div out
- out-style: style inline pour div out
- msg-class: classe(s) pour div msg
- msg-style: style inline pour div msg
- lbl-class: classe(s) pour div label
- lbl-style: style inline pour div label
- lbl-pos: position label : left, right, top, bottom, none
- lbl-nowrap: 1 = label sur une ligne
Divers
- id: identifiant
- filter: conditions. Voir doc action filter (v1.8)
Paramètres Javascript pour configuration
- direction = left: right, up, down
- loop = - 1: nombre d'affichage, -1 : infini
- scrolldelay: delai en millisecondes
- scrollamount = 50: vitesse
- circular = 1: mode carousel. si contenu plus large que .str_wrap
- drag = 1: deplacement msg avec souris
- runshort = 1: scroll si texte court (visible sans scroll)
- hoverstop = 1: pause lors survol
- inverthover: scroll uniquement lors survol
{up masonry=breakpoint:nbCols*margeX*margeY}
bloc-1 bloc-2 bloc-n {/up masonry}
l'argument principal est la liste du nombre de colonnes et des marges par breakpoint.
Exemple :
{up masonry=960:4,1200:5}
4 colonnes au-dessus de 960px, 5 si 1200px{up masonry=960:4*10, 1200:5*10*20}
idem plus marges XY de 10px pour 960 et marge X de 10px et Y de 20px pour 12000- masonry = 480:2,720:3,960:4,1200:5: colonnes et marges par breakpoint : bp:col*x*y. ex: 960:2*10*10,480:1
- margin: marge en pixels. x*y pour des marges différentes en horizontal et vertical
Options annexes
- preserve-order: 1: l'ordre des blocs est préservé. 0=priorité à l'égalité de la hauteur des colonnes
- wait-images: 1: charge toutes les images avant le calcul. 0: calcul à chaque chargement d'image.
- breakpoints-container: 0: breakpoints définis sur la largeur du navigateur. 1: largeur du bloc parent
mise en forme CSS
- id: id genérée automatiquement par UP
- class: classe(s) ajoutées au bloc principal
- style: style inline ajouté au bloc principal
- css-head (base-css): style ajouté dans le HEAD de la page
pour utiliser toutes les fichiers audio de ce nom dans le dossier.
Si le nom du fichier n'est pas indiqué ou contient des jokers,
tous les fichiers audios correspondants seront retournés
Supporte les formats audio : mp3,ogg
Si une image (jpg,png,webp,gif) existe, elle sera utilisé comme preview (poster)
syntaxe
{up media-audio=chemin_vers_audios}
Mot-clés pour le template : ##player##, ##title##, ##image##, ##info##, ##download##
- media_audio: chemin et nom du fichier vidéo ou dossier. caractères joker autorisés
configuration du lecteur vidéo
- autoplay: lancement automatique du 1er fichier audio
- muted: coupe le son
- loop: joue le fichier audio en boucle
- controls = 1: affiche les boutons de commande
- preload = auto: mode de chargement du fichier audio : none, metadata, auto.
Mise en forme résultat
- template (item-template) = ##title## ##player##: modèle de mise en forme d'un item
- main-tag (block): balise pour le bmoc principal
- main-style: classe(s) et style pour le bloc principal
- item-tag = div: balise pour un fichier. forcé à DIV si vide
- item-style: classe(s) et style pour les blocs des différents morceaux
- player-style: classe(s) et style pour le lecteur audio
- title-style: classe(s) et style pour la légende
- title-tag = div: balise pour le titre du morceau
- image-default: image utilisée par défaut pour tous les fichiers
- image-types = jpg,jpeg,png,gif,webp: liste extension des fichiers images acceptés
- image-style: classe(s) et style pour la légende
- info-style: classe(s) et style pour les infos
- download-tag = a: balise pour bouton download. forcé à DIV si vide
- download-text = lang[en=Download;fr=Télécharger]: texte pour bouton téléchager
- download-style: classe(s) et style pour la légende. ex: btn btn-primary
Types des fichiers audio acceptés
- types = ogg:ogg;mp3:mpeg;MP3:mpeg: liste extension fichier et type mime. défaut: ogg:ogg;mp3:mpeg;MP3:mpeg
- codecs: liste type et codec supportés. ex: ogg:opus,vorbis
Messages si erreur
- no-audio = lang[en=no audio;fr=aucun fichier audio]: message si audio non trouvée
- no-support = lang[en=Your web browser does not support HTML5 audio;fr=Votre navigateur Web ne prend pas en charge l\'audio HTML5: message si type audio non supporté
styles
- id = identifiant instance:
- css-head (base-css): style ajouté dans le HEAD de la page
{up media_plyr=yt | code=bTqVqk7FSmY }
{up media_plyr=vimeo | code=bTqVqk7FSmY }
media_plyr : précisez yt ou youtube ou vimeo
code : il s'agit du code figurant dans l'URL de la vidéo.
.
{up media_plyr=video | poster=url image | mp4 | webm | vtt | download }
media_plyr : video pour indiquer l'URL vers la video.
poster : nom de l'image fixe (obligatoire)
mp4, webm, vtt, download : si URL non spécifiée, elle sera déduite de celle pour 'poster'
.
{up media_plyr=audio | mp3=url fichier mp3 | ogg}
media_plyr : audio
mp3 : url vers fichier MP3 (obligatoire)
ogg : si URL non spécifiée, elle sera déduite de celle pour 'MP3'
.
- media_plyr (vimeo,audio,video): type de lecture : youtube, vimeo, video ou audio
- code: code de la video (à la fin de l'url youtube ou vimeo)
- poster: URL de l'image (obligatoire)
- mp4: URL du fichier MP4. Si vide, on utilise le nom de poster
- webm: URL du fichier WEBM. Si vide, on utilise le nom de poster
- vtt: URL du fichier VTT pour sous-titrage. Si vide, on utilise le nom de poster
- download: URL du fichier téléchargeable. Si vide, on utilise le nom du fichier MP4
- mp3: URL du fichier audio mp3. (obligatoire)
- ogg: URL du fichier audio ogg. Si vide, on utilise le nom du fichier MP3
Style CSS
- id: identifiant
- class: classe(s) ajoutée(s) au bloc extérieur
- style: style inline ajouté au bloc extérieur
pour utiliser toutes les vidéos de ce nom dans le dossier.
Si le nom du fichier n'est pas indiqué ou contient des jokers,
toutes les vidéos correspondantes seront retournées
Supporte les formats video : mp4,webm,ogg
Si une image (jpg,png,webp,gif) existe, elle sera utilisé comme preview (poster)
syntaxe
{up media-video=chemin_vers_videos}
- media_video: chemin et nom du fichier vidéo. caractères joker autorisés
configuration du lecteur vidéo
- autoplay: lancement automatique de la 1ere video
- muted: coupe le son
- loop: joue la vidéo en boucle
- controls = 1: affiche les boutons de commande
- preload = auto: none, metadata, auto.
- legend: texte affiché au dessous des vidéo ou 1 pour le nom humanisé de chaque vidéo
- legend-style: classe(s) et style pour la légende
Types des vidéos acceptées
- types = mp4:mp4;webm:webm;ogv:ogg: liste extension fichier et type mime
- codecs: liste type et codec supportés. ex: ogg:theora,vorbis; webm:vp8.0,vorbis
Messages si erreur
- no-video = lang[en=no video;fr=aucune vidéo]: message si video non trouvée
- no-support = lang[en=Your web browser does not support HTML5 video;fr=Votre navigateur Web ne prend pas en charge la vidéo HTML5: message si video non supportée
styles
- id:
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): style ajouté dans le HEAD de la page
{up media_vimeo=ID [| autoplay | portrait |title |muted |loop | play-on-visible]}
ID : il s'agit du code figurant à la fin de l'URL de la vidéo.
L'autoplay sous Firefox/Chrome est interdit si la video contient du son.
Utilisez muted pour débloquer cela.
voir https://vimeo.zendesk.com/hc/en-us/articles/115004485728-Autoplaying-and-looping-embedded-videos
Les options title et portrait ne fonctionne que si la video le supporte.
- media_vimeo: code de la video (à la fin de l'url vimeo)
- width (l,largeur,w): largeur de la video en px ou %
- autoplay: démarrage automatique
- title (titre): afficher le titre de la vidéo
- portrait: afficher l'image de profil de l'auteur (portrait)
- loop: boucle en fin de video
- muted: coupe le son
- play-on-visible: démarre et arrête la video selon sa visibilité sur l'ecran
Style CSS
- id: identifiant
- class: classe pour bloc externe
- style: code css libre pour bloc externe
Divers
- rgpd = 1: 0 pour ne pas appliquer la règle pour le RGPD
{up media-youtube=ID [|autoplay|play-on-visible|muted|loop]}
ID : il s'agit du code figurant à la fin de l'URL de la vidéo.
- media_youtube (youtube): code de la video (à la fin de l'url youtube)
- ratio = 16/9: homothétie de la vidéo sous la forme 16/9 ou 1.77
- width (l,largeur,w): largeur de la video en px ou %
- autoplay: demarrage automatique
- loop: boucle sur la video
- muted: coupe le son
- play-on-visible: démarre et arrête la video selon sa visibilité sur l'ecran
Style CSS
- id: Identifiant
- class: classe pour bloc externe
- style: code css libre pour bloc externe
Divers
- rgpd = 1: 0 pour ne pas appliquer la règle pour le RGPD
Pour commencer à l'utiliser l'API, il est nécessaire de s'inscrire sur le site internet de Météo Concept. La formule gratuite permet de faire jusqu'à 500 requêtes par jour.
Cette inscription fourni une authentification et une autorisation grâce à une clé d'API, appelé communément « token ».
syntaxe 1
{up meteo=Date ou dateheure de la prévision |insee=code |token=Token fourni par Météo Concept }
syntaxe 2
{up meteo=Date ou dateheure de la prévision |insee=code |token=Token fourni par Météo Concept }
modèle de texte avec mots-clés
{/up meteo}
trouver un code insee : https://www.insee.fr/fr/recherche/recherche-geographique
---- MOTS CLES
##insee## Code Insee de la commune
##cp## Code postal de la commune
##name## Nom de la commune
##latitude## Latitude décimale de la commune
##longitude## Longitude décimale de la commune
##altitude## Altitude de la commune en mètres
##dirwind10m## ou ##winddirs## Direction du vent
##gust10m## Rafales de vent à 10 mètres en km/h
##gustx## Rafale de vent potentielle sous orage ou grain en km/h
##probafog## Probabilité de brouillard entre 0 et 100%
##probafrost## Probabilité de gel entre 0 et 100%
##rainprob## ou ##probarain## Probabilité de pluie entre 0 et 100%
##probawind100## Probabilité de vent >70 km/h entre 0 et 100%
##probawind70## Probabilité de vent >100 km/h entre 0 et 100%
##rainmax## ou ##rr1## Cumul de pluie maximal sur la journée en mm
##rain## ou ##rr10## Cumul de pluie sur la journée en mm
##weather-text## Resenti météo sous forme de texte
##weather## Resenti météo index (nombre de 0 à 235)
##windspeed## ou ##wind10m## Vent moyen à 10 mètres en km/h
---- QUART DE JOURNEE UNIQUEMENT
##temp## ou ##temp2m## Température à 2 mètres en °C
---- JOURNEE ENTIERE UNIQUEMENT
##temp-max## ou ##tmax## Température maximale à 2 mètres en °C
##temp-min## ou ##tmin## Température minimale à 2 mètres en °C
##sun_hours## Ensoleillement en heures
##etp## Cumul d'évapotranspiration en mm
- meteo_concept: Date de la prévision sous la forme AAAAMMJJ (journée) ou AAAAMMJJHHMM (quart de journée début à 1,7,13 ou 19h)
- insee: Localisation par code insee de la commune (mode prioritaire)
Si la date n'est pas dans les 14 jours à venir
- msg: 1 pour afficher un message si hors période de 14 jours
- msg-before = L\'événement est terminé depuis le %s: message si date antérieure
- msg-after = Prévisions disponibles à partir du %s: message si date postérieur
CSS pour bloc principal
- tag = div: balise utilisée pour le bloc principal si un style est indiqué.
- style: classe et style pour le bloc principal.
Paramètres webmaster
- date-format = %A %e %B %Y: format de la date
- cache-delay = 60: durée du cache en minutes. 0 pas de cache
- token: Token fourni par Météo Concept
{up meteo-france=ville | orientation=sens}
le code commune de la ville à récupérer sur http://www.meteofrance.com/meteo-widget
- meteo_france: le code commune de la ville à récupérer sur http://www.meteofrance.com/meteo-widget
- orientation = v: bloc horizontal (H) ou vertical (V)
- block (bloc) = p: balise HTML autour du module météo
Style CSS
- id: Identifiant
- class: classe(s) pour bloc parent
- style: style inline pour bloc parent
syntaxe 1 :
{up modal=contenu popup | label=texte du lien}
syntaxe 2 :
{up modal=vide,'html','images' ou contenu | label=texte lien}
contenu{/up modal}
si vide ou 'html' : le contenu du popup est le code entre les shortcodes
si 'img' : chaque image du code entre les shortcodes sera un popup
sinon on analyse la valeur du paramètre pour déterminer son type
- video vimeo, youtube ou dailymotion
{up modal=//youtu.be/H9fa9aWFbLM}
- image unique si
{up modal=images/xx.jpg}
ou png, ...- bloc inline si id de bloc
{up modal=#bloc}
- iframe si url
{up modal=//lomart.fr}
ou {up modal=doc/xx.pdf}
ou {up modal=?index/...}
on peut forcer le type par type=inline, iframe, image, video, ajax
- modal: contenu ou type de contenu
- type: pour forcer le type : inline, iframe, image, video, ajax
- label: texte du lien pour afficher le popup. bbcode accepté
options diverses
- filter: conditions. Voir doc action filter (v1.8)
- close-left: croix de fermeture en haut à gauche. haut-droite par défaut
- zoom-suffix = -mini: suffixe pour les versions vignettes des images
- base-js-params: règles JS définies par le webmaster (ajout dans init JS)
Gestion des styles
- id: identifiant. identique pour lier des modales
- class: classe(s) pour bloc label
- style: style inline pour bloc label
- css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
Options pour Javascript
- overlayClose = 1: 1 pour fermer la fenêtre modale en cliquant sur la zone grisée autour du contenu
- videoAutoPlay: 1 pour démarrer la video à l'ouverture du popup
- gallery = 1: 0 pour traiter les images individuellement
- title (titre) = 1: afficher le titre
- width (l,largeur,w): largeur avec unité. Ex: 80%, 500px, ...
- height (h,hauteur): hauteur avec unité. Ex: 80%, 500px, ...
{up note=texte_commentaire}
syntax 2
{up note=texte_commentaire}
contenu {/up note}
- note = lang[en=hidden text. HTML allowed;fr=texte masqué. HTML autorisé]: texte à masquer
{up osmap=latitude, longitude}
La latitude/longitude peut être connue sur le site : https://www.coordonnees-gps.fr
Les tuiles disponibles sont ici : https://wiki.openstreetmap.org/wiki/Tile_servers
.
syntaxe 2 : multimakers
{up osmap=latitude, longitude}
{marker=latitude, longitude | popup-text | popup-clic=0 | marker-image=img | marker-options=...}
{/up osmap}
- osmap: latitude, longitude du centre de la carte (a récupérer sur http://getlatlon.yohman.com)
- zoom = 13: niveau de zoom de la carte
- height (h,hauteur) = 250: hauteur du bloc carte. La largeur est 100% du parent
- scale = 1: affiche l'échelle. 0:sans, 1:métrique, 2:impérial, 3:métrique&impérial
- map-options: liste des options pour la carte. ex: zoomControl:1, keyboard:0
- tile: nom de la tuile
- tile-options: niveau de zoom maximum, ...
- tile-url: url de la tuile
- marker = 1: affiche un marker au centre de la carte
- marker-image: 0: aucun ou chemin image pin
- marker-options: chaine des options du marqueur. voir https://leafletjs.com/reference-1.3.0.html#icon
- popup-clic = 1: 0: permanent ou 1: sur clic (si texte)
- popup-text: texte du popup en bbcode. Si vide, pas de popup
- gmap (googlemap): texte du lien affiché au-dessous de la carte pour afficher la carte sous GMap
- gmap-url: optionnel.Permet d'afficher un marqueur
- id: id genérée automatiquement par UP
- class: classe(s) ajoutées au bloc principal
- style: style inline ajouté au bloc principal
{up page-search}
- page_search = body: sélecteur CSS du bloc où rechercher. J3=.article-details OU J4=.com-content-article__body
Position de la zone de recherche
- search-top = 80px: position verticale de la zone de recherche. positif: top, négatif: bottom
- search-left = 80px: position horizontale de la zone de recherche. positif=left, négatif= right
Icone et texte de la zone de recherche
- search-icon = loupe-64-red.png: image pour le bouton. Si le chemin n'est pas indiqué, l'image est dans le dossier de l'action.
- search-text = lang[en=Search;fr=Rechercher]: texte indice dans la zone de recherche (Placeholder)
Mise en évidence du résultat
- highlight-bg = yellow: couleur de surlignage des mots trouvés
Style CSS
- id: id genérée automatiquement par UP
- class: classe(s) ajoutées au bloc principal
- style: style inline ajouté au bloc principal
- css-head (base-css): style ajouté dans le HEAD de la page
syntaxe
{up pdf=chemin du fichier PDF}
integration libraire TurnJs http://turnjs.com/ depuis https://github.com/iberan/pdfjs-flipbook
- pdf: chemin du fichier pdf ou masque si plusieurs (v311)
- method (methode) = PDFJS: ou Google, Embed ... ou 0
- maxi: nombre maxi de fichiers affichés. 0 sans limite
- view = 1: 0 = masque le PDF
- width (l,largeur,w) = 100%: largeur iframe
- height (h,hauteur) = 500px: hauteur iframe
Gestion du lien pour télécharger le PDF
- download = 1: 1 pour afficher lien téléchargement
- download-name: nom du fichier téléchargé
- download-text = en=Download %s;fr=Telecharger %s: texte pour lien
- download-icon: image affichée devant le lien
- download-class: class(s) pour bouton lien seul
- download-style: style inline pour bouton lien seul
Gestion bouton pour afficher le PDF
- btn (bouton): 1 pour afficher un bouton
- btn-target = _blank: cible : _blank, _parent, popup ou _popup
- btn-text = voir %s: texte pour bouton
- btn-icon: image affichée devant le texte du bouton
- btn-class = btn btn-primary: class(s) pour bouton lien seul
- btn-style: style inline pour bouton lien seul
Divers
- close-left: 1=croix de fermeture en haut à gauche. 0=haut-droite par défaut
- flip: activer le mode flipbook uniquement si PDFJS
- background: couleur fond perdu du PDF au format #rrggbb
- zoom: zoom par défaut (100%)
- pdfjs-model = web: ou mobile (non opérationnel)
Style CSS
- id: identifiant
- class: classe(s) pour bloc parent
- style: style inline pour bloc parent
- tag = div: balise pour bloc parent - v2.9
- css-head (base-css): style ajouté dans le HEAD de la page
{up pdf-gallery=dossier}
syntaxe
{up pdf-gallery=dossier}
template{/up pdf-gallery}
Template pour définir le rendu
##name## : nom et extension du fichier sans le prefixe date
##full-name## : nom et extension du fichier avec le prefixe date
##human-name## : nom du fichier sans les tirets
##size## : taille du fichier
##date## : date du fichier ou prefixe date du nom de fichier
##info## : fichier .info de même nom que le PDF avec texte descriptif
##image## : fichier jpg ou png de même nom que le PDF
##image-view## : idem ##image## avec lien pour afficher PDF dans fenêtre modale
##btn-view## : lien pour afficher PDF dans fenêtre modale. Texte selon btn-view-text
##btn-download##, ##name-download## : lien pour télécharger le PDF. Texte selon btn-download-text
##preview## : vue du PDF avec la méthode jsviewer de l'action PDF.
ATTENTION ##preview## charge tous les fichiers PDF lors de l'affichage de la page
- pdf_gallery: chemin du dossier contenant les PDF
- file-mask: pour sélectionner les fichiers d'un dossier. ex: fic-*
- sort-by = name: tri des fichiers. name ou date. Voir la demo
- sort-order = asc: sens du tri. asc ou desc
- msg-no-file = en=no file;fr=aucun fichier: message si aucun fichier PDF dans le dossier
- template (item-template) = ##human-name## [small](##size## - ##date##)[/small] ##btn-view## ##btn-download##: modele pour affichage (bbcode et motcle)
Balise pour affichage de la liste
- main-tag (block) = ul: balise principale. 0 = aucune
- item-tag = li: balise pour le bloc d'un fichier. 0 = aucune
Configuration prévisualisation du PDF
- preview-width = 100%: largeur du bloc pour preview
- preview-height = 500px: hauteur du bloc pour preview
- preview-background: couleur fond perdu du PDF (preview et modal) au format #rrggbb
Configuration fenêtre modale
- popup-width: largeur de la fenêtre popup avec unité. Ex: 90vw, 80%, ...
- popup-height: hauteur de la fenêtre popup avec unité. Ex: 90vh, 500px, ...
- popup-close-left: croix de fermeture en haut à gauche. haut-droite par défaut
Bouton télécharger le PDF
- add-sitename: texte à ajouter au début des fichiers téléchargés
- btn-download-text = en=Download %s;fr=Telecharger %s: texte pour le bouton 'télécharger'
- btn-download-style: classe et style inline pour le bouton 'télécharger'
Bouton voir le PDF
- btn-view-text = Voir: texte pour bouton 'voir'
- btn-view-style: classe et style inline pour le bouton 'voir'
style pour ##image##
- image-style: classe et style pour l'image
- info-style: classe et style pour le contenu du fichier .info. Ajoute un bloc DIV
Label du fichier
- label-replace: liste des remplacements sous la forme ancien:nouveau, ... BBcode admis
Format pour les mots-clés
- format-date = lang[en=m/d/Y H:i;fr=d/m/Y H:i]: format pour la date. ex: 'd/m/Y H:i'
- prefix-date-size: ou le nombre de caractères pour définir la date. 13 si YYYYMMDDHHMM-, 11 si YYYY-MM-DD-
Style CSS
- id: identifiant
- class: classe(s) pour bloc parent
- style: style inline pour bloc parent
- item-style: classe et style inline pour un bloc fichier
- css-head (base-css): règles CSS ajoutés dans le HEAD
date actuelle :
{up php=echo date('d-m-Y H:i:s');}
langage :
{up php=echo JFactory::getLanguage()getTag(); }
nom user :
{up php= $user = JFactory::getUser(); echo ($user->guest!=1) ? $user->username : 'invité'; }
- php: le code PHP
- authorized-functions: liste des exemptions à la liste des fonctions bannies. séparateur virgule
Style CSS
- tag = div: balise utilisée pour les classes, styles et id si class ou style définis
- id: identifiant
- class: classe(s) ou style pour le bloc retour'
- style: classe(s) ou style pour le bloc retour'
Divers
- filter: conditions. Voir doc action filter (v1.8)
{up php_error}
// dev (defaut) ou 0, min, maxA METTRE A LA FIN DE L'ARTICLE (UP commence par la fin!)
- php_error = dev: mode rapport d'erreurs : none, 0, min, max, dev
- id: identifiant
{up popover=texte appel en bbcode}
contenu popover{/up popover}
- popover: bbcode pour élément déclencheur
Style de la fenêtre popup
- max-height: hauteur maxi du popover (ex: 90vh)
- pop-bg-color: couleur de fond du popover
- pop-class: classe du popover
- pop-style: style inline du popover
Style de l'élément déclencheur
- tag = button: balise pour élément déclencheur
- id: id genérée automatiquement par UP
- class: classe(s) pour element déclencheur
- style: style inline pour element déclencheur
- css-head (base-css): style ajouté dans le HEAD de la page
- filter: conditions. Voir doc action filter
paramètres Javascript pour la configuration du popover
- width (l,largeur,w) = 250: largeur du popover en px
- top (t) = false: true : popover au-dessus du trigger, sinon au-dessous
- arrow = true: affichage de la fleche
- offset: décalage entre trigger et popover
- viewportSideMargin = 10: Espace à laisser sur le côté lorsqu'il est contre le bord de la fenêtre (pixels)
- fadeInDuration = 65: Durée de l'animation de fondu enchaîné popover (ms)
- fadeOutDuration = 65: Durée de l'animation de fondu sortant du popover (ms)
- preventHide = true: Empêcher le masquage lors d'un clic dans le popover
- onShow: fonction à exécuter lorsque le popover est affiché. c'est l'élément déclencheur et le premier argument passé à la fonction est l'élément popover (tous deux enveloppés dans jQuery).
- onHide: Callback à exécuter lorsque le popover est masqué. Identique à onShow.
{up popup=5s}
contenu popup{/up popup}
Ouvre le popup 5 secondes après le chargement de la pagesyntaxe
{up popup=50%}
contenu popup{/up popup}
Ouvre le popup à la moitié de la pagesyntaxe
{up popup=#bloc}
contenu popup{/up popup}
Ouvre le popup quand le haut du bloc #bloc est en haut de la zone visible du navigateurMode et conditions d'exécution
- popup = 5s: Délai en sec (15s), position dans la page (50%) ou sélecteur de bloc (#bloc)
- scroll-offset = 3: x = tolérance avant-après pour le scroll. x1-x2 = avant et après
- filter: condition pour exécuter l'action
- cookie-duration: nombre de jours de conservation des cookies. 0 pour la session ou -1 pour ignorer
Position et style de la fenêtre surgissante
- popup-position: position YX du popup : TL, TC, TR, CL, CC, CR, BL, BC, BR
- popup-style: classe ou style pour la fenetre popup
Arrière-plan
- overlay-lock = 1: 1: le popup bloque la navigation sur la page
- overlay-style: classe ou style pour masquer/atténuer le contenu
Bouton fermeture popup
- close-only-button = 1: 1: fermeture uniquement par le bouton, 0: en cliquant hors du popup
- close-style: classe ou style pour la fenetre popup
- close-label = ×: texte ou symbole pour le bouton. BBCode et action UP admis
Animation
- animation-in: classe unique pour animation ouverture du popup
- animation-out: classe unique pour animation fermeture du popup
- animation-target = popup: popup ou overlay: cible de l'animation
Divers
- id: id genérée automatiquement par UP. A préciser pour les cookies dans les modules
- css-head (base-css): style ajouté dans le HEAD de la page
{up printer=texte bouton}
le contenu à imprimer {/up printer}
- printer = ⎙ Imprimer: texte du bouton
- selector: sélecteur CSS du bloc à imprimer
Position du bouton
- btn-before: le bouton est après le contenu à imprimer
- btn-display-on-print: 0 = masque le bouton sur l'impression
Divers
- filename: nom du document si impression PDF
- id: identifiant
Style CSS du bouton
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): style ajouté dans le HEAD de la page
{up qrcode=type | xxx=...}
- qrcode = text: type de QRCode : text/url/sms/email/phone/location/wifi/contact
Style du QRCode
- size = 200: Largeur
- margin: Espace autour de l'image QR
- light: Code hexadécimal de la couleur de fond du QRcode. ex: FFFFFF = blanc
- dark: Code couleur hexadécimal du QRcode. ex: 000000 = noir
- centerImageUrl: URL absolue vers image au centre du qrcode
- centerImageSizeRatio: ratio image / qrcode
- centerImageWidth: Largeur de l'image centrale en pixels
- centerImageHeight: Hauteur de l'image centrale en pixels
Les types de contenus
- name: nom pour contact
- text: texte libre pour text, sms, email, contact
- phone: numéro de téléphone pour sms, tel, contact
- url: site Internet pour url, contact
- email: adresse email pour email, contact
- subject: sujet pour email
- latitude: pour geo
- longitude: pour geo
- address: adresse pour contact
- ssid: identifiant point d'accés pour wifi
- auth = WPA: WPA ou WEP pour wifi
- password: clé wifi du point d'accés pour wifi
Divers
- alt: texte alternatif, si le qrcode n'est pas affiché
- encoding = UTF-8: code pour texte OBSOLETE
Style CSS
- id: identifiant
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
{up random=1;2;3}
-> une des 3 valeurs au hasard{up random=1;2;3 | maxi=2 | sep-out=;}
-> deux des 3 valeurs au hasard séparées par un point virgule{up random=1,2,3 | sep-in=,}
-> une des 3 valeurs séparées par une virgule au hasard{up random=dossier/*.{jpg,ˆpng}
} -> un des fichiers jpg ou png dans le dossier{up random=dossier/fichier.csv}
-> une des valeurs dans le fichier csv{up random}
val1{===}
val2{===}
val3{===}
valN{/up random}
-> une des valeurs au hasard- random: liste des valeurs, fichier txt ou csv avec les valeurs, chemin vers fichiers
- maxi = 1: nombre de valeurs retournées
- sep-in = ;: séparateur pour la liste des valeurs en entrée
- sep-out = ;: séparateur pour la liste des valeurs en sortie
- csv-numcol: numéro de la colonne d'un fichier .csv
- csv-title = 1: 1 si la 1ere ligne d'un fichier .csv contient les titres
- mask = *.*: masque pour sélection des fichiers d'un dossier. ex: *\[ab\].[jpg,png] -> [ab]*.{jpg,png}
- msg-empty: message si aucun argument en entrée
Mise en forme du retour
- main-tag (block): 0=liste texte ou balise du conteneur pour support id, class et style
- item-tag = div: 0=liste texte ou balise du conteneur pour support id, class et style
- id: identifier
- main-style: classe et style inline pour bloc principal
- item-style: classe et style inline pour les blocs item
- css-head (base-css): style ajouté dans le HEAD de la page
{up readmore=texte bouton | textless=replier}
contenu caché {/up readmore}
- readmore: texte bouton OUVRIR (idem textmore)
- btn-position = after: emplacement des boutons. before=au-dessus, after=au-dessous
Texte et style des boutons
- textmore = lire la suite: texte bouton OUVRIR
- textmore-style: classe et style pour le bouton OUVRIR
- textmore-class: classe et style pour le bouton OUVRIR
- textless = replier: texte bouton FERMER
- textless-style: classe et style pour le bouton FERMER
- textless-class: classe et style pour le bouton FERMER
Style pour le panneau contenu
- panel-style: classes et style pour le contenu (v2.6)
- panel-visible: hauteur visible du contenu quand masqué (px ou sélecteur CSS)
- panel-actif: événement javascript sur la partie visible du contenu pour dérouler/ enrouler le contenu.
- panel-overlay: affiche un dégradé pour masque le bas du panel-visible. (vide=style standard ou règles CSS)
- panel-speed: vitesse d'apparition du contenu. Par défaut: 750ms
Style CSS des boutons
- id: identifiant
- class = bg-grisPale bg-gris bg-hover-grisClair p1 tc: classe(s) pour les boutons OUVRIR et FERMER
- style: idem
- css-head (base-css): règles CSS ajoutées dans le HEAD
{up replace=ancien:nouveau, ...}
- replace: liste des remplacements sous la forme ancien:nouveau, ... BBcode admis
- sep-item: séparateur entre les groupes ancien:nouveau. virgule par défaut
- sep-oldnew = :: séparateur entre les parties recherche et remplace. 2 points par défaut
- tags: vide: conserve les balises autorisées par défaut, liste (a,b,p) ou en plus des balises par défaut (+a,b,p)
- regex: 1 si la partie recherche est une expression régulière
{up sameheight}
< div>...< /div>
< div>...< /div>
{/up sameheight}
note: gestion de la largeur avec l'option "css-head" qui ajoute du code css dans le head
exemple: css-head=.sameheight[float:left;width:30%;]
Attention: remplacer les
{}
par []- sameheight: inutilisé
- id:
- class: classe(s) pour bloc principal
- style: style pour bloc principal
- css-head (base-css): code css libre dans le head. attention: ] au lieu de }
{up scroll-indicator}
- scroll_indicator: aucun argument
- bg-color: couleur de base du cercle (rgba() ou #RRGGBBAA )
- color: couleur du segment indicateur (rgba() ou #RRGGBBAA )
- size: largeur du segment indicateur (1 à 100)
Style CSS
- id: Identifiant
- css-head (base-css): style ajouté dans le HEAD de la page
{up scroller}
suite d'éléments{/up scroller}
Attention :
- définir un style="height:..." aux images (pas de height="...")
- scroller: nombre d'élément ou hauteur du bloc en px
Style CSS
- id: Identifiant
- class: classe(s) pour la balise principale
- style: style inline pour la balise principale
- css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
paramètres Javascript pour configuration
- newsPerPage = 4: nombre de blocs par page. Idem option principale
- navigation = true: affiche la navigation haut/bas
- autoplay = true: active la lecture automatique
- direction = up: sens de défilement (up/down)
- animationSpeed = normal: normal, slow ou fast
- newsTickerInterval = 4000: autoplay interval en ms
- pauseOnHover = true: arrêt défilement lors survol souris
{up site-stats}
: incrémente le fichier dir-logs/id-alias_article.log{up site-stats=*}
: Calcule et affiche les stats pour TOUS les fichiers{up site-stats=0}
: Calcule et affiche les stats pour l'article courant{up site-stats=12}
: Calcule et affiche les stats pour l'article d'ID=12{up site-stats=mask}
: affiche les stats des fichiers correspondant au maskL'affichage est réalisé à l'aide de templates et de mots clés :
--- tmpl-lign : résultat pour un fichier log (un article)
##count## : nombre total de visites uniques pour un article
##id##, ##alias##, ##title##, ##created##, ##updated## : données de l'article
##catid##, ##catalias## : id et alias de la catégorie de l'article
##detail## : affiche le détail des visites par année, mois, langue
--- tmpl-detail-period : modèle pour une période de ##detail##
Les mots clés pour les sous-templates de ##detail##
Détail par articles : ##PERIOD##, ##TOTAL##, ##LANG##
Motif répété pour ##LANG## : ##LANG##, ##COUNT##
Détail par nombre de pges vues par un visteur : ##PERIOD##, ##TOTAL##, ##PAGES-VISITORS##
Motif répété pour ##PAGES-VISITORS## : ##NBPAGES##, ##NBVISITORS## :
Options pour enregistrement du suivi
- site_stat: vide : enregistre l'accès, sinon masque= *:tous, 1:courant, ID article ou masque fichiers (id-alias)
- catid-include: liste des id catégories à inclure, séparateur virgule
- catid-exclude: liste des id catégories à exclure, séparateur virgule
- usergroup-list: liste des groupes d'utilisateurs à exclure, séparateur virgule
- ip-list = 127.0.0.8, localhost: liste des IP à ignorer. les botnets sont ignorés, séparateur virgule
- bots-list = bot,spider,crawler,libwww,search,archive,slurp,teoma,facebook,twitter: liste de bots exclus
Options pour affichage résultats
- view-catid-include: liste des catégories prise en compte
- detail-max-month: Nombre de mois affichés. 0: tous
- tmpl-lign = ##ALIAS## ##CATALIAS## ##DETAIL##: modele d'affichage pour un article ou total
- tmpl-detail-period = [b class="t-blue bg-grisClair ph1"]##PERIOD##[/b] ([b]##TOTAL##[/b] - ##LANG##): template pour une période
- tmpl-detail-period-lang = [i]##LANG##[/i]:[b]##COUNT##[/b]: Sous-template pour un langage
- tmpl-total-detail-period = [b class="t-blanc bg-brun ph1"]##PERIOD##[/b] ([b]##TOTAL##[/b] - ##PAGES-VISITORS##): template pour le nombre de pages vues par les visiteurs
- tmpl-total-detail-PV = [i]##NBPAGES##p[/i]:##COUNT##: Sous-template groupe de nombres de pages par visiteurs
- date-format = lang[en=%B %se, %Y; fr=%e %B %Y]: format pour la date
- no-content-html = lang[en=No statistical data; fr=Aucune donnée statistique]: message affiché si aucun résultat pour la sélection
Paramètres consolidation pour prefs.ini
- keep-days = 3: nombre de jours non compactés en mois. Aujourd'hui non inclus. Ces jours ne sont pas comptabilisé dans leur mois
- keep-months = 12: nombre minimum de mois non compactés en années. (0=année courante, 12=année courante et précédente)
- delay-unique = 300: delai (en secondes) entre 2 visites d'une page par une IP pour la considerer comme unique
- bots-nbpages = 200: nb pages/jour pour suspision de robots
Classe(s) et style(s) pour la ligne total
- total-style = bg-grisClair: style pour la dernière ligne
Gestion style d'une ligne
- item-tag: balise pour les lignes de la liste
- item-class: classe pour les lignes de la liste
- item-style: style pour les lignes de la liste
Gestion style du bloc principal
- main-tag (block): balise pour la liste
- id: identifiant
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): style ajouté dans le HEAD de la page
Pour webmaster - à ajouter dans le fichier prefs.ini
- dir-logs = up/site-stat: dossier pour logs
{up site-visit}
: incrémente le fichier log-path/alias_article.stat{up site-visit=nom}
: incrémente le fichier log-path/nom.stat{up site-visit | info}
: liste le contenu de tous les fichiers .stat dans log-path{up site-visit | info=xxx}
: liste le contenu de tous les fichiers action-xxx.stat dans log-pathLes données sauvées dans xxx.stat sont ##alias## : le nom du fichier, puis dans l'ordre :
##counter## : le cumul des visites
##lastdate## : la date dernère consultation
##id##, ##alias##, ##title##, ##created##, ##updated## : données de l'article
##catid##, ##catalias## : id et alias de la catégorie de l'article
##detail## : affiche le détail des visites par année, mois, langue
Options principales
- site_visit: nom du compteur, si vide = alias article (si info=0)
- catid-include: liste des id catégories à inclure, séparateur virgule
- catid-exclude: liste des id catégories à exclure, séparateur virgule
- usergroup-list: liste des groupes d'utilisateurs à exclure, séparateur virgule
- ip-list = 127.0.0.0, localhost: liste des IP à ignorer. les botnets sont ignorés, séparateur virgule
- bots-list = bot,spider,crawler,libwww,search,archive,slurp,teoma,facebook,twitter: liste de bots exclus
Options pour affichage résultats
- info: masque des fichiers stat et log dont le contenu est listé. vide = article courant, * = tous ou masque fichier
- info-template = ##counter## visites au ##lastdate##: modele d'affichage
- info-catid-include: liste des catégories prise en compte
- info-sort: tri de la liste. Par défaut ##alias##. Tous les mots sont utilisables
- info-sort-order = asc: sens de tri sur l'ensemble des mots-clé de info-sort
- detail-period-style: style ajouté pour la période de la liste détaillée
- use-bbcode: utilise le format bbcode dans le résultat. A utiliser pour un export en CSV
- date-format = lang[en=%B %se, %Y;fr=%e %B %Y]: format pour la date
- no-content-html = "lang[en=No statistical data;fr=Aucune donnée statistique]": message affiché si aucun résultat pour la sélection
Gestion style d'une ligne
- item-tag: balise pour les lignes de la liste
- item-class: classe pour les lignes de la liste
- item-style: style pour les lignes de la liste
Gestion style du bloc principal
- main-tag (block): balise pour la liste
- id: identifiant
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): style ajouté dans le HEAD de la page
Pour webmaster - à ajouter dans le fichier prefs.ini
- log = 1: argumente un fichier nom_compteur.log avec IP, langage et date
- dir-logs = up/site-visit: dossier pour logs
{up sitemap}
- sitemap: nom menutype exclus. séparateur: virgule
- cron = +1 semaine: délai entre 2 générations automatiques
- frequency: fréquence : always, hourly, daily, weekly, monthly, yearly, never
- priority: priority de 0.1 à 1
- menutype-exclude: nom menutype à exclure (idem option principale)
- info: afficher le nombre de liens et la liste des pages non indexées
- id: identifiant
{up slider-owl |items=2}
< div>...< /div>
< img src="/...">
< a href="/..">< img src="/...">< /a>
{/up slider-owl}
- slider_owl: aucun paramètre nécessaire
- max-height = 1: égalise la hauteur de tous les blocs
Style CSS
- id: id genérée automatiquement par UP
- class: classe(s) ajoutées au bloc principal
- style: style inline ajouté au bloc principal
- css-head (base-css): style ajouté dans le HEAD de la page
JS : autoplay
- autoPlay: 0 ou durée affichage image en millisecondes
- slideSpeed = 200: vitesse de transition en millisecondes
JS : pagination
- paginationSpeed: durée changement en millisecondes
- pagination = true: affiche pagination
- paginationNumbers: affiche numéros à l'intérieur des boutons de pagination
JS : navigation
- goToFirst = 1: Retour sur premier élément si lecture automatique à la fin
- goToFirstSpeed = 1000: vitesse de l'option goToFirst en millisecondes
- navigation = false: affichage boutons "next" et "prev"
- navigationText = "prev,next": boutons sans texte: "navigationText: false"
JS : nombre d'images selon largeur écran
- responsive = true: adaptation sur petits ecrans
- items: nombre maxi d'éléments affichés en même temps sur la plus grande largeur de navigateur
- itemsDesktop = [1199, 4]: cela vous permet de prédéfinir le nombre de diapositives visibles avec une largeur de navigateur particulière. Le format est [x, y] où x = largeur du navigateur et y = nombre de diapositives affichées. Par exemple, [1199,4] signifie que si (window <= 1199) {affiche 4 diapositives par page} Vous pouvez également utiliser "itemsDesktop: false" pour ignorer ces paramètres. Pour bien comprendre comment cela fonctionne, consultez ma démo personnalisée
- itemsDesktopSmall = [979, 3]: voir ci-dessus
- itemsTablet = [768, 2]: voir ci-dessus
- itemsMobile = [479, 1]: voir ci-dessus
{up slider-tiny |items=2}
< div>...< /div>
< img src="/...">
< a href="/..">< img src="/...">< /a>
{/up slider-owl}
Syntaxe 2 :
{up slider-tiny=dossier_images |items=2}
- slider_tiny: chemin vers dossier ou rien
Options pour dossier d'images
- image-extension = jpg,JPG,jpeg,JPEG,png,PNG,webp,WEBP:
- legend: Ajoute le nom humanisé du fichier comme légende
- legend-template: modèle pour légende séparée par 3 tirets. ex: [span style=""]##1##[/span][span style=""]##after@##[/span]
- sort-by = name: date, random
- sort-order = asc: asc ou desc
- maxi: nombre d'images retenues
- image-style: classes/style appliqués aux images
- zoom-suffix: si indiqué, seules les images avec ce suffixe sont utilisées. ! devant inverse la sélection
Responsive
- responsive-breakpoints = 0, 480, 960: liste des largeurs d'écran en px pour les points de changement
Boutons précédent-suivant
- btn-prev = préc: contenu du bouton précédent. BBcode accepté
- btn-next = suiv: contenu du bouton suivant. BBcode accepté
style
- id: id genérée automatiquement par UP
- slider-style: classe(s) ou styles pour le slider
- item-style: classe(s) ou styles ajoutés à chaque items du slider
- class: classe(s) ajoutées au bloc principal
- style: style inline ajouté au bloc principal
- css-head (base-css): style ajouté dans le HEAD de la page
sont responsives
Nombre et présentation des items
- items = 1: [RESP] Nombre de diapositives affichées dans la fenêtre.
- startIndex: [RESP] l'index du 1er item affiché
- slideBy = 1: [RESP] nombre d'items déplacés en un clic. page: egal à items
- autoHeight: [RESP] 1: La hauteur du conteneur change en fonction de la hauteur des items visibles
- edgePadding: [RESP] largeur visible des items joutant les items visualisés (en "px")
- gutter: [RESP] Espace entre les items (en "px").
- center: [RESP] Centre l'item actif dans la fenêtre.
- rewind: revient au début lorsque la fin est atteinte et vice-versa
responsive
- responsive: chaine json pour définir les options pour différentes largeurs de fenêtre
navigation boutons
- controls = 1: [RESP] affiche les boutons précédent/suivant et active le déplacement au clavier
- controlsPosition = top: position des boutons (top, bottom ou center)
- arrowKeys: [RESP] Permet d'utiliser les touches fléchées pour changer de diapositive.
navigation dots
- nav = 1: [RESP] affiche la navigation par points et active toutes les fonctionnalités
- navPosition = top: position des points (top, bottom ou center)
- navAsThumbnails: Si true, les points sont des vignettes toujours visibles même si plus d'un item est affiché dans la fenêtre.
Autoplay
- autoplay: [RESP] Active/désactive le changement automatique des items.
- autoplayTimeout = 5000: [RESP] délai avant changement items (en "ms").
- speed = 300: [RESP] Vitesse de l'animation de transition (en "ms").
- autoplayDirection = forward: sens déplacement : forward ou backward
- autoplayPosition = top: position du bouton marche/arrêt (top, bottom, center, none)
- autoplayHoverPause: [RESP] Arrêt lors survol de la souris.
- autoplayText = ⏵,⏸: [RESP] Texte ou bbcode du bouton marche/arrêt
- autoplayResetOnVisibility = 1: [RESP] arrêt déplacement tant que la page est invisible
Animation
- mode = carousel: comportement de l'animation. carousel, glisse sur le côté, gallery: animations de fondu de toutes les diapositives en même temps.
- animateIn = tns-fadeIn: classe animation entrée
- animateOut = tns-fadeOut: classe animation sortie
- animateDelay: délai entre chaque animation de la galerie (en "ms").
Options spécifique pour les mobiles
- touch = 1: [RESP] Active la détection d'entrée pour les appareils tactiles.
- mouseDrag: [RESP] Change les diapositives en les faisant glisser.
{up slideshow_billboard=chemin_sous_dossier}
syntaxe 2:
{up slideshow_billboard}
< img src="/images/img.jpg" alt="légende"> // image avec légende dans alt
< a href="#">< img src="/img.jpg">< /a> // image avec lien
{/up slideshow_billboard}
- slideshow_billboard: si indiqué, toutes les images de ce dossier (ordre alpha)
- label = 1: affiche la légende des images (attribut alt ou nom fichier humanisé).
- zoom-suffix: si indiqué, seules les images avec ce suffixe sont utilisées
Style CSS
- id: id genérée automatiquement par UP
- class: classe(s) ajoutées au bloc principal
- style: style inline ajouté au bloc principal
- css-head (base-css): style ajouté dans le HEAD de la page
paramètres Javascript pour configuration
- ease = easeInOutExpo: mode de transition
- speed = 1000: durée des transitions en millisecondes
- duration = 5000: durée entre les changements d'images
- autoplay = 1: démarrage automatique
- loop = 1: diaporama en boucle si exécution automatique est vraie
- transition = left: "fade", "up", "down", "left", "right"
- navType = list: "controls", "list", "both" or "none"
- styleNav = 1: applies default styles to nav
- includeFooter = 1: afficher/masquer le pied de page (légende et navigation)
- autosize = 1: hauteur diaporama fixe. calcul sur 1ère image
- resize: tente de détecter automatiquement la taille de chaque diapositive
- stretch = 1: étire les images pour remplir le conteneur
{up snippet=foo}
// charge un fichier up/snippet/foo.html{up snippet=foo}
texte{/up snippet}
// écrit le texte dans le fichier up/snippet/foo.snippet{up snippet}
// affiche la liste de tous les fichiers du dossier up/snippet/{up snippet=* | delete}
// supprime tous les snippets- snippet = *: nom du fichier à charger/créer. vide ou mask pour list. ex: filter*
- strip-tags: supprime toutes les balises HTML
- delete: supprime le ou les fichiers passées comme argument principal
- id:
- dir-base = up/snippet: dossier pour les snippets. Utilisez custom/prefs.ini
site :
{up snowfall=image}
bloc :
{up snowfall=image | selector=bloc}
- snowfall = snow-01.png: image ou dossier
- selector = body: cible pour snowfall
Taille, vitesse et nombre des images
- nb = 20: nombre d'images affichées en même temps
- size = 20/40: taille mini/maxi des images en px
- speed = 1/5: vitesse mini/maxi des images
Style CSS
- id: identifiant
- class: classe(s) pour bloc
- style: style inline pour bloc
- center: style et classe pour centrage vertical du contenu entre shortcodes
- z-index = 99: z-index des images
Divers
- filter: conditions. Voir doc action filter
{up sound_hover=fichier_son }
image{/up sound_hover}
- sound_hover: fichier_son
- evenement = onmouseenter: ou onclick, onmouseover...
Style CSS
- tag = div: balise pour le bloc. span pour un bloc inline
- id: id genérée automatiquement par UP
- class: classe(s) pour le bloc parent
- style: style pour le bloc parent
{up span=class_and_style}
content{/up span}
- span: classes et style (séparateur : point-virgule)
- id: si indiqué, l'attribut ID est ajouté à la balise SPAN
- class: classe(s) pour bloc (méthode traditionnelle)
- style: style inline pour bloc (méthode traditionnelle)
- css-head (base-css): style ajouté dans le HEAD de la page
{up sql=nom_table | ...}
Terminologie:
row : ligne de la table
col : cellule. Colonne de la table
tag ou motclé : ##nomcol##
- sql: nom de la table
- select = *: listes des colonnes
- where: commande SQL : where
- order: commande SQL : order
- group: commande SQL : group
- innerjoin: commande SQL : innerjoin
- outerjoin: commande SQL : outerjoin
- leftjoin: commande SQL : leftjoin
- rightjoin: commande SQL : rightjoin
- setlimit: commande SQL : setlimit
- variable-*: remplace ##variable-X## dans les options ci-dessus
informations sur la base de données
- dbinfos: vide= la liste des tables OU nom_table = la liste des colonnes
- no-prefix-auto: utiliser le nom de la table sans ajouter le prefix #__
mise en forme du résultat
- presentation = table: présentation du résultat : list,table,div ou 0
- template (item-template): modèle mise en page
- header: 1 ou vide pour utiliser les mots-clés, sinon titres séparés par des points-virgules
- sort: type de tri par colonne sous la forme: i,3-f-s. i:int, s:string, f:float. ,3 indique un tri secondaire sur la 3e colonne
- sort-first: nom ou position de la colonne triée en premier
- col: alignement et largeur des colonnes sous la forme x-D-C5-100 pour rien-droite-centre 5%-100% (voir doc)
- no-content-html = aucun résultat: essage si echec requete
Style CSS pour afficher le résultat
- id: identifiant
- main-class = up: classe(s) pour bloc
- main-style: style inline pour bloc
- item-class: classe(s) pour ligne
- item-style: style inline pour ligne
- css-head (base-css): style ajouté dans le HEAD de la page
{up tab}
< h4>texte onglet< /h4>
< p>texte du panneau< /p>
< img src="/..">
{/up tab}
Sur mobile ou sur demande, l'affichage est en mode accordion
script JS adapté par Lomart pour gestion répartition verticale
- tab = tab: tab ou accordion
- auto: 0 ou delai en millisecondes pour changement automatique d'onglet
Style des titres (onglets)
- title-tag = h4: balise utilisée pour les titres onglets
- title-style: classe(s) et style inline onglets
- title-class: classe(s) onglets (obsolète)
Style des panneaux de contenu
- content-style: classe(s) et style inline contenu
- content-class: classe(s) contenu (obsolète)
- espace-vertical = 1: 0, 1 ou 2 : niveau des éléments à répartir
Style du bloc principal
- id: identifiant
- style: classe(s) et style(s) bloc principal
- class: classe(s) bloc principal (obsolète)
- css-head (base-css): règles CSS mises dans le head
paramètres Javascript pour configuration
- side: left ou right
- active_tab: 1 a N
- plugin_type: accordion (interne, ne pas modifier)
- content_display = block: interne, ne pas modifier, défini par espace-vertical
{up table-par-colonnes}
< table> ... < /table>
{/up table-par-colonnes}
Les lignes sont empilées par colonnes. Très pratique pour des plannings
- table_by_columns (table_par_colonnes): rien
- model = up-stacktable: nom d'un fichier CSS prévu par le webmaster pour toutes les tables de la page
- max-height: permet de limiter la place en hauteur par l'affichage d'un ascenseur
- breakpoint = 720px: bascule en vue responsive
- key-width = 35%: largeur de la première colonne en vue responsive
- title-style: style pour la ligne titre en vue responsive
Style CSS
- id: Identifiant
- style: style inline pour balise table
- class: classe(s) pour balise table (obsolète)
- css-head (base-css): permet d'ajouter des style à la table incluse
{up table-par-lignes}
< table> ... < /table>
{/up table-par-lignes}
les colonnes sont empilées par lignes avec la possibilité de les déplacer, de les fusionner, de supprimer le titre, d'afficher seulement certaines colonnes. https://github.com/codefog/restables/blob/master/README.md
.
IMPERATIF : Les titres des colonnes doivent être dans une balise HEAD
- table_by_rows (table_par_lignes): rien
- breakpoint = 720px: bascule en vue responsive
- max-height: max-height pour la table
Style CSS
- id: identifiant
- style: style inline pour balise table
- class: classe(s) pour balise table (obsolète)
- css-head (base-css): permet d'ajouter des style à la table incluse
paramètres Javascript pour configuration
- merge: fusion de colonnes. 1:[2,3],5:[6] = 2&3 avec 1 et 6 avec 5
- move: déplacement colonne. 1:0,6:1 = 1 au debut et 6 en 2eme
- skip: non visible. [3,5] = col 3 et 5 non visible
- span: [2,4] = valeur sans libellé (eq: colspan)
{up table-fixe}
< table> ... < /table>
{/up table-fixe}
col-left : nombre de colonnes toujours visible.
Une barre de défilement est ajoutée pour les autres colonnes.
- table_fixe: aucun argument
- col-left: nombre de colonnes fixées à gauche
- max-height: max-height pour le bloc parent
Style CSS
- id: identifiant
- style: classes et styles pour le bloc parent
- class: classe(s) pour le bloc parent (obsolète)
- css-head (base-css): permet d'ajouter des style à la table incluse
Une barre de défilement est ajoutée pour les autres colonnes.
{up table-flip}
< table> ... < /table>
{/up table-flip}
- table_flip (table_permute): aucun argument
Style CSS
- id: identifiant
- style: classes et styles inline pour balise table
- class: classe(s) pour balise table (obsolète)
- css-head (base-css): permet d'ajouter des style à la table incluse
{up table-sort}
LA TABLE{up table-sort}
- table_sort: Aucun argument
- col-type: mode de tri des colonnes. n=numerique, a=alphanum, i=alphanum case insensitive, d=date
- col-init: n° de la colonne triée au chargement et sens (asc, desc)
champs pour recherche
- placeholder = lang[en=Search;fr=Rechercher]: texte dans la zone recherche
- globalSearch: vide= recherche sur toutes les colonnes, sinon liste des colonnes (1,2,5)
Pagination
- pagination: nombre de lignes par pages ou 0 pour désactiver
- pagination-class: classe pour les boutons
- pagination-class-active: classe pour le bouton actif
Style CSS
- id: id genérée automatiquement par UP
- class: classe(s) ajoutées à la table
- style: style inline ajouté à la table
- css-head (base-css): style ajouté dans le HEAD de la page
paramétres JS
- sortable = 1: Activer le tri
- searchable = 1: Activer la recherche
{up tabslide=btn-text | tabLocation=top}
contenu{/up tabslide}
utilisation :
- un sommaire sur le coté du site
- un module connexion
l'onglet
- tabslide: titre de l'onglet
- tab-style: classes et styles inline pour onglets
- tab-class: classe(s) pour onglet (obsolète)
le panneau
- id: identifiant
- panel-style: classes et styles inline pour panneau
- panel-class: classe(s) pour panneau (obsolète)
Options JS disparues - conservés pour compatibilité
- speed = 300: OBSOLETE voir bounceSpeed
- positioning = fixed: or absolute, so tabs move when window scrolls
- toggleButton = .tab-opener: not often used
paramétres JS : définition de l'onglet
- tabLocation = left: position : left, right, top ou bottom
- onLoadSlideOut: slide out after DOM load
- clickScreenToClose = 1: fermer l'onglet lorsque le reste de l'écran est cliqué
- tabHandle = .handle: Sélecteur JQuery pour l'onglet, peut utiliser #
- action = click: mode ouverture : 'hover' ou 'click'. Forcer à click sur mobile
- hoverTimeout = 5000: sélai en ms pour garder l'onglet ouvert après la fin du survol - uniquement si action = 'hover'
- offset = 200px: distance pour top or left (bottom or right si offsetReverse est vrai)
- offsetReverse: true= aligné a droite ou en bas
- otherOffset = null: si défini, la taille du panneau est définie pour maintenir cette distance à partir du bas ou de la droite (haut ou gauche si offsetReverse)
- handleOffset = null: Si null, détecte la bordure du panneau pour bien aligner la poignée, sinon la distance en px
- handleOffsetReverse: si vrai, poignée alignée avec la droite ou le bas du panneau
paramétres JS : Animation
- bounceDistance = 50px: distance autorisée pour le rebond
- bounceTimes = 4: nombre de rebonds si 'bounce' est appelé
- bounceSpeed = 300: vitesse d'animation des rebonds
paramétres JS : image pour l'onglet
- pathToTabImage = null: image facultative à afficher dans l'onglet
- imageHeight = null: hauteur image
- imageWidth = null: largeur image
paramétres JS : pour expert
- onOpen = function () {}: appelé après l'ouverture
- onClose = function () {}: appelé après la fermeture
- onSlide = function () {}: appelé après l'ouverture ou la fermeture
{up text-blink}
content{/up text-blink}
// clignotement simplesyntaxe 2 :
{up text-blink=color:red}
content{/up text-blink}
// style de l'alternancesyntaxe 3 :
{up text-blink=prefset}
content{/up text-blink}
// jeu d'optionssyntaxe 4 :
{up text-blink=css_class}
content{/up text-blink}
// classe CSS- text_blink: rien, prefset, classe ou style(s) CSS
- speed = 1.5: durée de l'animation
- function = ease-in-out: ease, ease-in, ease-out, ease-in-out, linear, ...
- count = infinite: nombre de cycle ou infinite pour clignotement permanent
- id:
- main-tag (block) = span:
- class: style et classe(s) pour bloc
- style: style et classe(s) pour bloc
- css-head (base-css): style ajouté dans le HEAD de la page
{up up text-fit=option_principale}
texte{/up text-fit}
- text_fit: sélecteur du bloc. ex: h1, h1.foo, #id, h2#id, ...
Définition des valeurs minimales/maximales
- blocsize = 320-960: largeur mini-maxi en px du bloc conteneur
- fontsize = 1-1.8: taille mini-maxi en em de la police. Autre unité : em,rem,px,ex,%,vh,vw. ex : 16-32px
- lineheight = 1.33-1.25: hauteur de ligne mini-maxi. facteur multiplicateur de la taille de la police
- fontweight: graisse mini-maxi si police variable. ex: 400-900
Divers
- fontfile: chemin vers le fichier d'une police de caractère
- fontclass: nom de la classe attribué à la police
- container = parent: bloc utilisé pour calcul blocsize. parent ou self.
Style CSS
- tag = div: balise par defaut
- id: identifiant
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): style ajouté dans le HEAD de la page
{up text-typewriter=mot1, mot2, ..., motN}
syntaxe 2 :
{up text-typewriter}
alternatives dans blocs enfants {/up text-typewriter}
- text_typewriter: liste de mots séparés par des virgules
Style CSS
- id: identifiant
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): style ajouté dans le HEAD de la page
paramétres JS : vitesse affichage
- typeSpeed: vitesse de frappe en ms
- startDelay: délai en ms avant chaque série
- backSpeed: vitesse de l'espacement arrière en millisecondes
- backDelay = 700: délai en ms avant effacement
paramétres JS : gestion du fondu pour transition
- fadeOut = false: Fondu au lieu de retour en arrière
- fadeOutClass = typed-fade-out: classe CSS pour l'animation du fondu
- fadeOutDelay = 500: Durée du fondu en millisecondes
paramétres JS : affichage en boucle
- loop = false: chaînes en boucle
- loopCount = Infinity: nombre de boucles
paramétres JS : divers
- smartBackspace = true: n'efface que ce qui ne correspond pas à la chaîne précédente
- shuffle = false: mélange les phrases
- showCursor = true: montrer le curseur
- cursorChar = |: caractère pour le curseur
- autoInsertCss = true: insérer le CSS pour le curseur et le fadeOut dans le HTML
- attr = null: attribut pour la saisie. Ex: input placeholder, value, or just HTML text
- bindInputFocusEvents = false: lier le focus et le blur si élément est une entrée de texte
- contentType = html: 'html' ou 'null' pour texte brut
syntaxe
{up toc}
- toc: inutilisé
Style CSS
- id: id genérée automatiquement par UP
- class: classe(s) ajoutées au bloc principal
- style: style inline ajouté au bloc principal
- css-head (base-css): style ajouté au head de la page
JS: définir le contenu analysé
- content = [itemprop="articleBody"]: bloc analysé pour le sommaire
- selector = h2,h3,h4,h5,h6: liste des selecteurs utilisés pour le sommaire
- exclude = .notoc: liste sélecteur pour exclusion du sommaire
JS: Mise en forme du sommaire
- indexingFormats: format des index : nombres, lettres ou
- maxlen: longueur maxi des titres du sommaire
- heading: Titre du sommaire
JS: Divers pour experts
- elementClass = uptoc: class de la div navigation
- rootUlClass = toc-ul-root: class pour le bloc contenant la liste
- ulClass = toc-ul: class pour la liste
- levelPrefixClass = toc-level-: (interne) préfixe des classes
{up tooltip=texte info-bulle}
texte{/up tooltip}
- tooltip: texte de la bulle. bbcode permis
style et position de la bulle
- model: une des classes principales définies dans up-model.scss
- position = center: left, right
- bottom (b,bas): vrai pour afficher la bulle au-dessous
- width (l,largeur,w) = 250: largeur maxi de l'info-bulle
- offset: décalage vertical de info-bulle. Négatif=vers le haut
- opacity = 95: transparence de l'info-bulle
- open: info-bulle affichée au chargement de la page
Style CSS pour l'élément déclencheur
- id: identifiant
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
{up treeview}
liste UL/LI {/up treeview}
- treeview: aucun argument
icônes et ligne
- icon-folder = arrow: image pour les dossiers (noeuds)
- icon-file: image pour éléments feuilles
- icon-size: taille de l'icone. Ex: 48px,960:32px,1200:24px
- custom-icon: liste des icônes personnalisées pour création CSS inline
- line: ligne devant les items. 1 (ligne par defaut) ou attributs pour border
Ouverture automatique et délai
- expand-all: 1 pour ouvrir tous les noeuds
- expand: 1 pour ouvrir les noeuds de niveau 1
- delay: durée ouverture noeuds en msec
Boutons ouverture et fermeture
- btn-open-selector: sélecteur du lien 'Tout déplier'
- btn-close-selector: sélecteur du lien 'Tout déplier'
Style CSS
- id: identifiant
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): style ajouté dans le HEAD de la page
{up tweeter-timeline=}
voir : dev.twitter.com/web/embedded-timelines/parameters
- tweeter_timeline: tweet id
Paramétres pour API tweeter
- theme: light ou dark
- link-color: couleur des liens en hexa
- border-color: couleur des bordures en hexa
- height (h,hauteur) = 400: hauteur
- width (l,largeur,w): largeur
- tweet-limit: nombre maxi de tweet, sinon indéfini
- chrome: noheader nofooter noborders transparent noscrollbar
- lang = fr: code langage
Style CSS
- id: identifiant
- style: classes et style inline bloc parent
- class: classe bloc parent (obsolète)
{up upactionslist}
toutes les actions{up upactionslist=action1, action2}
une ou plusieurs actions{up upactionslist | md}
fichier marknote{up upactionslist | csv}
fichier CSV
*
*Sélection des actions listées
- upactionslist: liste des actions à récupérer. toutes par défaut
- exclude-prefix = _,x_: prefix des actions non listées. Separateur = comma
- without-custom: affiche les infos du dossier custom de l'action. 1 pour les masquer
Affichage du lien vers la démo
- demo = 1: afficher le lien vers la demo
Générer les fichiers JSON synonymes des noms utilisés par UP 'dico'
- make-dico: consolide le fichier principal dico.json avec ceux des actions
Création des fichiers documentation
- csv: fichier doc-actions.csv avec les options des actions
- comment: fichier 'comment-actions.csv' avec les infos des entêtes scripts pour analyse
- md: enregistre la documentation au format markdown dans plugins/content/up/doc-actions.md
Style CSS
- id: identifiant
- style: style ou class
- class: idem style
- filter: condition pour exécuter l'action
{up upbtn_makefile}
Sélection des actions listées
- upbtn_makefile: Vide pour toutes les actions, sinon liste des actions à inclure ou exclure (list-exclude=1).
- list-exclude: 0:uniquement les actions indiquées, 1: toutes sauf les actions indiquées
- without-custom: 1 sans les infos dans prefs.ini (v2.6)
mode d'affichage
- top10: liste des actions à dupliquer dans un groupe au début de la liste
- by-tags = 1: si 0, les actions sont dans l'ordre alpha sans notion de groupes (sauf top10)
Exportation des fichiers
- export-folder: sous-dossier de TMP pour sauver l'arborescence. ex : up-pref-foo
{up upPrefSet}
Sélection des actions
- upprefset: liste des actions ou vide pour toutes
- action-exclude: 1: toutes les actions sauf celles du paramétre principal
- prefset-exclude = icons,options: sections exclues
Format de la mise en page
- action-template = [h4]##action##[/h4]: présentation pour ##action##
- prefset-template = [b class="t-vertFonce"]##prefset##[/b] : [small]##options##[/small]: présentation pour ##prefset##
- info-template = [div class="bd-grey ph1"]##info##[/div]: présentation pour ##info##
- prefset-separator = [br]: séparateur entre items
- options-separator = [b class="t-vert"] | [/b]: les underscrores sont remplacés par des espaces
exportation des fichiers
- export-prefs: ou sous-dossier de TMP pour sauver l'arborescence. ex : up-pref-foo
Style CSS
- action-class: classes et style pour le bloc d'une action
- id: identifiant
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
{up upscsscompiler}
toutes les actions{up upscsscompiler=action1, action2}
une ou plusieurs actionsnote: les fichiers SCSS & CSS sont en racine des dossiers actions
Sélection des actions
- upscsscompiler: liste des actions à recompiler. toutes par défaut. 0 pour inactiver
- without-custom: sans prise en compte des personnalisations. Usage interne pour créer le zip de UP
- force: force la compilation de tous les SCSS. Par défaut: les SCSS plus récents que leur CSS.
- force-filter: oblige force si la condition est remplie
Divers
- mode = Compressed: Compressed, Compact, Crunched, Expanded, Nested
- info: affiche rapport compilation
- id: identifiant
{up upsearch=action1,action2 | regex=... | module}
Mots-clés pour template
##id## ##title## ##title-link## ##subtitle## ##cat## ##date-crea## ##date-modif##
##text## : résultat recherche
Critères de recherche
- upsearch: liste des actions (ou synonyme) séparées par des virgules
- regex: motif de recherche dans le shortcode ou dans tout le contenu si shortcode vide
- cat: liste id des categories d'articles, séparateur:virgule. vide = toutes
- module: pour recherche dans le champ 'params'. vide = tous, partie du nom du module
- no-published (no_published): 1 recherche dans tous les articles archivé, non publié, a la corbeille
Mise en forme du résultat
- sort-by = title: tri pour article: title, ordering, created, modified, publish_up, id, ... ou text pour contenu recherche
- sort-order = asc: ordre de tri : asc, desc
- only-one: 1 : afficher un seul resultat par article
- maxlen: nombre de caractères maxi pour le resultat
- template (item-template) = [p]##id## ; ##title-link## ; "##text##"[/p]: modèle pour retour. titre article et texte trouve pour tableau
- date-format = %Y-%m-%d: format pour les dates
- target = _blank: pour le lien sur article
Style CSS
- id: identifiant
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): style ajouté dans le HEAD de la page
{up website=URL}
par defaut, le texte affiche sous la vignette est l'URL sans http://
- website: URL du site
Affichage du site
- link = 1: affiche le lien au-dessous du screenshot
- link-text: texte affiche pour le lien et alt
- target = _blank: ou _self pour ouvrir le site dans le même onglet
Fréquence actualisation
- renew = 30: nombre de jours pour actualiser les vignettes. 0 = jamais (v2.2)
- timeout = 15: delai pour recupérer les infos du serveur Google (v2.2)
Style CSS
- id: identifiant
- style: classes et style inline pour bloc
- class: classe(s) pour bloc (obsolete)
- css-head (base-css): règles CSS définies par le webmaster (ajout dans le head) v1.8
{up website-preview=CSS_selecteur}
- website_preview = .com-content-article__body a: sélecteur CSS des liens à afficher
- mode = parenthover: mode chargement preview : parenthover, none, pageload
- width (l,largeur,w) = 256: largeur preview (px)
- height (h,hauteur) = 144: hauteur preview
- scale = .25: Echelle entre 0.1 et 1
Un shortcode est composé de :
{up
l'identifiant du plugin pour la recherche du shortcode dans les articles et modules.- une suite d'option=argument séparés par des caractères pipes (AltGr+6).
- la première option est le nom de l'action
- une option sans argument est considérée comme égal à vrai ou 1. (0=faux)
- le shortcode peut être sur plusieurs lignes pour faciliter la lecture
- on peut saisir le nom des options sans se soucier de la case, ils sont évalués en minuscules.
De même les tirets du 6 seront remplacés par les underscores du 8 - le programmeur de l'action peut définir des alternatives pour le nom de l'action et des options.
Par exemple: saisir table-par-lignes renvoie vers le nom 'technique': table_by_rows }
pour indiquer la fin du shortcode.
Le shortcode peut être en 2 parties entourant un contenu.
Exemple {up table-par-lignes} <table> ...</table> {/up table-par-lignes}
Il peut y avoir des shortcodes à l'intérieur du contenu pour indiquer des alternatives.
{if filter | admin} je suis un admin {=====} je ne suis pas un admin {/if filter}
Cela permet une saisie entièrement en wysiwyg
Vous pouvez aussi consulter l'articles : les options courantes
Les copier-coller des exemples de shortcodes sur ce site peuvent ne pas fonctionner. Dans ce cas, copier uniquement le contenu sans les accolades {}.
- Détails