Liste (auto-générée) des actions

Il est possible :
- 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
• filter: conditions. Voir doc action filter (v1.8)
• 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, ...
• css-head (base-css): code CSS pour head. Attention utiliser [] au lieu de {}

possibilité d'ajouter du code libre dans le head sans risque de nettoyage par un éditeur WYSIWYG
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
• filter: conditions. Voir doc action filter (v1.8)

sans risque de nettoyage par un éditeur WYSIWYG
syntaxe 1 {up addCssHead=.foo[color:red]} Attention: mettre des [ ] au lieu de {}
syntaxe 2 {up addCssHead=chemin_fichier_css}
Utilisation : charger un fichier CSS spécifique à une page

• addcsshead: code CSS. ATTENTION [ ] à la place des {}
• filter: conditions. Voir doc action filter (v1.8)

Par défaut, le code est ajouté dans le head.
Si le paramètrre 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 = 0: 1: entoure avec appel jquery (sauf fichier)
• filter: conditions. Voir doc action filter (v1.8)

syntaxe 1 : anime le contenu du shortcode
{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: delai 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
• style: style inline appliqué au bloc
• class: classe(s) appliquée(s) au bloc

syntaxe : {up barcode=text | type=...|height=..|width=...|color=...}

• barcode = text: valeur alphanumérique
• 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: Couleur du code-barre. En mode PNG, on attend des valeurs RGB séparés 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 generer le code barres
• class: Class(s) for block
• style: Inline style for block
• css-head (base-css): Régles CSS définie par le webmaster (ajoutées dans head)

syntax 1 {up bbcode=content}
syntax 2 {up bbcode} content {/up bbcode}

• bbcode:
• tags: balises à traiter. vide: par défaut, liste (a,b,p) ou balise en plus de defaut (+a,b,p)
• css-head (base-css): style ajouté dans le HEAD de la page

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

• 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
• bg-selector = body: sélecteur du bloc pour image(s) de fond
• 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é en overlay
• page-selector: si block 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
• center: centrage vertical du contenu entre shortcodes
• filter: conditions. Voir doc action filter (v1.8)
• style: style inline pour bloc
• css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)

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

• 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
• bg-selector = body: bloc portant le slideshow
• bg-overlay: calque superposé à l'image de fond (png, opacité, RGBA, CSS)
• bg-color: couleur sous image
• page-selector: bloc sur contenu
• page-overlay: background de page-selector (png, opacité, RGBA, CSS)
• center = 1: centrage vertical du contenu entre shortcodes
• filter: conditions. Voir doc action filter (v1.8)
• 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
• 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

syntaxe :
fond site : {up bg-video=fichier video}
fond bloc : {up bg-video=fichier video}content{/up bg-video}
fond autre bloc : {up bg-video=fichier video | bg-selector=#foo}content{/up bg-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é
• bg-selector = body: bloc portant le slideshow
• 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
• page-selector: bloc sur contenu
• page-overlay: background de page-selector (png, opacité, RGBA, CSS)
• center: style et classe pour centrage vertical du contenu entre shortcodes
• filter: conditions. Voir doc action filter (v1.8)
• 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)

syntaxe: {up box=model | title=title}contenu HTML{/up box}

• box: model [danger, info] ou prefset
• template = ##head## ##title-link## ##subtitle## ##image## ##/head## ##content## ##action-link##:
• 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
• class: classe(s) pour la box
• style: style inline pour la box
• 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: 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. 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: 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: lien. . Si vide et demandé : on prend le premier lien sur title ou image
• link-target: _blank pour nouvelle fenetre
• head-class: class pour le bloc entete. en général title, subtitle, image
• head-style: style pour le bloc entete
• 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
• css-head (base-css): style CSS inséré dans le HEAD
• align-vertical = fg-vspace-between-1: type de repartition verticale en multibox

syntaxe 1 : {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
• filter: conditions. Voir doc action filter (v1.8)
• class: class bloc principal
• style: style inline bloc parent
• 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

syntaxe {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é)
• 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)

