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

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

options secondaires

• filter: conditions. Voir doc action filter (v1.8)
• id: identifiant

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

Par défaut, le code est ajouté dans le head.
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

il est possible de demander un mot de passe
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)

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

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

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

syntax 1 {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

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

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)

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

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

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

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

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

Supprime tous les fichiers PHP du sous-dossier indiqué en option. com_content par défaut
syntaxe {up cache-cleaner=com_modules} // defaut : com_content

• cache_cleaner = com_content: liste des dossiers du cache (séparateur: point-virgule)

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

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)

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

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

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

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

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

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

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

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

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

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

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

Syntaxe : {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é

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 = ;: 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)

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 = ;: 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)

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 = ;: 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)

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

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

syntaxe {up donation=compte_paypal}

• donation: Votre adresse e-mail PayPal enregistrée ou votre identifiant PayPal
• template (item-template) = ##title## ##amount## ##currency## ##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

syntaxe : une alternance de titres pour les onglets en H4 et de contenu HTML
{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 pour le titre (onglet)
• title-style: style inline pour le titre

Définition des panneaux

• content-class: classe pour le contenu
• content-style: style inline pour le contenu

style et options secondaires

• id: identifiant
• css-head (base-css): style ajouté dans le HEAD

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

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

style et options secondaires

• id: Identifiant
• 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
• 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

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

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

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

Style du bloc

• main-tag (block) = div: balise principale
• 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)

Reprise du plugin LM-Filter de Lomart
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

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

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

• id: identifiant
• class: classe(s) ajoutée(s) au bloc parent
• style: style inline ajouté au bloc parent
• bloc-style: style inline ajoutés au bloc enfant
• css-head (base-css): style ajouté dans le HEAD de la page

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

Style

• 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: classe et style inline ajoutés au bloc enfant
• css-head (base-css): style ajouté dans le HEAD de la page
• id: identifiant

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

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 = ;: séparateur des colonnes
• no-content-html = en=content not found : %s;fr=contenu non trouvé : %s: message erreur. %s:nom fichier

Styles CSS

• id: Identifiant
• style: classes et styles
• css-head (base-css): style ajouté dans le HEAD de la page

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

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

syntaxe :
{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, ....

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

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

Syntaxe 1 :
{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

syntaxe 1 : {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 en px, em (px par defaut) - coté du carré dans lequel est inscrit l'image
• 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

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

avec adaptation de la taille image à celle de l'appareil et légendes
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: 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

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

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)

• random: tri aléatoire des images en mode shuffle
• 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 = 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 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 {}

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

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

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

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

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

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

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

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

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

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

syntaxe : {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
• sort-by = title: tri: title, rgt, created_time, modified_time, 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

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

• 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

syntaxe 1 : {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## ##link##
##intro## ##intro-text## ##intro-text,100## ##content##
##image## ##image-src## ##image-alt##
##date-crea## ##date-modif## ##date-publish##
##author## ##note## ##cat## ##cat-link## ##new## ##featured## ##hits## ##tags-list##
##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
• 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
• author: filtre sur auteur: liste des id ou article, current
• sort-by = publish_up: tri: title, ordering, created, modified, publish_up, id, hits
• 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 = &#x2B50: 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

syntaxe 1 : {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
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
• 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 = &#x2B50: 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

syntaxe : {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##
##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): 1 pour obtenir les catégories non publiées
• current: 1 pour inclure l'article en cours
• sort-by = title: tri: title, rgt, created, modified, id, hits
• 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

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

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

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

• 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"]&#x2605;[/b], [b class="t-jauneFonce"]&#x2605;[/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

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
• 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 : {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
• type-exclude: 1= tous les types sauf ceux passés en paramètre principal
• client: 0=site, 1=admin, 2=tous
• minimal-id = 10000: 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 = t-red: liste de choix : inactif, actif 🔴

Style CSS

• css-head (base-css): style ajouté dans le HEAD de la page

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

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

syntaxe : {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: ²
• 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

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)

Style CSS

• id: identifiant
• 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 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 JFactory::getLanguage()

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

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

Syntax 1 : {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): 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
• color: g (gris), p (pixellisé), red, green, ou blue

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: classe(s)
• style: classes et styles

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: rendu en niveau de gris
• sepia: rendu sépia

Style CSS

• id: identifiant
• 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: 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

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

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

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.

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

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

Basée sur l'API de Météo Concept permettant aux développeurs de site internet ou d'applications d'intégrer des données météorologiques de prévisions ou d'observations pour un lieu ou une station météo souhaitée.
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

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

Style CSS

• id: Identifiant
• class: classe(s) pour bloc parent
• style: style inline pour bloc parent

les types autorisés 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 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
• id: identifiant
• class: classe(s) pour bloc label
• style: style inline pour bloc label
• label: texte du lien pour afficher le popup. bbcode accepté
• close-left: 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 définies par le webmaster (ajout dans le head)
• base-js-params: règles JS définies 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: 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, ...

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

• note = texte masqué. HTML autorisé: texte à masquer

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
• id: id genérée automatiquement par UP
• class: classe(s) ajoutées au bloc principal
• style: style inline ajouté au bloc principal

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

Le fichier PDF peut-être hébergé sur le serveur ou ailleurs (url absolue)
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
• method (methode) = PDFJS: ou Google, Embed ... ou 0
• 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
• 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

syntaxe {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 contennat 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;fr=Telecharger: 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

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

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

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)

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
• id: identifiant

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

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.

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

• printer = &#x2399; 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

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

• qrcode = text: type de QRCode : text/url/sms/email/phone/location/wifi/contact
• size = 200: Largeur

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

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)

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

• readmore: idem textmore

Texte des boutons

• textmore = lire la suite: texte bouton OUVRIR
• textless = replier: texte bouton FERMER

Style des boutons

• textmore-class: classe et style pour le bouton OUVRIR
• textless-class: classe et style pour le bouton FERMER

Style pour le panneau contenu

• panel-style: classes et style pour le contenu (v2.6)

Style CSS des boutons

• id: identifiant
• class = uprm-btn: classe(s) pour les boutons OUVRIR et FERMER
• style: idem

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é
• 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 }

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

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

syntaxe :
{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-path
Les 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

syntaxe {up sitemap}

• sitemap: nom menutype exclus
• 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

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

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

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

syntaxe
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

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

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

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

informations sur la base de données

• dbinfos: vide= la liste des tables OU nom_table = la liste des colonnes

mise en forme du 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

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

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

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

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

syntaxe {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'
• 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

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

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

Création d'un sommaire à partir des titres de l'article
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

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

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

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

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

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

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

syntaxe {up upsearch=action1,action2 | regex=... | module}
Mots-clés pour template
##id## ##title## ##title-link## ##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

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

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