syntaxe {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
• vertical = 0: horizontal par défaut ou vertical
• area: valeur en % dans l'ordre : left, top, width, height. EX: 10,25,90,75
• maximized = 0: affichage remplit le bloc
• colors: liste des couleurs
• title (titre):
• title-position: in, out, none (defaut)
• title-style: color: 'blue', fontsize: '14px', bold:true (attention à la syntaxe)
• legend-position: in, none (defaut), top, bottom
• legend-style: ex: color:'blue',fontSize:14,bold:true
• bar-width: largeur des barres en %
• 3D = 0: camembert en relief
• donut = 0: part du trou central. ex: 0.5 pour la moitié
• isstacked: 0, true (absolute) ou relative
• height (h,hauteur): min-height bloc parent
• options: chaine JSON des options (remplacer {} par [])
• class: classe(s) pour bloc
• style: style inline pour bloc
• css-head (base-css): style ajouté dans le HEAD de la page

syntaxe {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
• 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
• class: classe(s) pour bloc
• style: style inline pour bloc
• css-head (base-css): style ajouté dans le HEAD de la page

syntaxe {up clocks-gmt=ville | offset=décalage horaire}

• clocks_gmt: Nom de la ville (pour légende)
• class: classe(s) ajoutées au bloc principal
• style: style inline ajouté au bloc principal
• label-style: style inline pour le nom ville
• digital-style: style inline pour horloge digitale
• date-style: style inline pour date
• css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
• base-js-params: règles JS définies par le webmaster (ajout dans init JS)
• offset: GMT offset
• title (titre) = Greenwich, England: titre
• skin = 1: indice images
• dst = 1: gestion heure d'été
• analog = 1: afficher horloge analogique
• digital = 1: afficher horloge digitale
• timeformat = HH:mm:
• date = 0: afficher la date
• dateformat = MM/DD/YYYY:
• imgpath: chemin vers les images

syntaxe 1 (body) : {up corner=texte}
syntaxe 2 (bloc) : {up corner=texte}contenu du bloc{/up corner}

• corner: texte affiché dans le coin ou ruban
• 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
• filter: chaine de conditions. Voir documentation filter
• shadow = 0: 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
• class: classes pour le coin
• style: style CSS pour le coin
• url: lien
• target = _blank: ou _self pour ouvrir le site dans le même onglet
• bloc-class: classe(s) pour bloc
• bloc-style: style inline pour bloc
• css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)

syntaxe:
{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
• class: classe
• style: style inline
• callback: Fonction appellée à la fin du compte à rebours
• captionSize = 0: fontsize legendes
• countdownAlertLimit = 10: alerte en seconde avant fin countdown
• displayCaptions = 0: 1 = légendes affichées
• displayDays = 0: 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 = 0: Temps initial en secondes pour le compte à rebours
• start = 1: démarrer automatiquement la minuterie
• theme = white: black ou blue
• timeTo: date, nb secondes ou vide pour horloge

syntaxe {up countdown-simple=AAAAMMJJHHMM}

• countdown_simple: date cible ou délai si débute par +
• 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é
• model = inline: CSS de base pour la présentation
• digit-view = YMDHMS: afficheurs. Mettre un X pour ne pas l'afficher. Pour les premiers non affichés, la valeur sera convertie et ajouté au premier affiché
• digit-class: classe(s) pour les chiffres
• zero = 0: ajoute un zero devant les heures, minutes et secondes
• 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:

Syntaxe : {up counter=0,100}

• counter: min,max : valeurs de départ et de fin
• filter: conditions. Voir doc action filter (v1.8)
• width (l,largeur,w) = 0: largeur minimal (par défaut en pixels)
• mono = 1: force la police en monospace
• 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)
• start = 0: 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é

1/ {up csv2def=emplacement-fichier} // le contenu est lu dans un fichier
2/ {up csv2def}
[=item=]definition
[=item1; "item;2"; ...=]
definition1
{===}
definition 2
{/up csv2def}

• csv2def: chemin vers fichier à afficher
• separator = ;: separateur des colonnes (fichier uniquement)
• HTML = 0: pour fichier (contenu CSV): 0=affiche le rendu, 1=affiche le code ou liste des tags conserves (strip_tags)
• model = stack: empile par defaut, sinon nom de la classe principale : flex. Voir csv2def.css
• class: classe(s) pour la balise DL
• style: style inline pour la balise DL
• term-class: classe(s) pour le bloc des termes
• term-style: style pour le bloc des termes
• term-style-separator: style pour separer les differents termes
• def-class: classe(s) pour le bloc des definitions
• def-style: style pour le bloc des definitions
• def-style-separator: style pour separer les differentes definitions
• css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
• 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

1/ {up csv2list=emplacement-fichier} // le contenu est lu dans un fichier
2/ {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 = ;: separateur 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 modele dans le fichier csv2list.css
• leaders = 0: points de conduite
• leaders-color: couleur points de conduite
• class: classe(s) pour la balise UL
• style: style inline pour la balise UL
• col-style-*: style inline pour les nièmes balise SPAN
• list-style: code hexadecimal et couleur du caractère (bb,red ou 26BD,#F00)
• bgcolor: couleur de fond. #FFF par defaut
• header = 0: 0: pas de titre, 1: premiere ligne contenu, titre colonne
• 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
• footer = 0: 0: pas de pied, 1: derniere ligne contenu, pied colonne
• 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
• css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)

1/ le contenu est lu dans un fichier
{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 = ;: separateur des colonnes
• HTML = 0: 0= aucun traitement, 1=affiche le code, ou liste des tags a garder (strip_tags)
• model: nom de la classe modele dans le fichier csv2table.css
• class: classe(s) pour la table
• style: style inline pour la table
• 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
• color-contrast: couleur des lignes impaires. la couleur des lignes paires est à définir dans class ou style
• header = 0: 0: pas de titre, 1: premiere ligne contenu, titre colonne
• header-class: classe(s) pour la balise thead
• header-style: style pour la balise thead
• footer = 0: 0: pas de pied, 1: derniere ligne contenu, pied colonne
• footer-class: classe(s) pour la balise tfoot
• footer-style: style pour la balise tfoot
• css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)

syntaxe {up div=class_and_style}content{/up div}

• div: classes et style (séparateur : point-virgule)
• class: classe(s) pour bloc
• style: style inline pour bloc
• css-head (base-css): style ajouté dans le HEAD de la page

syntaxe {up donation=title | business=compte_paypal}

• donation: Votre adresse e-mail PayPal enregistrée ou votre identifiant PayPal
• title (titre): texte pour ##title##. bbcode accepté
• text: texte bbcode pour motclé ##text##
• button = lang[en=Donate;fr=Faire un don]: texte ou image Paypal pour bouton
• template = ##title## ##amount## ##currency## ##button##: modèle mise en page
• 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
• item-name = Donation: La raison de vos dons. Sera imprimé sur la confirmation PayPal
• 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 devise acceptée. 1ère par défaut
• image-url: URL du logo de l'organisme receveur
• use-sandbox = 0: pour tester la donation
• class = tc: classe(s) pour bloc externe
• style: style inline pour bloc externe
• title-tag: balise pour le titre (##title##) span par defaut si title-style
• title-style: classes et styles pour le titre (##title##)
• text-tag: balise pour le titre (##text##) span par defaut si text-style
• text-style: classes et styles pour texte d'acompagnement (##text##)
• amount-style: classes et styles pour montant (##amount##)
• currency-style: classes et styles pour choix devises (##currency##)
• button-style = b;t-grisFonce;background:#FFC439;border:#ECB300 1px outset;border-radius:50px;cursor:pointer: classes et styles pour bouton (##button##)
• 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
• class: classe bloc parent
• style: style inline bloc parent
• tabs = timeline: Onglets à afficher, par exemple : timeline, events, messages
• adaptwidth = 1: Essayer d’adapter la largeur au conteneur.
• facepile = 1: Affiche les photos de profils quand des amis aiment le contenu.
• hidecover = 0: Masque la photo de couverture dans l’en-tête
• smallheader = 0: Utiliser un en-tête réduit
• 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.

syntaxe : une alternance de titres pour les onglet en H4 et de contenu HTML
{up faq}
-- titre en H4
-- contenu HTML
{/up faq}

• faq: rien
• title-tag = h4: pour utiliser une autre balise pour les titres
• title-class: classe pour le titre (onglet)
• title-style: style inline pour le titre
• content-class: classe pour le contenu
• content-style: style inline pour le contenu

syntaxe
{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:
• class: classe(s) pour bloc
• style: style inline pour bloc
• css-head (base-css): style ajouté dans le HEAD de la page

Propose un lien sur un fichier.
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, ...
• class: classe(s) pour la balise a
• style: style inline pour la balise a

syntaxe 1 {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-*
• extensions = zip, pdf,txt,md,png,jpg,gif,svg,doc,docx,xls,xlsx,odt,ods: extensions autorisées
• template = ##icon## ##filename-link## (##size## - ##date##) [small]##hit## ##lastdownload##[/small] [br]##info##: modèle de mise en page. keywords + bbcode
• main-tag = 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
• 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'icone devant le lien ou taille de l'icone selon extension du fichier (16 ou 32)
• password: mot de passe pour télécharger le fichier
• format-date = lang[en=m/d/Y H:i;fr=d/m/Y H:i]: 'd/m/Y H:i'
• model-hit = téléchargé %s fois:
• model-lastdownload = dernier téléchargement le %s:
• model-info = %s:
• class: classe(s) pour bloc
• style: style inline pour bloc
• filter:
• css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)

syntaxe {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
• HTML = 0: 0= aucun traitement, 1=affiche le code, ou liste des tags a garder (ex: img,a)
• EOL = 0: forcer un retour à la ligne
• block (bloc) = 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)

Reprise du plugin LM-Filter de Lomart
{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)
{up filter | admin} contenu si vrai {====} contenu si faux {/up filter}
--> affiche si admin connecté. admin=0 affiche si admin NON connecté

• filter: aucun argument prévu
• 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 langages autorisé. 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
• info = 0: affiche les valeurs actuelles des arguments pour les conditions

syntaxe :
{up flexauto=x}contenu{/up flexauto}
x=1 à 12 est le nombre de colonnes sur grand écran.

• flexauto = 3: nombre de colonnes sur grand écran ou G-T-M
• tablet = 2: nombre de colonnes sur moyen écran
• mobile = 1: nombre de colonnes sur petit écran
• class: classe(s) ajoutée(s) au bloc parent
• style: style inline ajouté au bloc parent
• bloc-style: style inline ajoutée(s) au bloc enfant
• css-head (base-css):

syntaxe 1 : {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
• class: class bloc principal
• style: style inline bloc parent
• 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 ajoutée(s) au bloc enfant
• css-head (base-css):

syntaxe : {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 = ;: separateur des colonnes
• no-content-html = en=content not found : %s;fr=contenu non trouvé : %s: message erreur. %s:nom fichier
• style: classes et styles
• css-head (base-css):

syntaxe : {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
• class: classe
• style: style-inline

syntaxe :
{up googlefont=nompolice} contenu {/up googlefont}
{up googlefont=nompolice | class=foo}

...

• googlefont: nom police
• size: ajout font-size et line-height
• family: famille de substitution (cursive, fantasy)
• tag = span: balise HTML pour entourer le contenu
• className: nom de la classe pour utiliser la police
• css-head (base-css): complément de css: color, font-size, ....

syntaxe 1 : {up hr=nom_class_modele}
syntaxe 2 : {up hr=nom_prefset}
syntaxe 3 : {up hr=1px, solid, #F00, 50%}

• hr: nom icone, code unicode, chemin image ou nom dans prefs.ini + color, size
• 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
• 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 = 0: 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
• fontname = icomoon: pour icomoon ou FontAwesome ou autres (a mettre dans pref.ini)

exemples :
{up html=div | class=foo | id=x123}contenu{/up html}
--> < div id="x123" class="foo">contenu< /div>
{up html=img | class=foo | src=images/img.jpg}
--> < img class="foo" src="/images/img.jpg" >
note: toutes les options sont considérées comme des attributs de la balise
v2.2 : possibilité saisie rapide {up html=h1.foo.xx} equivaut à {up html=h1 | class=foo xx}

• html = div: balise html
• class: classe(s)
• style: style inline
• xxx = yyy: couple attribut-valeur. ex: title=le titre, href=//google.fr

syntaxe : {up icon=nom_icone}
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
• 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)
• src: nom icone, code unicode, chemin image (indispensable si prefset)
• size: taille icone en px, em (px par defaut) - coté du carré dans lequel est inscrit l'image
• color: couleur
• color-hover: couleur lors survol icone (sauf image et unicode coloré)
• style: style inline
• class: classe
• selector: retour sous forme propriétés CSS pour ce selecteur
• info = 0: 1 affiche la liste des icons définies dans prefs.ini comme un message debug, 2 la retourne pour affichage à la place du shortcode

syntaxe {up iframe=URL}

• iframe: URL site distant
• allowfullscreen = allowfullscreen: autorise le plein ecran
• scrolling = no: affiche les ascenceurs 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)
• preview: image affichée avant chargement de l'iframe
• class: classe(s) pour bloc externe
• style: style inline pour bloc externe
• iframe-class: classe(s) pour bloc - utilisation interne
• iframe-style: style inline pour bloc - utilisation interne
• css-head (base-css): style ajouté dans le HEAD de la page

{up imagecompare}
< img src="/avant.jpg" >
< img src="/apres.jpg" >
{/up imagecompare}

• image_compare: aucun argument nécessaire
• class: classe(s) pour le bloc
• style: style inline pour le bloc
• initVisibleRatio = 0.2: position initiale
• interactionMode = drag: mode: drag, mousemove, click
• addSeparator = 1: ajoute séparateur (ligne verticale)
• addDragHandle = 1: ajoute poignee sur séparateur
• animationDuration = 450: Duree animation en ms
• animationEasing = linear: animation: linear, swing
• precision = 2: Precision rapport, nb decimales

avec adaptation de la taille image au device et legendes
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
• nb-img = 0: nombre de vignette 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
• legend: label pour image unique
• legend-type = 2: 0:aucune, 1:hover-top, 2:hover-bottom, 3:sous l'image
• class: classe(s) pour bloc principal
• style: style inline pour bloc principal
• img-class: classe(s) pour bloc figure avec image et legende
• img-style: style inline pour bloc avec image et legende
• legend-class: classe(s) pour la légende vignette
• legend-style: style pour la légende vignette
• img-sizes: largeur image en pourcentage de wmax-page en mode desktop, tablette et mobile. 100,100,100 par defaut
• wmin-image = 600: 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 desactiver. Multiplié par pixel-ratio
• pixel-ratio = 0: 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 inferieure a 80%, la plus petite n'est pas cree
• bp-tablet = 768: point de rupture tablette
• bp-mobile = 480: point de rupture smartphone
• random: affichage random en mode shuffle
• search: shuffle search
• shuffle-reverse: shuffle : ordre inverse des boutons
• css-head (base-css): style CSS inséré dans le HEAD

{up imagehover=images/image.jpg | effect=xx}
-- contenu HTML affiché au survol
{/up imagehover}
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
• class: classe pour bloc externe (deprecated)
• style: style inline pour bloc externe
• img-class: classe pour image (deprecated)
• img-style: style inline pour image
• text-class: classe pour bloc texte lors survol (deprecated)
• text-style: style inline pour bloc texte lors survol
• css-head (base-css): code css pour le head. ATTENTION [] au lieu de {}

syntaxe {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
• class: classe(s) pour bloc
• style: style inline pour bloc
• main-class: classe(s) pour le bloc du contenu
• main-style: style inline pour le bloc du contenu
• css-head (base-css): style ajouté dans le HEAD de la page

syntaxe 1 {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
• size: diametre de la loupe en pixel
• radius: diametre de la loupe en pixel
• border: modele de bordure pour la loupe
• class: classe(s) ajoutées au bloc principal
• style: style inline ajouté au bloc principal

syntaxe {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 %
• options: liste des options supplémentaires . ex: showZoomCtrl:true,compass:true - Attention au min/maj. voir cette page
• language: liste motclé (bylineLabel,loadButtonLabel,loadingLabel) + traduction. Exemple:bylineLabel:lang[en=by %s;fr:par %s], loadingLabel:Loading...
• fullscreen = 0: 1 pour autoriser la vue plein écran
• 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)
• panorama: chemin image (il est rempli automatiquement)
• 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 = 0: chargement auto de l'image
• autoRotate = 0: rotation nombre de degres 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 ecran
• hotSpotDebug = 0: 1 pour afficher les coordonnées hotspot dans la console

Le dossier peut être un pattern valide pour la fonction PHP GLOB
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 = 0: retourne uniquement le chemin de l'image pour utilisation par une autre action.
• class: classe(s) pour bloc
• style: style inline pour bloc
• css-head (base-css): style ajouté dans le HEAD de la page

syntaxe {up image-rollover=image_base | hover=image_survol}

• image_rollover: image repos
• hover: image au survol
• click: image lors clic
• class: classe(s) pour bloc
• style: style inline pour bloc

syntaxe {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 bande
• alt: texte alternatif pour image. Si vide: nom du fichier humanisé
• quality = 80:
• reset = 0: force la génération des images strip
• delete-source = 0: supprime l'image source après génération des strips
• class: classe(s) pour bloc
• style: style inline pour bloc
• css-head (base-css): style ajouté dans le HEAD de la page

syntaxe {up imagemap=chemin_image}
< area target="" alt="" title="" href="/" coords="" shape="">;
< 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
• class: classe(s) ajoutées au bloc principal
• style: style inline ajouté au bloc principal

syntaxe {up jcat_image}

• jcat_image: dossier/chemin/url vers une image si la catégorie n'en possède pas
• class: classe(s) pour bloc
• style: style inline pour bloc
• css-head (base-css): style ajouté dans le HEAD de la page

syntaxe : {up jcategories-by-tags=id-ou-nom-tag}
MOTS-CLES :
##title## ##title-link## ##subtitle## ##link##
##intro## ##intro-text## ##intro-text,100## ##content##
##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) = 0: 1 pour obtenir les catégories non publiées
• sort-by = title: tri: title, rgt, created_time, modified_time, id, hits
• sort-order = asc: ordre de tri : asc, desc
• template: modèle de mise en page. Si vide le modèle est défini par le contenu
• main-tag = div: balise pour le bloc englobant tous les articles. 0 pour aucun
• main-style: classes et styles inline pour bloc principal
• main-class: classe(s) pour bloc principal (obsoléte)
• item-tag = div: balise pour le bloc englobant tous les articles. 0 pour aucun
• item-style: classes et styles inline pour bloc principal
• item-class: classe(s) pour bloc principal (obsoléte)
• image-src: lorempixel.com/150/150', // image par défaut
• image-alt = news: image, texte alternatif par défaut
• 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
• no-content-html = [p]aucune catégorie pour ce mot-clé[/p]: retour si aucune catégorie trouvée
• tags-list-prefix: texte avant les autres eventuels tags
• tags-list-style: classe ou style pour les autres mots-clés
• css-head (base-css):

la catégorie parente n'est pas affichée
syntaxe : {up jcategories-list=id}
MOTS-CLES ITEM MENU:
##id## ##access## ##title-link## ##title## ##note## ##extension## ##language##
https://docs.joomla.org/Categories_and_CategoryNodes_API_Guide

• 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
• main-tag = ul:
• item-tag = li:
• 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]:
• style: classes et styles
• css-head (base-css):

syntaxe : {up jcontent-by-categories=id-catégorie(s)}
Une action très pratique pour lister les articles de la catégorie en cours, il suffit de taper {up article-category}
Les mots-clés :
##title## ##title-link## ##subtitle## ##link##
##intro## ##intro-text## ##intro-text,100## ##content##
##image## ##image-src## ##image-alt##
##date-crea## ##date-modif## ##date-publish##
##author## ##note## ##cat## ##new## ##featured## ##hits## ##tags-list##

• jcontent_by_categories (jnews): ID(s) catégorie(s) séparé avec virgule, vide pour celle de l'article actuel ou 0 pour toutes
• maxi: Nombre maxi d'article dans la liste. Vide = tous
• exclude: liste des id des catégories non reprises si option principale=0
• current = 0: 1 pour inclure l'article en cours
• no-published (no_published) = 1: Liste aussi les articles non publiés
• sort-by = publish_up: tri: title, ordering, created, modified, publish_up, id, hits
• sort-order = desc: ordre de tri : asc, desc
• author: filtre sur auteur: liste des id ou article, current
• template: modèle de mise en page. Si vide le modèle est le contenu
• main-tag = div: balise pour le bloc englobant tous les articles. 0 pour aucun
• main-style: classes et styles inline pour bloc principal
• main-class: classe(s) pour bloc principal (obsoléte)
• item-tag = div: balise pour le bloc d'un article. 0 pour aucun
• item-style: classes et styles inline pour un article
• item-class: classe(s) pour un article (obsoléte)
• date-format = %e %B %Y: format pour les dates
• date-locale: localisation pour les dates. Par défaut, celle du navigateur client.
• new-days = 30: nombre de jours depuis la création de l'article
• new-html = [span class="badge bg-red t-white"]nouveau[/span]: code HTML pour badge NEW
• featured-html = &#x2B50: code HTML pour article en vedette
• no-content-html = Pas de nouvelles, bonnes nouvelles ...[br]No news, good news ...: texte si aucune correspondance. 0=aucun texte
• image-src: lorempixel.com/300/300', // image par défaut
• image-alt = news: image, texte alternatif par défaut
• tags-list-prefix: texte avant les autres eventuels tags
• tags-list-style = badge;margin-right:4px: classe ou style affecté à une balise span par mot-clé
• tags-list-separator: séparateur entre mots-clés
• css-head (base-css): code CSS dans le head

syntaxe : {up jcategories-by-tags=id-ou-nom-tag}
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##
##cat## ##new## ##hits## ##tags-list##
##CF_id_or_name## : valeur brute du custom field
##CF_id_or_name | [span class="t-red"]%label% : [:span]%value% ## (ou %rawvalue%)

• jcontent_by_tags: ID ou nom du tag
• maxi: Nombre maxi d'articles dans la liste
• no-published (no_published) = 0: 1 pour obtenir les catégories non publiées
• sort-by = title: tri: title, rgt, created, modified, id, hits
• sort-order = asc: ordre de tri : asc, desc
• template: modèle de mise en page. Si vide le modèle est le contenu
• main-tag = div: balise pour le bloc englobant tous les articles. 0 pour aucun
• main-style: classes et styles inline pour bloc principal
• main-class: classe(s) pour bloc principal (obsoléte)
• item-tag = div: balise pour le bloc englobant tous les articles. 0 pour aucun
• item-style: classes et styles inline pour bloc principal
• item-class: classe(s) pour bloc principal (obsoléte)
• image-src: lorempixel.com/150/150', // image par défaut
• image-alt = news: image, texte alternatif par défaut
• 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
• no-content-html = aucune catégorie pour ce mot-clé: retour si aucune catégorie trouvée
• css-head (base-css):

syntaxe 1 : {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##

• jcontent_in_content: ID de l'article
• no-published (no_published) = 1: Liste aussi les articles non publiés
• template = ##content##: modèle de mise en page. Si vide le modèle est le contenu. BBCode accepté
• main-tag = div: balise pour le bloc d'un article. 0 pour aucun
• main-style: classes et styles inline pour un article
• main-class: classe(s) pour un article (obsoléte)
• date-format = %e %B %Y: format pour les dates
• date-locale: localisation pour les dates. Par défaut, celle du navigateur client.
• css-head (base-css): code CSS dans le head

syntaxe : {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
• sort-by = title: tri: title, ordering, created, modified, publish_up, id, hits
• sort-order = asc: ordre de tri : asc, desc
• author: filtre sur auteur: liste des id ou article, current
• main-class: classe(s) pour bloc principal (obsoléte)
• class: idem main-class. Conservé pour compatibilité descendante
• main-style: classes et styles inline pour bloc principal
• style: idem main-style. Conservé pour compatibilité descendante
• 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)
• list-style: classes et styles inline pour la liste
• list-class: classe(s) pour la liste (obsoléte)
• css-head (base-css): code CSS dans le head

syntaxe : {up jextensions-list=prefset ou type(s)}
MOTS-CLES:
##id## ##client## ##type## ##name-link## ##name## ##author## ##version## ##folder## ##state##

• jextensions_list = component,module,plugin: nom d'un prefset ou un des types suivant : component,module,plugin
• type-exclude = 0: 1= tous les types sauf ceux passés en paramétre principal
• client = 0: 0=site, 1=admin, 2=tous
• minimal-id = 10000: pour exclure les composants du core Joomla
• actif-only = 0: 1 pour lister les extensions dépubliées
• sort = type,folder,name: tri
• main-tag = ul:
• item-tag = li:
• template = ##state####name##[small] ##client## ##type####folder## ##version## (id:##id##) ##author## [/small] ##note##: modèle de mise en page. keywords+bbcode
• model-folder = %s:
• model-version = vers:%s:
• model-note = [i class="t-blue"]%s[/i]:
• state-list = t-red: liste de choix : inactif, actif 🔴
• style: classes et styles
• css-head (base-css):

syntaxe : {up jmenus-list=menutype}
MOTS-CLES MENUTYPE:
##id## ##menutype## ##title## ##description##
MOTS-CLES ITEM MENU:
##id## ##title## ##link## ##title-link## ##note## ##access## ##language## ##component##

• jmenus_list: prefset, nom menutype ou vide pour tous
• menuid: ID menu parent pour limiter à cette branche
• main-tag = ul: balise pour la liste des fichiers
• template-menutype = [h5]##title## (id:##id##)[/h5] ##description## / ##menutype##: modèle de mise en page ou 0 pour aucun. keywords + bbcode
• template-menu = ##title-link##[small] (id:##id##) ##access## - ##component## ##language##[/small] ##note##: modèle de mise en page. keywords + bbcode
• model-note = [i class="t-blue"] %s[/i]: keywords + bbcode
• style: classes et styles
• css-head (base-css):

syntaxe : {up jmodules-list=position ou client_id}
MOTS-CLES:
##id## ##client## ##position## ##module## ##title##
##state## ##note## ##ordering## ##language##

• jmodules_list: prefset ou position(s). vide=tous les modules site
• position-exclude = 0: 1= toutes les positions sauf celles passées en paramétre principal
• client = 0: 0=site, 1=admin, 2=tous
• module: nom du module. ex: LM-Custom-SITE
• module-exclude = 0: 1= tous les modules sauf ceux passés au paramètre module
• actif-only = 0: 1 pour lister les extensions dépubliées
• order = position, ordering, title: tri
• main-tag = ul: balise pour le bloc englobant tous les modules. 0 pour aucun
• main-style: classes et styles inline pour bloc principal
• main-class: classe(s) pour bloc principal (obsolète)
• 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)
• 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]:
• no-content-html = [p]aucun module a cette position[/p]: retour si aucune catégorie trouvée
• state-list = icon-unpublish t-rouge, icon-publish t-vert, icon-trash t-gris: liste de choix : inactif, actif 🔴
• css-head (base-css):

Vos yeux après de longues heures devant votre ordi commencent à se fermer.
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)
• class: classe(s) pour bloc
• style: style inline pour bloc

syntaxe 1 : {up lang | fr=oui | gb=yes}
syntaxe 2 : {up lang | lang-order=en-fr} contenu anglais {====}contenu français {/up lang}

• lang: langue pour vérifer le rendu (vide en production)
• lang-order = en,fr: ordre de saisie des langue dans contenu
• tag: balise entourant le contenu retourné
• 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)

.
Syntaxe : {up lorem=liste des arguments ci-dessous }
- (integer) - Nombre de paragraphe (P) généré. 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é.
v1.9.5 : strip_tags si max-char ou max-word

• lorem: nombre de paragraphe et mots-clé séparés par des virgules
• max-char: nombre maxima de caractères
• max-word: nombre maxima de mots
• tag = div: (v1.6) tag du bloc contenant le texte en retour ou tag=0 pour aucun.
• class: classe(s) pour bloc (sans effet, si tag=0)
• style: style inline pour bloc (sans effet, si tag=0)

Syntaxe :
{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 = 0: rendu en niveau de gris
• sepia = 0: rendu e sépia
• class: classe(s) (obsolète)
• style: classes et styles

Syntaxe : {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 = 0: force la récupération aléatoire
• grayscale = 0: pour rendu en niveaux de gris
• blur = 0: rendu flou
• gravity: recadrage : north, east, south, west, center
• class: classe(s) (obsolète)
• style: classes et styles

Syntaxe : {up lorempixel=type | width=xx | height=xx }
--> type = abstract, animals, business, cats, city, food, nightlife, fashion, people nature, sports, technics, transport
.
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%

• lorempixel = cats: type d'image: abstract, animals, business, cats, city, food, nightlife, fashion, people nature, sports, technics, transport
• align: alignement horizontal : left, center, right
• height (h,hauteur) = 200: hauteur image téléchargée
• width (l,largeur,w) = 200: largeur image téléchargée
• class: classe(s) obsolète
• style: classes et styles

syntaxe
{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"}}
• make-html = 1: par defaut, les blocs pour la ou les legendes sont crees au-dessous de celui pour la carte.
• map-class = map: Nom de classe CSS du conteneur de la carte
• csv-areas: fichier CSV pour definir les areas. Les sous-shortcodes 'area' sont ignores
• csv-areas-model: modele pour construire la definition d'une zone
• csv-plots: fichier CSV pour definir les plots. Les sous-shortcodes 'plot' sont ignores
• csv-plots-model: modele pour construire la definition d'un point
• csv-links: fichier CSV pour definir les links. Les sous-shortcodes 'link' sont ignores
• csv-links-model: modele pour construire la definition d'un lien
• tooltip-class: Nom de classe CSS des infobulles
• tooltip-style: Proprietes CSS pour les infobulles
• before-init: voir demo
• after-init: voir demo
• 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

syntaxe 1: {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.
• 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
• filter: conditions. Voir doc action filter (v1.8)
• height (h,hauteur) = 100px: hauteur defaut pour scroll vetical
• model = base: style CSS dans .upmq-*style*. aucun=none
• 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 = 0: 1 = label sur une ligne
• direction = left: right, up, down
• loop = -1: nombre d'affichage, -1 : infini
• scrolldelay = 0: 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 = 0: scroll uniquement lors survol

{up media_plyr=yt | code=bTqVqk7FSmY }
{up media_plyr=vimeo | code=bTqVqk7FSmY }
media_plyr : precisez 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
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
• class: classe(s) ajoutée(s) au bloc extérieur
• style: style inline ajouté au bloc extérieur

{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 debloquer 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 = 0: demarrage automatique
• title (titre) = 0: Afficher le titre de la vidéo
• portrait = 0: Afficher l'image de profil de l'auteur (portrait)
• loop = 0: boucle en fin de video
• muted = 0: coupe le son
• play-on-visible = 0: démarre et arrête la video selon sa visibilité sur l'ecran
• class: classe pour bloc externe
• style: code css libre pour bloc externe

{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)
• width (l,largeur,w): largeur de la video en px ou %
• autoplay = 0: demarrage automatique
• loop = 0: boucle sur la video
• muted = 0: coupe le son
• play-on-visible = 0: démarre et arrête la video selon sa visibilité sur l'ecran
• class: classe pour bloc externe
• style: code css libre pour bloc externe

Syntaxe : {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
• class: classe(s) pour bloc parent
• style: style inline pour bloc parent

les types autorises sont : inline, iframe, image, video, ajax
syntaxe 1 : {up modal=contenu popup | label=texte du lien}
syntaxe 2 : {up modal=vide,'html','images' ou contenu | label=texte lien}contenu{/up popup}
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 determiner son type
- video vimeo, youtube ou dailymotion {up popup=//youtu.be/H9fa9aWFbLM}
- image unique si {up popup=images/xx.jpg} ou png, ...
- bloc inline si id de bloc {up popup=#bloc}
- iframe si url {up popup=//lomart.fr} ou {up popup=doc/xx.pdf} ou {up popup=?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
• class: classe(s) pour bloc label
• style: style inline pour bloc label
• label: texte du lien pour afficher le popup. bbcode accepté
• close-left = 0: croix de fermeture en haut à gauche. haut-droite par défaut
• zoom-suffix = -mini: suffixe pour les versions vignettes des images
• css-head (base-css): règles CSS definies par le webmaster (ajout dans le head)
• base-js-params: règles JS definies par le webmaster (ajout dans init JS)
• filter: conditions. Voir doc action filter (v1.8)
• overlayClose = 1: 1 pour fermer la fenêtre modale en cliquant sur la zone grisée autour du contenu
• videoAutoPlay = 0: 1 pour demarrer la video a l'ouverture du popup
• gallery = 1: 0 pour traiter les images individuellement
• title (titre) = 1: afficher le titre
• width (l,largeur,w): largeur avec unite. Ex: 80%, 500px, ...
• height (h,hauteur): hauteur avec unite. Ex: 80%, 500px, ...

syntax 1 {up note=texte_commentaire}
syntax 2 {up note=texte_commentaire} contenu {/up note}

• note:

syntaxe 1 : {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
• class: classe(s) ajoutées au bloc principal
• style: style inline ajouté au bloc principal

Le fichier PDF peut-être hébergé sur le serveur ou ailleurs (url absolue)
syntaxe {up pdf=chemin du fichier PDF}
voir : https://rootslabs.net/blog/538-embarquer-pdf-page-web-pdf-js
integration libraire TurnJs http://turnjs.com/ depuis https://github.com/iberan/pdfjs-flipbook

• pdf: chemin du fichier pdf
• method (methode) = PDFJS: ou Google, Embed ... ou 0
• view = 1: ou Google, Embed ... ou 0
• pdfjs-model = web: ou mobile (non opérationnel)
• width (l,largeur,w) = 100%: largeur iframe
• height (h,hauteur) = 500px:
• 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
• btn (bouton) = 0: 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
• close-left = 0: croix de fermeture en haut à gauche. haut-droite par défaut
• flip = 0: activer le mode flipbook uniquement si pdfJs
• class: classe(s) pour bloc parent
• style: style inline pour bloc parent
• background: couleur fond perdu du PDF au format #rrggbb

Exemples :
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
• filter: conditions. Voir doc action filter (v1.8)
• class:
• style:

syntaxe {up php_error} // dev (defaut) ou 0, min, max
A METTRE A LA FIN DE L'ARTICLE (UP commence par la fin!)

• php_error = dev: mode rapport d'erreurs : none, 0, min, max, dev

syntaxe {up printer=texte bouton} le contenu à imprimer {/up printer}

• printer = &#x2399; Imprimer: texte du bouton
• selector: sélecteur CSS du bloc à imprimer
• filename: nom du document si impression PDF
• btn-before = 0: le bouton est après le contenu à imprimer
• btn-display-on-print = 0: 0 = masque le bouton sur l'impression
• class: classe(s) pour bloc
• style: style inline pour bloc
• css-head (base-css): style ajouté dans le HEAD de la page

syntaxe {up qrcode=type | xxx=...}

• qrcode = text: type de QRCode : text/url/sms/email/phone/location/wifi/contact
• size = 200: Largeur
• 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
• alt: texte alternatif, si le qrcode n'est pas affiché
• encoding = UTF-8:
• 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)

syntaxe:
{up readmore=texte bouton | textless=replier} contenu caché {/up readmore}

• readmore: idem textmore
• textmore = lire la suite: texte bouton
• textless = replier: texte bouton
• class = uprm-btn: classe(s) pour les boutons. remplace la classe par défaut.
• style: style inline pour les boutons

syntaxe:
{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é
• class:
• style:
• css-head (base-css): code css libre dans le head. attention: ] au lieu de }

syntaxe : {up scroller}suite d'éléments{/up scroller}

• scroller = 3: nombre d'élément ou hauteur du bloc en px
• 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)
• runAfterPageLoad = false:
• direction = up: sens du défilement (up/down)
• speed = medium: slow (5000), medium (3000), fast (1200) ou durée en millisecondes
• viewable = 3: nombre d'élément ou hauteur du bloc en px (idem scroller)
• pause = 1: stop on hover

{up slider-owl |items=2}
< div>...< /div>
< img src="/...">
< a href="/..">< img src="/...">< /a>
{/up slider-owl}

• slider_owl: aucun paramétre nécessaire
• class: classe(s) ajoutées au bloc principal
• style: style inline ajouté au bloc principal
• autoPlay = 0: 0 ou durée affichage image
• slideSpeed = 200: Vitesse en millisecondes
• paginationSpeed = 0: durée changement en millisecondes
• pagination = true: Affiche pagination
• paginationNumbers = 0: Affiche numéros à l'intérieur des boutons de pagination
• 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"
• responsive = true:
• items = 0: Nombre maxi d'éléments affichés en meme 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

syntaxe 1:
{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
• class: classe(s) ajoutées au bloc principal
• style: style inline ajouté au bloc principal
• css-head (base-css):
• 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 = 0: tente de détecter automatiquement la taille de chaque diapositive
• stretch = 1: étire les images pour remplir le conteneur

syntaxe
site : {up snowfall=image}
bloc : {up snowfall=image | selector=bloc}

• snowfall = snow-01.png: image ou dossier
• 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
• selector = body: cible pour snowfall
• center: style et classe pour centrage vertical du contenu entre shortcodes
• z-index = 99: z-index des images
• class: classe(s) pour bloc
• style: style inline pour bloc
• filter: conditions. Voir doc action filter

syntaxe {up sound_hover=fichier_son }

• sound_hover: fichier_son
• evenement = onmouseenter: ou onclick, onmouseover...
• tag = div: balise pour le bloc. span pour un bloc inline
• class: classe(s) pour le bloc parent
• style: style pour le bloc parent

syntaxe {up span=class_and_style}content{/up span}

• span: classes et style (séparateur : point-virgule)
• 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

syntaxe {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:
• order:
• group:
• innerjoin:
• outerjoin:
• leftjoin:
• rightjoin:
• setlimit:
• presentation = table: présentation du résultat : list,table,div ou 0
• header: 1 ou vide pour utiliser les mots-clés, sinon titres séparés par point-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)
• template: modèle mise en page
• no-content-html = aucun résultat:
• 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
• dbinfos: vide= liste des tables, nom_table=liste des colonnes

Mode responsive avec gestion de l'espacement vertical
{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
• title-tag = h4: balise utilisée pour les titres onglets
• style: classe(s) et style(s) bloc principal
• class: classe(s) bloc principal (obsolète)
• title-style: classe(s) et style inline onglets
• title-class: classe(s) onglets (obsolète)
• content-style: classe(s) et style inline contenu
• content-class: classe(s) contenu (obsolète)
• auto: delai en millisecondes pour changement automatique d'onglet
• espace-vertical = 1: 0, 1 ou 2 : niveau des éléments à répartir
• css-head (base-css): règles CSS mises dans le head
• plugin_type: accordion
• side: left ou right
• active_tab: 1 a N
• content_display = block: interne, défini par espace-vertical

Syntaxe {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
• breakpoint = 720px: bascule en vue responsive
• 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
• key-width = 35%: largeur de la première colonne en vue responsive
• title-style: style pour la ligne titre en vue responsive
• style: style inline pour balise table
• class: classe(s) pour balise table (obsolète)

{up table-par-lignes}
< table> ... < /table>
{/up table-par-lignes}
les colonnes sont empilés 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: style inline pour balise table
• class: classe(s) pour balise table (obsolète)
• merge: fusion de colonnes. 1:[2,3],5:[6] = 2&3 avec 1 et 6 avec 5
• move: deplacement 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 = 0: nombre de colonnes fixées à gauche
• max-height: max-height pour le bloc parent
• style: classes et styles pour le bloc parent
• class: classe(s) pour le bloc parent (obsolète)

Inversion colonnes/lignes. les titres de colonnes deviennent la 1ère colonne et reste visibles.
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: classes et styles inline pour balise table
• class: classe(s) pour balise table (obsolète)

La suite de la description après la 1ère ligne

• table_sort: le paramétre principal
• col-type: mode de tri des colonnes
• col-init: n° de la colonne triée au chargement et sens (asc, desc)
• globalSearch: vide= recherche sur toutes les colonnes, sinon liste des colonnes (1,2,5)
• placeholder = lang[en=Search;fr=Rechercher]: texte dans la zone recherche
• pagination = 0: nombre de lignes par pages ou 0 pour désactiver
• pagination-class: classe pour les boutons
• pagination-class-active: classe pour le bouton actif
• class: classe(s)
• style: style inline
• css-head (base-css): style ajouté dans le HEAD de la page
• sortable = 1: Activer le tri
• searchable = 1: Activer la recherche

syntaxe {up tabslide=btn-text | tabLocation=top}contenu{/up tabslide}
utilisation :
- un sommaire sur le coté du site
- un module connexion

• tabslide: titre de l'onglet
• tab-style: classes et styles inline pour onglet
• tab-class: classe(s) pour onglet (obsolète)
• panel-style: classes et styles inline pour panneau
• panel-class: classe(s) pour panneau (obsolète)
• tabLocation = left: left, right, top or bottom
• tabHandle = .handle: JQuery selector for the tab, can use #
• speed = 300: time to animate
• action = click: action open, 'hover' or 'click'
• offset = 200px: distance pour top or left (bottom or right if offsetReverse is true)
• offsetReverse = 0: true= aligné a droite ou en bas
• otherOffset = null: if set, panel size is set to maintain this dist from bottom or right (top or left if offsetReverse)
• handleOffset = null: e.g. '10px'. If null, detects panel border to align handle nicely
• handleOffsetReverse = 0: if true, handle aligned with right or bottom of panel
• bounceDistance = 50px: how far bounce event will move everything
• bounceTimes = 4: how many bounces when 'bounce' is called
• positioning = fixed: or absolute, so tabs move when window scrolls
• pathToTabImage = null: optional image to show in the tab
• imageHeight = null:
• imageWidth = null:
• onLoadSlideOut = 0: slide out after DOM load
• clickScreenToClose = 1: close tab when rest of screen clicked
• toggleButton = .tab-opener: not often used
• onOpen = function() {:
• onClose = function() {:

syntaxe {up up text-fit=option_principale}texte{/up text-fit}

• text_fit: sélecteur du bloc. ex: h1, h1.foo, #id, h2#id, ...
• 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
• 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.
• tag = div: balise par defaut
• class: classe(s) pour bloc
• style: style inline pour bloc
• css-head (base-css): style ajouté dans le HEAD de la page

Création d'un sommaire à partir des titres de l'article
syntaxe {up toc}

• toc: inutilisé
• 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
• 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
• indexingFormats: format des index : nombres, lettres ou
• maxlen: longueur maxi des titres du sommaire
• heading: Titre du sommaire
• elementClass = uptoc: class de la div navigation
• rootUlClass = toc-ul-root:
• ulClass = toc-ul:
• levelPrefixClass = toc-level-: (interne) préfixe des classes

syntaxe {up tooltip=texte info-bulle}texte{/up tooltip}

• tooltip: texte de la bulle. bbcode permis
• model: une des classes principales définies dans up-model.scss
• position = center: left, right
• bottom (b,bas) = 0: vrai pour afficher la bulle au-dessous
• width (l,largeur,w) = 250: largeur maxi de l'info-bulle
• offset = 0: décalage verticcal de info-bulle. Négatif=vers le haut
• opacity = 95: transparence de l'info-bulle
• open = 0: info-bulle affichée au chargement de la page
• 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 tweeter-timeline=}
voir : dev.twitter.com/web/embedded-timelines/parameters

• tweeter_timeline: nom.
• style: classes et style inline bloc parent
• class: classe bloc parent (obsolète)
• 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

{up upactionslist} toutes les actions
{up upactionslist=action1, action2} une ou plusieurs actions
{up upactionslist | md} fichier marknote
{up upactionslist | csv} fichier CSV

• upactionslist: liste des actions à récupérer. toutes par défaut
• demo = 1: afficher le lien vers la demo
• style:
• class: (obsolète)
• filter: condition d'exécution
• make-dico = 0: consolide le fichier principal dico.json avec ceux des actions
• csv = 0: enregistre un tableau CSV des actions et options dans plugins/content/up/doc-actions.csv
• comment = 0: enregistre un tableau CSV des infos dans les commentaires des scripts dans plugins/content/up/comment-actions.csv
• md = 0: enregistre la documentation au format markdown dans plugins/content/up/doc-actions.md

syntaxe {up upPrefSet}

• upprefset: liste des actions ou vide pour toutes
• action-exclude = 0: 1: toutes les actions sauf celles du paramétre principal
• action-template = [h4]##action##[/h4]:
• prefset-template = [b]##prefset##[/b] : [small]##options##[/small]:
• info-template = [div class="bd-grey ph1"]##info##[/div]:
• prefset-separator = [br]:
• options-separator = [b class="t-vert"] | [/b]: les underscrores sont remplacés par des espaces
• prefset-exclude = icons,options: sections exclues
• export-prefs: ou sous-dossier de TMP pour sauver l'arborescence. ex : up-pref-foo
• 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)

syntaxe:
{up upscsscompiler} toutes les actions
{up upscsscompiler=action1, action2} une ou plusieurs actions
note: les fichiers SCSS & CSS sont en racine des dossiers actions

• upscsscompiler: liste des actions à recompiler. toutes par défaut
• mode = Compressed: Compressed, Compact, Crunched, Expanded, Nested
• force = 0: force la compilation de tous les SCSS. Par défaut: les SCSS plus récents que leur CSS.
• info = 0: affiche rapport compilation
• force-filter: oblige force si la condition est remplie

syntaxe {up website=URL}
par defaut, le texte affiche sous la vignette est l'URL sans http://

• website: URL 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 meme onglet
• 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: classes et style inline pour bloc
• class: classe(s) pour bloc (obsolete)
• css-head (base-css): regles CSS definies par le webmaster (ajout dans le head) v1.8