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

Cette liste d'actions est la documentation générée automatiquement par le plugin à partir des informations récupérés dans le code source de l'action.

➠ addclass : ajoute une classe à un sélecteur CSS (body par défaut.) ➠ DEMO

Il est possible :
- de cibler un parent du sélecteur CSS
- de créer la règle CSS avec l'option 'base-css=.foo[color:red]'
syntaxe {up addclass=nom_classe}
Utilisation : changer l'image de fond à partir d'un article

author LOMART version 1.0 license GNU/GPLv3

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, ...
css-head: code CSS pour head. Attention utiliser [] au lieu de {}

➠ addcodehead : ajoute du code libre dans le head. ➠ DEMO

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}

author LOMART version 1.0 license GNU/GPLv3

addcodehead: code à ajouter dans le head ou balise
xxx = yyy: couple attribut-valeur. ex: title=le titre, href=//google.fr

➠ addcsshead : ajoute du code ou fichier CSS dans le head. ➠ DEMO

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

author LOMART version 1.0 license GNU/GPLv3

addcsshead: code CSS. ATTENTION [ ] à la place des {}

➠ addscript : ajoute du code ou un fichier JS ou JQuery ➠ DEMO

Par défaut, le code est ajouté dans le head.
Si le paramètrre principal est body, le code est inséré à la position du shortcode
syntaxe {up addScript=body | jquery }code ou fichier{/up addScript}

author LOMART version 1.0 license GNU/GPLv3

addscript = head: ou body pour insérer le code à la position du shortcode
jquery = 0: 1: entoure avec appel jquery (sauf fichier)

➠ anim_aos : affiche du contenu avec des animations sur scroll de page (librarie en pure JS) ➠ DEMO

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}
animation :
fade-up, fade-down, fade-right, fade-left, fade-up-right, fade-up-left, fade-down-right, fade-down-left,
flip-left, flip-right, flip-up, flip-down,
zoom-in, zoom-in-up, zoom-in-down, zoom-in-left, zoom-in-right, zoom-out, zoom-out-up, zoom-out-down, zoom-out-right, zoom-out-left
easing :
linear, ease, ease-in, ease-out, ease-in-out, ease-in-back, ease-out-back, ease-in-out-back, ease-in-sine,
ease-out-sine, ease-in-out-sine, ease-in-quad, ease-out-quad, ease-in-out-quad, ease-in-cubic, ease-out-cubic,
ease-in-out-cubic, ease-in-quart, ease-out-quart, ease-in-out-quart
anchor-placement:
top-bottom, center-bottom, bottom-bottom, top-center, bottom-center, center-center, top-top, bottom-top

author Conseilgouz version v1.2 - 11/2019 license GNU/GPLv3 credit Script de michalsnik

anim_aos = zoom-in-right: nom de l'animation
delay: delai en millisecondes (50-3000 ms)
duration: durée animation en millisecondes (50-3000 ms)
easing: effet: linear, ease-in-back, ease-out-cubic, ease-in-sine
offset: en px, hauteur pour déclenchement par rapport au bas de l'écran.
anchor-placement: déclenche l'effet lorsque le scrolling de l'élément arrive à certaines positions
once: one-time effect or not
repeat: applique l'effet à tous les tags. Ex: h2,h3
style: style inline appliqué au bloc
class: classe(s) appliquée(s) au bloc
css-before: style de l'élément avant l'animation
css-after: style de l'élément après l'animation

➠ bg_image : Affiche une image en fond d'un bloc ➠ DEMO

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

author LOMART version 1.0 license GNU/GPLv3 credit Vegas de jaysalvat

bg_image: images séparées par des points-virgules
mobile: image ou règle(s) css (si smartphone)
path: chemin de base ajouté devant le nom des fichiers
bg-selector = body: sélecteur du bloc pour image(s) de fond
bg-color: couleur sous image
bg-repeat = no-repeat: répétition de l'image : no-repeat, repeat-x, repeat-y, repeat, space
bg-position = center: position de l'image : left
bg-size = cover: remplissage : cover, contain, 100%, 100px
bg-attachment = scroll: défilement de l'image : scroll, fixed, local
bg-overlay: image ajouté en overlay
page-selector: si block défini, sélecteur du bloc sur lequel appliquer la transparence
page-overlay = 70: transparence sous la forme 70, #RGBA, image overlay ou règle CSS
center: centrage vertical du contenu entre shortcodes
style: style inline pour bloc
base-css: règles CSS définies par le webmaster (ajout dans le head)

➠ bg_slideshow : Affiche une série d'images défilantes en fond du site ou d'un bloc ➠ DEMO

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

author LOMART version 1.0 license GNU/GPLv3 credit Vegas de jaysalvat

bg_slideshow: dossier ou images séparées par des points-virgules
mobile: image ou règle(s) css
path: chemin commun aux images indiquées en argument principal
bg-selector = body: bloc portant le slideshow
bg-overlay: calque superposé à l'image de fond (png, opacité, RGBA, CSS)
bg-color: couleur sous image
page-selector: bloc sur contenu
page-overlay: background de page-selector (png, opacité, RGBA, CSS)
center = 1: centrage vertical du contenu entre shortcodes
style: classes et styles inline pour bloc créé
base-css: règles CSS définies par le webmaster (ajout dans le head)
js-options: options non prévues par l'action
delay = 5000: durée par image
transition = fade: random,blur,flash,negative,burn,slideLeft,slideRight,slideUp,slideDown,zoomIn,zoomOut,swirlLeft,swirlRight
transitionDuration = 1000: durée transition
animation: kenburns,kenburnsLeft,kenburnsUp,kenburnsDown,kenburnsUpLeft,kenburnsUpRight,kenburnsDownLeft,kenburnsDownRight,random
animationDuration = auto: durée des animations
timer = 1: affiche barre de progression

➠ bg_video : Affiche une video locale ou youtube en fond de site ou dans un bloc ➠ DEMO

syntaxe :
fond site : {up bg-video=fichier video}
fond bloc : {up bg-video=fichier video}content{/up bg-video}
fond autre bloc : {up bg-video=fichier video | bg-selector=#foo}content{/up bg-video}

author LOMART version 1.0 license GNU/GPLv3 credit Script videoBackground de lemehovskiy

bg_video: fichier video ou ID video Youtube.
poster: fichier image affiché avant chargement vidéo
mobile: image ou css si un appareil mobile est détecté
bg-selector = body: bloc portant le slideshow
bg-position = 50% 50%: 50% 50% = position poster et video
bg-ratio = 16/9: proportion de la video
bg-overlay: calque superposé à l'image de fond (png, opacité, RGBA, CSS)
bg-color: couleur de fond sous la vidéo lors chargement
page-selector: bloc sur contenu
page-overlay: background de page-selector (png, opacité, RGBA, CSS)
center: style et classe pour centrage vertical du contenu entre shortcodes
style: classes et style inline pour bloc créé
class: classes pour bloc créé (deprecated)
base-css: règles CSS définies par le webmaster (ajout dans le head)

➠ box : affiche un titre et du texte dans une boite ➠ DEMO

Cette action n'est pas finalisée et devrait etre rémaniée en profondeur !
syntaxe: {up box=titre}contenu HTML{/up box}

author LOMART update 2017-07-15 version v1.0 license GNU/GPLv3

box: titre de la box
model: [danger, info] classe prédéfinie
box-class: class user
box-style: style inline
title-class: class user pour titre
title-style: style inline pour titre
content-class: class user pour contenu
content-style: style inline pour contenu
css-head: style CSS inséré dans le HEAD

➠ cell : affiche de 1 à 6 blocs enfants sur une même ligne ➠ DEMO

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

demo up.lomart.fr author Lomart version 1.0 - 08/2017 license GNU/GPLv3

cell = 12: nombre de colonnes
mobile: nombre de colonnes sur petit écran
tablet: nombre de colonnes sur moyen écran
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

➠ center : Centre tous les blocs enfants en supprimant les margins superflus ➠ DEMO

syntaxe {up center=classe/style(s)}contenu{/up center}
note: cette action reconnait les classes et les styles dans : bg-jaune;color:red

author LOMART version 1.0 license GNU/GPLv3

center: classe(s) et style(s) pour le bloc interne (celui qui est centré)
class: classe(s) pour bloc
style: style inline pour bloc
base-css: règles CSS définies par le webmaster (ajout dans le head)

➠ clocks_gmt : Affiche une horloge analogique et/ou digitale avec l'heure d'un fuseau horaire ➠ DEMO

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

author LOMART version 1.0 license GNU/GPLv3 credit script jClocksGMT de mcmastermind

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

➠ corner : Affiche un texte sur ruban dans un angle ➠ DEMO

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

author LOMART version 1.0 license GNU/GPLv3

corner: texte affiché dans le coin ou ruban
position = top-left: angle sous la forme top-left ou tl
width (l,largeur,w) = 100px: coté du carré
height (h,hauteur) = 100px: coté du carré
angle = 45: angle en valeur absolue
filter: chaine de conditions. Voir documentation filter
shadow = 0: ajoute une ombre 'orientée' au corner. La valeur indiquée est la force de l'ombre
color = white: couleur du texte
bgcolor = red: couleur de fond du coin
class: classes pour le coin
style: style CSS pour le coin
url: lien
target = _blank: ou _self pour ouvrir le site dans le même onglet
bloc-class: classe(s) pour bloc
bloc-style: style inline pour bloc
base-css: règles CSS définies par le webmaster (ajout dans le head)

➠ countdown : affiche un compte à rebours ou une horloge digitale ➠ DEMO

syntaxe:
{up countdown=201801010000} // délai jusqu'à une date
{up countdown=120} // compte à rebours en secondes
{up countdown} // affiche une horloge

author Lomart version v1.0 - 20/07/2017 license GNU/GPLv3 credit Lexxus - jq-timeTo

countdown: date, nombre de secondes ou vide pour horloge
align: left, center ou right
class: classe
style: style inline
callback: Fonction appellée à la fin du compte à rebours
captionSize = 0: fontsize legendes
countdown = true: false = horloge, true = countdown
countdownAlertLimit = 10: alerte en seconde avant fin countdown
displayCaptions = false: true = légendes affichées
displayDays = 0: nb chiffres affichés pour jours
fontFamily = Verdana, sans-serif: Police pour chiffres
fontSize = 28: Taille police en pixels pour chiffres
lang = en: Défini automatiquement par UP
seconds = 0: Temps initial en secondes pour le compte à rebours
start = true: démarrer automatiquement la minuterie
theme = white: black ou blue
timeTo: date, nb secondes ou vide pour horloge

➠ counter : Ajoute un compteur avec prefix et suffix ➠ DEMO

{up counter=0,100}

author LOMART version 1.0 license GNU/GPLv3 inspired jquery-simple-counter de marcovincit

counter: nombre de paragraphe
class: classe(s) pour bloc
style: style inline pour bloc
width (l,largeur,w) = 0: largeur minimal (par défaut en pixels)
mono = 1: force la police en monospace
base-css: règles CSS définies par le webmaster (ajout dans le head)
start = 0: valeur de départ du compteur
end = 100: valeur d'arrivée du compteur
easing = swing: ou linear : effet
duration = 1500: durée du décompte en millisecondes
prefix: texte devant compteur. HTML autorisé
suffix: texte après compteur. HTML autorisé

➠ csv2def : Conversion d'un contenu au format CSV en liste de définition (DL/DT/DD) ➠ DEMO

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}

author LOMART version 1.0 license GNU/GPLv3

csv2def: chemin vers fichier à afficher
separator = ;: separateur des colonnes (fichier uniquement)
HTML = 0: pour fichier (contenu CSV): 0=affiche le rendu, 1=affiche le code ou liste des tags conserves (strip_tags)
model = stack: empile par defaut, sinon nom de la classe principale : flex. Voir csv2def.css
class: classe(s) pour la balise DL
style: style inline pour la balise DL
term-class: classe(s) pour le bloc des termes
term-style: style pour le bloc des termes
term-style-separator: style pour separer les differents termes
def-class: classe(s) pour le bloc des definitions
def-style: style pour le bloc des definitions
def-style-separator: style pour separer les differentes definitions
base-css: règles CSS définies par le webmaster (ajout dans le head)
flex-vgap = 10: espace vertical (px) entre les blocs dt/dd
flex-hgap = 10: espace horizontal (px) entre les blocs dt et dd
flex-term-width = 25: largeur en pourcentage de la colonne des termes

➠ csv2list : Conversion d'un contenu au format CSV en liste avec point de conduite ➠ DEMO

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

author LOMART version 1.0 license GNU/GPLv3

csv2list: chemin vers fichier à afficher
separator = ;: separateur des colonnes
HTML = b,a,span,strong,i,em,u,mark,small,img,code: 0= aucun traitement, 1=affiche le code, ou liste des tags a garder (strip_tags)
model = stack: nom de la classe modele dans le fichier csv2list.css
leaders = 0: points de conduite
leaders-color: couleur points de conduite
class: classe(s) pour la balise UL
style: style inline pour la balise UL
col-style-*: style inline pour les nièmes balise SPAN
list-style: code hexadecimal et couleur du caractère (bb,red ou 26BD,#F00)
bgcolor: couleur de fond. #FFF par defaut
header = 0: 0: pas de titre, 1: premiere ligne contenu, titre colonne
header-class: classe(s) pour la première balise LI si titre
header-style: style pour la première balise LI si titre
header-bgcolor: couleur de fond du titre
footer = 0: 0: pas de pied, 1: derniere ligne contenu, pied colonne
footer-class: classe(s) pour la dernière balise LI si pied
footer-style: style pour la dernière balise LI si pied
footer-bgcolor: couleur de fond de la dernière ligne
base-css: règles CSS définies par le webmaster (ajout dans le head)

➠ csv2table : Conversion d'un contenu au format CSV en table ➠ DEMO

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}

author LOMART version 1.0 license GNU/GPLv3

csv2table: URL ou chemin et nom d'un fichier local
prefset: jeu d'options défini par le webmaster dans prefs.ini
separator = ;: separateur des colonnes
HTML = 0: 0= aucun traitement, 1=affiche le code, ou liste des tags a garder (strip_tags)
model: nom de la classe modele dans le fichier csv2table.css
class: classe(s) pour la table
style: style inline pour la table
col: alignement et largeur des colonnes sous la forme x-D-C5-100 pour rien-droite-centre 5%-100% (voir doc)
col-style-*: style inline pour tous les blocs colonnes. sinon voir style-1 à style-6
color-contrast: couleur des lignes impaires. la couleur des lignes paires est à définir dans class ou style
header = 0: 0: pas de titre, 1: premiere ligne contenu, titre colonne
header-class: classe(s) pour la balise thead
header-style: style pour la balise thead
footer = 0: 0: pas de pied, 1: derniere ligne contenu, pied colonne
footer-class: classe(s) pour la balise tfoot
footer-style: style pour la balise tfoot
base-css: règles CSS définies par le webmaster (ajout dans le head)

➠ facebook_timeline : affiche la timeline Facebook ➠ DEMO

{up facebook=facebook id}
voir https://developers.facebook.com/docs/plugins/page-plugin

author PMLECONTE version v1.1 du 28/05/2018 license GNU/GPLv3

facebook_timeline: ID facebook. Voir https://findmyfbid.com
class: classe bloc parent
style: style inline bloc parent
tabs = timeline: Onglets à afficher, par exemple : timeline, events, messages
adaptwidth = 1: Essayer d’adapter la largeur au conteneur.
facepile = 1: Affiche les photos de profils quand des amis aiment le contenu.
hidecover = 0: Masque la photo de couverture dans l’en-tête
smallheader = 0: Utiliser un en-tête réduit
width (l,largeur,w) = 500: La largeur du plugin en pixels. Valeur mini = 180, maxi = 500
height (h,hauteur) = 500: La hauteur du plugin en pixels. valeur mini = 70.

➠ faq : accordion très simple ➠ DEMO

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

author lomart version v1.0 - 15/07/2017 license GNU/GPLv3 credit ryans temkoski

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

➠ file : Force le téléchargement d'un fichier ➠ DEMO

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}

author LOMART date 2017-12-04 version 1.0 license GNU/GPLv3

file: chemin et nom du fichier à télécharger
download: vide ou nom du fichier récupéré par le client
icon = 32: chemin et nom de l'icone devant le lien ou taille de l'icone selon extension du fichier (16 ou 32)
target: argument ou _blank si option sans argument
rel: nofollow, noreferrer, ...
class: classe(s) pour la balise a
style: style inline pour la balise a

➠ file_download : Gestionnaire simple de téléchargements avec stats et protection par mot de passe ➠ DEMO

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## ##filename-link## ##filename## ##icon##
##hit## ##lastdownload##
##info## ##size## ##date##

author LOMART version 1.0 license GNU/GPLv3

file_download: fichier ou dossier
extensions = zip,rar,pdf: extensions autorisées
sort-by = name: TODO ou date-desc
template = ##icon## ##filename-link## (##size## - ##date##) <small>##hit## ##lastdownload##</small> ##info##:
main-tag = ul: balise pour la liste des fichiers
main-style: style pour la liste des fichiers
main-class = list-none: classes pour la liste des fichiers
item-tag = li: balise pour un bloc fichier
item-style: style pour un bloc fichier
item-class: classes pour un bloc fichier
link-style: style pour le lien (classes admises)
icon = 32: chemin et nom de l'icone devant le lien ou taille de l'icone selon extension du fichier (16 ou 32)
password: mot de passe pour télécharger le fichier
format-date = lang[en=m/d/Y H:i;fr=d/m/Y H:i]: 'd/m/Y H:i'
model-hit = téléchargé %s fois:
model-lastdownload = dernier téléchargement le %s:
model-info = %s:
class: classe(s) pour bloc
style: style inline pour bloc
filter:
base-css: règles CSS définies par le webmaster (ajout dans le head)

➠ file_view : Force le chargement d'un fichier pour l'afficher en brut ➠ DEMO

syntaxe {up file-view=chemin fichier}
Utilisation :
- charger du contenu récurrent à plusieurs pages
- voir un fichier CSV
- voir le code HTML

author LOMART version 1.0 license GNU/GPLv3

file_view: chemin et nom du fichier
HTML = 0: 0= aucun traitement, 1=affiche le code, ou liste des tags a garder (ex: img,a)
EOL = 0: forcer un retour à la ligne
block (bloc) = div: balise principale
class: classe(s) pour bloc
style: style inline pour bloc
base-css: règles CSS définies par le webmaster (ajout dans le head)

➠ filter : affiche du contenu si toutes les conditions sont remplies ➠ DEMO

Reprise du plugin LM-Filter de Lomart
{up filter | datemax=20171225}
contenu si vrai
{====}
contenu si faux
{/up filter}
Le contenu si faux est optionnel. Il doit être après le contenu si vrai et séparé par {===} (au minima 3 signes égal)
{up filter | admin} contenu si vrai {====} contenu si faux {/up filter}
--> affiche si admin connecté. admin=0 affiche si admin NON connecté

author Lomart version 1.0 license GNU/GPL

filter: aucun argument prévu
datemax: vrai jusqu'à cette date AAAAMMJJHHMM
datemin: vrai à partir de cette date AAAAMMJJHHMM
period: vrai entre ces dates AAAAMMJJHHMM-AAAAMMJJHHMM
day: liste des jours autorisés. 1=lundi, 7=dimanche
month: liste des mois autorisés. 1=janvier, ...
hmax: vrai jusqu'à cette heure HHMM
hmin: vrai à partir de cette heure HHMM
hperiod: vrai entre ces heures HHMM-HHMM
guest: vrai si utilisateur invité
admin: vrai si admin connecté
user: liste des userid autorisé. ex: 700,790
username: liste des username autorisé. ex: admin,lomart
group: liste des usergroup autorisé. ex: 8,12
lang: liste des langages autorisé. ex: fr,ca
mobile: vrai si affiché sur un mobile
homepage: vrai si affiché sur la page d'accueil
server-host: vrai si le domaine du serveur contient un des termes de la liste
server-ip: vrai si l'adresse IP du serveur des dans la liste

➠ flexauto : une grille responsive sur plusieurs colonnes ➠ DEMO

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

author Lomart version 1.0 - juillet 2017 license GNU/GPLv3

flexauto = 3: nombre de colonnes sur grand écran
tablet = 2: nombre de colonnes sur moyen écran
mobile = 1: nombre de colonnes sur petit écran
class: classe(s) ajoutée(s) au bloc parent
style: style inline ajouté au bloc parent

➠ flexbox : affiche des blocs enfants dans une grille FLEXBOX responsive ➠ DEMO

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 : col=4-8 ou col=33-66 pour 2 colonnes (équivalent: span4 et span8)

demo up.lomart.fr/css author Lomart version 1.0 - 08/2017 license GNU/GPLv3

flexbox = 6-6: nombre de colonnes
mobile: nombre de colonnes sur petit écran
tablet: nombre de colonnes sur moyen écran
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

➠ gmap (googlemap) : affiche une carte google pour une adresse ➠ DEMO

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

author lomart version 1.0 - Juillet 2017 license GNU/GPLv3

gmap (googlemap): adresse postale
width (l,largeur,w) = 100%: largeur de la carte
height (h,hauteur) = 300px: hauteur de la carte
class: classe
style: style-inline

➠ googlefont : ajoute une police GoogleFont, ainsi qu'une classe pour l'utiliser ➠ DEMO

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

...

author LOMART version 1.0 (17/08/17) license GNU/GPLv3

googlefont: nom police
size: ajout font-size et line-height
family: famille de substitution (cursive, fantasy)
className: nom de la classe pour utiliser la police
css-head: complément de css: color, font-size, ....

➠ hr : affiche un trait horizontal avec une icône et/ou du texte ➠ DEMO

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

author Lomart version v1.0 license GNU/GPLv3

hr: nom icone, code unicode, chemin image ou nom dans prefs.ini + color, size
hr-border-top = 3px double #666: style du trait supérieur
hr-border-bottom: style du trait inférieur
hr-width = 100%: largeur du trait
hr-height: hauteur pour bg
hr-bg: argument pour background : couleur, dégradé, image
hr-align = center: position de la ligne : left, center, right
hr-style: style inline pour la ligne
hr-class: classe pour la ligne
icon: icon. admet raccourci icon, size, color
icon-text: texte en remplacement ou après l'icone
icon-size = 24px: taille icone en px, rem (px par defaut) - coté du carré dans lequel est inscrit l'image
icon-color: couleur pour icon et texte
icon-bg = #fff: couleur de fond
icon-space = 4px: espace entre icon et trait
icon-h-offset: décalage horizontal en px ou rem négatif pour aller vers la gauche
icon-v-offset = 0: décalage vertical dans la même unité que icon-size. Par défaut moitié de icon-size
icon-style: style inline pour l'icône ou le texte
icon-class: classe pour l'icône ou le texte IMPOSSIBLE
fontname = icomoon: pour icomoon ou FontAwesome ou autres (a mettre dans pref.ini)
prefset: nom d'un jeu d'options dans prefs.ini

➠ html : permet de créer une entité HTML (balise) avec classe(s), style et attribut sans passer en mode code ➠ DEMO

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

author LOMART 2017-08 license GNU/GPLv3

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

➠ icon : uniformise l'appel des icons. Evite de passer en mode code pour la saisie ➠ DEMO

syntaxe : {up icon=nom_icone}
Important : indiquer dans prefs.ini le préfixe pour la police d'icones installée sur le site

author Lomart version v1.0 license GNU/GPLv3

icon: jeu d'options ou src color size
prefix = icon-: pour icomoon ou 'fa fa-' pour font-awesome (a mettre dans pref.ini)
fontname = icomoon: pour icomoon ou FontAwesome ou autres (a mettre dans pref.ini)
src: nom icone, code unicode, chemin image (indispensable si prefset)
size: taille icone en px, em (px par defaut) - coté du carré dans lequel est inscrit l'image
color: couleur
color-hover: couleur lors survol icone (sauf image et unicode coloré)
style: style inline
class: classe
selector: retour sous forme propriétés CSS pour ce selecteur
info = 0: 1 pour afficher la liste des icons définies dans prefs.ini

➠ image_compare : comparaison de 2 images par déplacement d'un volet ➠ DEMO

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

author lomart version 1.0 - Juillet 2017 license GNU/GPLv3 credit script de Sylvain Combes

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

➠ image_gallery : Affiche une ou plusieurs images dans une lightbox ➠ DEMO

avec adaptation de la taille image au device et legendes
syntaxe 1 {up image-gallery=chemin_image | alt=texte}
syntaxe 2 {up image-gallery=chemin_dossier}
syntaxe 3 {up image-gallery}contenu avec des images{/up image-gallery}

author LOMART version 1.0 license GNU/GPLv3 credit jqPhotoSwipe de Ergec - photoswipe.com - Masonry

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
nb-img = 0: nombre de vignette affiché pour la galerie d'un dossier, 0 = toutes
gallery = 1: affiche la galerie dans une lightbox
legend: label pour image unique
legend-type = 2: 0:aucune, 1:hover-top, 2:hover-bottom, 3:sous l'image
class: classe(s) pour bloc principal
style: style inline pour bloc principal
img-class: classe(s) pour bloc figure avec image et legende
img-style: style inline pour bloc avec image et legende
legend-class: classe(s) pour la légende vignette
legend-style: style pour la légende vignette
img-sizes: largeur image en pourcentage de wmax-page en mode desktop, tablette et mobile. 100,100,100 par defaut
wmin-image = 600: largeur mini de l'image pour prise en charge
wmax-page = 1200: largeur maxi du conteneur contenu de la page
wmax-lightbox = 1200: largeur image dans lightbox
wmax-lightbox-mobile = 768: largeur image dans lightboox sur mobile ou 0 pour desactiver. Multiplié par pixel-ratio
pixel-ratio = 0: facteur DPR. ex: 0:sans, vide, 1 ou 2: 2, 3:3
quality = 70: taux compression jpeg
similarity = 80: taux minimal. Si la largeur entre 2 images alternatives est inferieure a 80%, la plus petite n'est pas cree
bp-tablet = 768: point de rupture tablette
bp-mobile = 480: point de rupture smartphone

➠ image_hover : affiche une image avec un contenu HTML avec effets lors du survol ➠ DEMO

{up imagehover=images/image.jpg | effect=xx}
-- contenu HTML affiché au survol
{/up imagehover}
Voir la démo pour les numéros des effets

author Lomart version 1.0 - juillet 2017 license GNU/GPLv3 credit Sanjay Jadon

image_hover: nom de l'image
effect = 11: nom de l'effet à trouver sur le site démo
class: classe pour bloc externe (deprecated)
style: style inline pour bloc externe
img-class: classe pour image (deprecated)
img-style: style inline pour image
text-class: classe pour bloc texte lors survol (deprecated)
text-style: style inline pour bloc texte lors survol
css-head: code css pour le head. ATTENTION [] au lieu de {}

➠ image_magnify : affiche un effet de loupe sur une image ➠ DEMO

syntaxe {up image-magnify=imgage | imgzoom=image-pour-zoom}

author LOMART version 1.0 license GNU/GPLv3 credit thdoan

image_magnify: fichier image normale
imgzoom: fichier image utilisé pour le zoom
size: diametre de la loupe en pixel
radius: diametre de la loupe en pixel
border: modele de bordure pour la loupe
class: classe(s) ajoutées au bloc principal
style: style inline ajouté au bloc principal

➠ image_pannellum : Affiche un panorama 3D à partir d'une image equirectangular ➠ DEMO

syntaxe {up image_pannellum=chemin_image_equirectangular}

author LOMART version 1.0 license GNU/GPLv3 credit script pannellum de Matthew Petroff.

image_pannellum: chemin de l'image
height (h,hauteur) = 400px: hauteur en px ou vh
width (l,largeur,w) = 100%: largeur en px ou %
options: liste des options supplémentaires . ex: showZoomCtrl:true,compass:true - Attention au min/maj. voir cette page
language: liste motclé (bylineLabel,loadButtonLabel,loadingLabel) + traduction. Exemple:bylineLabel:lang[en=by %s;fr:par %s], loadingLabel:Loading...
fullscreen = 0: 1 pour autoriser la vue plein écran
class: classe(s) ajoutées au bloc principal
style: style inline ajouté au bloc principal
base-css: règles CSS définies par le webmaster (ajout dans le head)
panorama: chemin image (il est rempli automatiquement)
preview: chemin image preview
type = equirectangular: type de l'image
title (titre): titre. pseudo BBCode et traduction acceptes
author: auteur. pseudo BBCode et traduction acceptes
authorURL: lien vers site auteur
autoLoad = false: chargement auto de l'image
autoRotate = 0: rotation nombre de degres par seconde
showControls = 1: 0 pour masquer tous les boutons
showZoomCtrl = 1: 0 pour masquer les boutons +/- du zoom
showFullscreenCtrl = 1: 0 pour masquer le bouton plein ecran
hotSpotDebug = false: 1 pour afficher les coordonnées hotspot dans la console

➠ image_rollover : Change l'image au survol ➠ DEMO

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

author LOMART version 1.0 license GNU/GPLv3

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

➠ imagemap : une image clicable et responsive ➠ DEMO

syntaxe {up imagemap=chemin_image}
< area target="" alt="" title="" href="/" coords="" shape="">;
< area target="" alt="" title="" href="/" coords="" shape="">;
{/up imagemap}
utiliser un générateur en ligne pour définir les zones : www.image-map.net

author LOMART version 1.0 du 10-12-17 license GNU/GPLv3 credit script RWD Image Maps de stowball

imagemap: le chemin et nom de l'image
class: classe(s) ajoutées au bloc principal
style: style inline ajouté au bloc principal

➠ jcategories_by_tags : liste des catégories d'un mot-clé (tag) ➠ DEMO

syntaxe : {up jcategories-by-tags=id-ou-nom-tag}
MOTS-CLES :
##title## ##title-link## ##subtitle## ##link##
##intro## ##intro-text## ##intro-text,100## ##content##
##image## ##image-link## ##image-src## ##image-alt##
##date-crea## ##date-modif## ##new## ##count## ##hits## ##tags-list##

author LOMART version 1.0 license GNU/GPLv3

jcategories_by_tags: ID ou nom du tag
maxi: Nombre maxi d'article dans la liste
no-published (no_published) = 0: 1 pour obtenir les catégories non publiées
sort-by = title: tri: title, rgt, created_time, modified_time, id, hits
sort-order = asc: ordre de tri : asc, desc
prefset: jeu d'options défini par le webmaster dans prefs.ini
template: modèle de mise en page. Si vide le modèle est le contenu
main-tag = div: balise pour le bloc englobant tous les articles. 0 pour aucun
main-style: classes et styles inline pour bloc principal
main-class: classe(s) pour bloc principal (obsoléte)
item-tag = div: balise pour le bloc englobant tous les articles. 0 pour aucun
item-style: classes et styles inline pour bloc principal
item-class: classe(s) pour bloc principal (obsoléte)
image-src: lorempixel.com/150/150', // image par défaut
image-alt = news: image, texte alternatif par défaut
date-format = %e %B %Y: format pour les dates
date-locale: format pour les dates. Par défaut, celle du navigateur client.
new-days = 30: nombre de jours depuis la création de l'article
new-html = <span class="badge-rouge">nouveau</span>: code HTML pour badge NEW
tags-list-prefix: texte avant les autres eventuels tags
tags-list-style: classe ou style pour les autres mots-clés
no-content-html = <p>aucune catégorie pour ce mot-clé</p>: retour si aucune catégorie trouvée
css-head:

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

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

author LOMART version 1.0 license GNU/GPLv3

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

➠ jcontent_by_tags : liste des catégories d'un mot-clé (tag) ➠ DEMO

syntaxe : {up jcategories-by-tags=id-ou-nom-tag}
Les mots-clés :
##title## ##title-link## ##subtitle## ##link##
##intro## ##intro-text## ##intro-text,100## ##content##
##image## ##image-link## ##image-src## ##image-alt##
##date-crea## ##date-modif##
##cat## ##new## ##hits## ##tags-list##

author LOMART version 1.0 license GNU/GPLv3

jcontent_by_tags: ID ou nom du tag
maxi: Nombre maxi d'article dans la liste
no-published (no_published) = 0: 1 pour obtenir les catégories non publiées
sort-by = title: tri: title, rgt, created, modified, id, hits
sort-order = asc: ordre de tri : asc, desc
prefset: jeu d'options défini par le webmaster dans prefs.ini
template: modèle de mise en page. Si vide le modèle est le contenu
main-tag = div: balise pour le bloc englobant tous les articles. 0 pour aucun
main-style: classes et styles inline pour bloc principal
main-class: classe(s) pour bloc principal (obsoléte)
item-tag = div: balise pour le bloc englobant tous les articles. 0 pour aucun
item-style: classes et styles inline pour bloc principal
item-class: classe(s) pour bloc principal (obsoléte)
image-src: lorempixel.com/150/150', // image par défaut
image-alt = news: image, texte alternatif par défaut
date-format = %e %B %Y: format pour les dates
date-locale: format pour les dates. Par défaut, celle du navigateur client.
new-days = 30: nombre de jours depuis la création de l'article
new-html = <span class="badge-rouge">nouveau</span>: code HTML pour badge NEW
tags-list-prefix: texte avant les autres eventuels tags
tags-list-style: classe ou style pour les autres mots-clés
no-content-html = aucune catégorie pour ce mot-clé: retour si aucune catégorie trouvée
css-head:

➠ jcontent_in_content : Affiche le contenu d'un article dans un autre ➠ DEMO

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

author LOMART version 1.0 license GNU/GPLv3

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

➠ jcontent_list (article_category) : liste des articles d'une catégorie ➠ DEMO

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 article-category}

author LOMART version 1.0 license GNU/GPLv3

jcontent_list (article_category): ID de la catégorie ou vide pour celle de l'article actuel
maxi: Nombre maxi d'article dans la liste
no-published (no_published) = 1: Liste aussi les articles non publiés
sort-by = title: tri: title, ordering, created, modified, publish_up, id, hits
sort-order = asc: ordre de tri : asc, desc
author: filtre sur auteur: liste des id ou article, current
main-style: classes et styles inline pour bloc principal
style: idem main-style
main-class: classe(s) pour bloc principal (obsoléte)
class: idem main-class
title (titre): titre HTML si article trouvé.
title-tag = h3: niveau du titre
title-style: classes et styles inline pour le titre
title-class: classe(s) pour le titre (obsoléte)
list-style: classes et styles inline pour la liste
list-class: classe(s) pour la liste (obsoléte)
css-head: code CSS dans le head

➠ kawa (coffee) : Sert un café virtuel ➠ DEMO

syntaxe {up kawa=long | sucre | speculoos=lotus }

author LOMART version 1.0 license GNU/GPLv3

kawa (coffee): vide = café court, long = café long
sucre (sugar) = 1: option sucre
speculoos: speculoos base ou spécifier marque (lotus)
class: classe(s) pour bloc
style: style inline pour bloc

➠ lang : Choix de contenu selon langue visiteur ➠ DEMO

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

author LOMART version 1.0 license GNU/GPLv3

lang: langue pour vérifer le rendu (vide en production)
lang-order = en,fr: ordre de saisie des langue dans contenu
tag: balise entourant le contenu retourné
class: classe(s) pour bloc
style: style inline pour bloc
prefset: inutilisé
base-css: règles CSS définies par le webmaster (ajout dans le head)

➠ lorem : Affiche du texte aléatoire (enrichissement possible) ➠ DEMO

.
Syntaxe : {up lorem=liste des arguments ci-dessous }
- (integer) - Nombre de paragraphe (P) généré. 4 par défaut
- short, medium, medium, verylong - La longueur moyenne d'un paragraphe.
- decorate - ajoute bold, italic, ...
- link - ajoute des liens.
- ul - ajoute listes.
- ol - ajoute listes ordonnées.
- dl - ajoute listes description.
- bq - ajoute bloc citation
- code - ajoute des exemples de code.
- headers - ajoute des titre hx.
- allcaps - TOUT EN MAJUSCULES.
- prude - version prude.
- plaintext - Retourne text sans balise HTML.
exemple appel : https://loripsum.net/api/2/code/decorate
.
Pour avoir un texte sans aucun tag, utilisez : {up lorem=2,plaintext | tag=0}.
Même sans balise P, le nombre de paragraphes influe sur la longueur du texte retourné.

author Lomart version 1.0 - 07/2017 license GNU/GPLv3

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

➠ lorem_placeimg : affiche une image aleatoire ➠ DEMO

Syntaxe :
{up lorem-placeimg=catégorie | width=xx | height=xx | grayscale | sepia }
--> catégorie = any, animals, arch, nature, people, tech

author Lomart version 09/2018 license GNU/GPLv3

lorem_placeimg = any: type d'image: any, animals, arch, nature, people, tech
height (h,hauteur) = 200: hauteur image téléchargée
width (l,largeur,w) = 200: largeur image téléchargée
grayscale = 0: rendu en niveau de gris
sepia = 0: rendu e sépia
class: classe(s) (obsolète)
style: classes et styles

➠ lorem_unsplash : affiche une image aleatoire ➠ DEMO

Syntaxe : {up lorem-unsplash=#image | width=xx | height=xx }
rechercher n° image sur https://picsum.photos/images

author Lomart version 07/2017 license GNU/GPLv3

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
class: classe(s) (obsolète)
style: classes et styles

➠ lorempixel : affiche une image aleatoire ➠ DEMO

Syntaxe : {up lorempixel=type | width=xx | height=xx }
--> type = abstract, animals, business, cats, city, food, nightlife, fashion, people nature, sports, technics, transport
.
Note : width & height sont les dimensions de l'image retournée par lorempixel. Pour l'afficher en remplissant le bloc parent, il faut ajouter style=width:100%

author Lomart version 07/2017 license GNU/GPLv3

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

➠ markdown : Affiche du contenu MARKDOWN provenant d'un fichier ou saisi entre les shortcodes ➠ DEMO

syntaxe 1: {up markdown}contenu{/up markdown}
syntaxe 2: {up markdown=nom_fichier_md}
.
Utilisation : afficher un fichier changelog.md

author LOMART version 1.0 crédit erusev/parsedown license GNU/GPLv3

markdown: chemin et nom du fichier markdown ou vide pour contenu
strip_tags = true: 0 pour conserver les tags HTML dans le contenu saisi entre les shortcodes. Ils sont toujours conservés si la source est un fichier.
class: classe(s) pour bloc (obsolète)
style: classes et styles pour bloc

➠ marquee : contenu HTML défilant horizontalement ou verticalement ➠ DEMO

{up marquee=label} texte du message défilant {/up marquee}

author Lomart version 1.0 - 28/7/2017 license GNU/GPLv3 credit script JS limarquee de omcg33

marquee: le texte de l'etiquette
height (h,hauteur) = 100px: hauteur defaut pour scroll vetical
model = base: style CSS dans .upmq-*style*. aucun=none
out-class: classe(s) pour div out
out-style: style inline pour div out
msg-class: classe(s) pour div msg
msg-style: style inline pour div msg
lbl-class: classe(s) pour div label
lbl-style: style inline pour div label
lbl-pos: position label : left, right, top, bottom, none
lbl-nowrap = false: true = label sur une ligne
direction = left: right, up, down
loop = -1: nombre d'affichage, -1 : infini
scrolldelay = 0: delai en millisecondes
scrollamount = 50: vitesse
circular = true: mode carousel. si contenu plus large que .str_wrap
drag = true: deplacement msg avec souris
runshort = true: scroll si texte court (visible sans scroll)
hoverstop = true: pause lors survol
inverthover = false: scroll uniquement lors survol

➠ media_plyr (vimeo,audio,video) : affiche un lecteur video ou audio qui s'inscrit au maxima dans son bloc parent ➠ DEMO

{up media_plyr=yt | code=bTqVqk7FSmY }
{up media_plyr=vimeo | code=bTqVqk7FSmY }
media_plyr : precisez yt ou youtube ou vimeo
code : il s'agit du code figurant dans l'URL de la vidéo.
.
{up media_plyr=video | poster=url image | mp4 | webm | vtt | download }
media_plyr : video pour indiquer l'URL vers la video.
poster : nom de l'image fixe
mp4, webm, vtt, download : si URL non spécifiée, elle sera déduite de celle pour 'poster'
.
{up media_plyr=audio | mp3=url fichier mp3 | ogg}
media_plyr : audio
mp3 : url vers fichier MP3 (obligatoire)
ogg : si URL non spécifiée, elle sera déduite de celle pour 'MP3'
.

author DANEEL & LOMART version v1.0 du 30-09-2017 license GNU/GPLv3

media_plyr (vimeo,audio,video): type de lecture : youtube, vimeo, video ou audio
code: code de la video (à la fin de l'url youtube ou vimeo)
poster: URL de l'image (obligatoire)
mp4: URL du fichier MP4. Si vide, on utilise le nom de poster
webm: URL du fichier WEBM. Si vide, on utilise le nom de poster
vtt: URL du fichier VTT pour sous-titrage. Si vide, on utilise le nom de poster
download: URL du fichier téléchargeable. Si vide, on utilise le nom du fichier MP4
mp3: URL du fichier audio mp3. (obligatoire)
ogg: URL du fichier audio ogg. Si vide, on utilise le nom du fichier MP3
class: classe(s) ajoutée(s) au bloc extérieur
style: style inline ajouté au bloc extérieur

➠ media_youtube (youtube) : affiche une video Youtube qui s'inscrit au maxima dans son bloc parent ➠ DEMO

{up media-youtube=ID}
ID : il s'agit du code figurant à la fin de l'URL de la vidéo.

author LOMART version v1.0 du 01-07-2017 license GNU/GPLv3

media_youtube (youtube): code de la video (à la fin de l'url youtube)
width (l,largeur,w): largeur de la video en px ou %
class: classe pour bloc externe
style: code css libre pour bloc externe

➠ meteo_france : affiche le widget de Météo France ➠ DEMO

Syntaxe : {up meteo-france=ville | orientation=sens}
https://public.opendatasoft.com/explore/dataset/correspondance-code-insee-code-postal/api/?flg=fr&q=75001
https://api.gouv.fr/api/api-geo.html#!/Communes/get_communes

author LOMART update 2017-07-01 version v1.0 du 01-07-2017 license GNU/GPLv3

meteo_france: le code commune de la ville à récupérer sur http://www.meteofrance.com/meteo-widget
orientation = v: bloc horizontal (H) ou vertical (V)
block (bloc) = p: balise HTML autour du module météo
class: classe(s) pour bloc parent
style: style inline pour bloc parent

➠ modal : Affiche du contenu dans une fenetre modale (popup) ➠ DEMO

les types autorises sont : inline, iframe, image, video, ajax
syntaxe 1 : {up modal=contenu popup | label=texte du lien}
syntaxe 2 : {up modal=vide,'html','images' ou contenu | label=texte lien}contenu{/up popup}
si vide ou 'html' : le contenu du popup est le code entre les shortcodes
si 'img' : chaque image du code entre les shortcodes sera un popup
sinon on analyse la valeur du paramètre pour determiner son type
- video vimeo, youtube ou dailymotion {up popup=//youtu.be/H9fa9aWFbLM}
- image unique si {up popup=images/xx.jpg} ou png, ...
- bloc inline si id de bloc {up popup=#bloc}
- iframe si url {up popup=//lomart.fr} ou {up popup=doc/xx.pdf} ou {up popup=?index/...}
on peut forcer le type par type=inline, iframe, image, video, ajax

author LOMART version 1.0 license GNU/GPLv3 credit https://www.jqueryscript.net/lightbox/Lightbox-Popup-Plugin-Flashy.html

modal: contenu ou type de contenu
type: pour forcer le type : inline, iframe, image, video, ajax
class: classe(s) pour bloc label
style: style inline pour bloc label
label: texte du lien pour afficher le popup
close-left = 0: croix de fermeture en haut à gauche. haut-droite par défaut
zoom-suffix = -mini: suffixe pour les versions vignettes des images
base-css: règles CSS definies par le webmaster (ajout dans le head)
base-js-params: règles JS definies par le webmaster (ajout dans init JS)
overlayClose = 0: 1 pour fermer la fenêtre modale en cliquant sur la zone grisée autour du contenu
videoAutoPlay = 0: 1 pour demarrer la video a l'ouverture du popup
gallery = 1: 0 pour traiter les images individuellement
title (titre) = 1: afficher le titre
width (l,largeur,w): largeur avec unite. Ex: 80%, 500px, ...
height (h,hauteur): hauteur avec unite. Ex: 80%, 500px, ...

➠ osmap : affiche une carte OpenStreetMap ➠ DEMO

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}

author LOMART version 1.0 license GNU/GPLv3 credit script de Leaflet

osmap: latitude, longitude du centre de la carte (a récupérer sur http://getlatlon.yohman.com)
class: classe(s) ajoutées au bloc principal
style: style inline ajouté au bloc principal
zoom = 13: niveau de zoom de la carte
height (h,hauteur) = 250: hauteur du bloc carte. La largeur est 100% du parent
tile: nom de la tuile
tile-options: niveau de zoom maximum, ...
tile-url: url de la tuile
map-options: liste des options pour la carte. ex: zoomControl:1, keyboard:0
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
scale = 1: affiche l'échelle. 0:sans, 1:métrique, 2:impérial, 3:métrique&impérial
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

➠ pdf : Affiche un PDF dans le contenu ou génère un bouton pour l'afficher dans une fenêtre ➠ DEMO

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

author LOMART version 1.1 license GNU/GPLv3 credit Mozilla PDF.js

pdf: chemin du fichier pdf
method (methode) = PDFJS: ou Google, Embed ... ou 0
view = 1: ou Google, Embed ... ou 0
pdfjs-model = web: ou mobile (non opérationnel)
width (l,largeur,w) = 100%: largeur iframe
height (h,hauteur) = 500px:
class: classe(s) pour bloc parent
style: style inline pour bloc parent
download = 1: 1 pour afficher lien téléchargement
download-name: nom du fichier téléchargé
download-text = en=Download %s;fr=Telecharger %s: texte pour lien
download-icon: image affichée devant le lien
download-class: class(s) pour bouton lien seul
download-style: style inline pour bouton lien seul
btn (bouton) = 0: 1 pour afficher un bouton
btn-target = _blank: cible : _blank, _parent, popup ou _popup
btn-text = voir %s: texte pour bouton
btn-icon: image affichée devant le texte du bouton
btn-class = btn btn-primary: class(s) pour bouton lien seul
btn-style: style inline pour bouton lien seul
close-left = 0: croix de fermeture en haut à gauche. haut-droite par défaut
flip = 0: activer le mode flipbook uniquement si pdfJs

➠ php : permet d'exécuter du code PHP dans un article. ➠ DEMO

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é'; }

author LOMART version 1.0 license GNU/GPLv3

php: le code PHP

➠ php_error : Active les rapports d'erreurs PHP ➠ DEMO

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

author LOMART version 1.0 license GNU/GPLv3

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

➠ readmore : afficher/cacher un bloc HTML à l'aide d'un bouton 'lire la suite' ➠ DEMO

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

author Lomart version 1.0 - 07/2017 license GNU/GPLv3 credit script de Matt

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

➠ sameheight : égalise la hauteur des enfants directs du bloc (p ou div) ➠ DEMO

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

author Lomart version 1.0 - 07/2017 license GNU/GPLv3 credit un vieux script de mes archives

sameheight: inutilisé
class:
style:
css-head: code css libre dans le head. attention: ] au lieu de }

➠ scroller : Défilement vertical d'une liste d'éléments ➠ DEMO

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

author LOMART version 1.0 license GNU/GPLv3 credit Super Treadmill de nishadmenezes adapté pour UP

scroller = 3: nombre d'élément ou hauteur du bloc en px
class: classe(s) pour la balise principale
style: style inline pour la balise principale
css-head: règles CSS définies par le webmaster (ajout dans le head)
runAfterPageLoad = false:
direction = up: sens du défilement (up/down)
speed = medium: slow (5000), medium (3000), fast (1200) ou durée en millisecondes
viewable = 3: nombre d'élément ou hauteur du bloc en px (idem scroller)
pause = true: stop on hover

➠ slider_owl : bandeau défilant d'images ou de blocs HTML ➠ DEMO

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

author LOMART version 1.0 license GNU/GPLv3 credit script OWL Carousel de OwlFonk

slider_owl: aucun paramétre nécessaire
class: classe(s) ajoutées au bloc principal
style: style inline ajouté au bloc principal
autoPlay = 0:
slideSpeed = 200: Vitesse en millisecondes
paginationSpeed = 0: Pagination en millisecondes
pagination = true: Affiche pagination
paginationNumbers = 0: Affiche numéros à l'intérieur des boutons de pagination
goToFirst = 1: Retour sur premier élément si lecture automatique à la fin
goToFirstSpeed = 1000: vitesse de l'option goToFirst en millisecondes
navigation = false: Affichage boutons "next" et "prev"
navigationText = ["prev", "next"]: boutons sans texte: "navigationText: false"
responsive = true:
items = 1: Nombre maxi d'éléments affichés en meme temps sur la plus grande largeur de navigateur
itemsDesktop = [1199, 4]: Cela vous permet de prédéfinir le nombre de diapositives visibles avec une largeur de navigateur particulière. Le format est [x, y] où x = largeur du navigateur et y = nombre de diapositives affichées. Par exemple, [1199,4] signifie que si (window <= 1199) {affiche 4 diapositives par page} Vous pouvez également utiliser "itemsDesktop: false" pour ignorer ces paramètres. Pour bien comprendre comment cela fonctionne, consultez ma démo personnalisée
itemsDesktopSmall = [979, 3]: voir ci-dessus
itemsTablet = [768, 2]: voir ci-dessus
itemsMobile = [479, 1]: voir ci-dessus

➠ slideshow_billboard : Slideshow responsive d'images avec légendes et liens ➠ DEMO

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}

author LOMART version 1.0 license GNU/GPLv3 credit Easy jQuery Responsive Slideshow - Billboard de Spalmer

slideshow_billboard: si indiqué, toutes les images de ce dossier (ordre alpha)
label = 1: affiche la légende des images (attribut alt ou nom fichier humanisé).
zoom-suffix: si indiqué, seules les images avec ce suffixe sont utilisées
class: classe(s) ajoutées au bloc principal
style: style inline ajouté au bloc principal
css-head:
ease = easeInOutExpo: mode de transition
speed = 1000: durée des transitions en millisecondes
duration = 5000: durée entre les changements d'images
autoplay = 1: démarrage automatique
loop = 1: diaporama en boucle si exécution automatique est vraie
transition = left: "fade", "up", "down", "left", "right"
navType = list: "controls", "list", "both" or "none"
styleNav = 1: applies default styles to nav
includeFooter = 1: afficher/masquer le pied de page (légende et navigation)
autosize = 1: hauteur diaporama fixe. calcul sur 1ère image
resize = 0: tente de détecter automatiquement la taille de chaque diapositive
stretch = 1: étire les images pour remplir le conteneur

➠ snowfall : Simule des chutes de neige ou autres ... ➠ DEMO

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

author LOMART version 1.0 license GNU/GPLv3 credit Script JQuery-Snowfall de loktar00

snowfall = snow-01.png: image ou dossier
nb = 20: nombre d'images affichées en même temps
size = 20/40: taille mini/maxi des images en px
speed = 1/5: vitesse mini/maxi des images
selector = body: cible pour snowfall
center: style et classe pour centrage vertical du contenu entre shortcodes
z-index = 99: z-index des images
class: classe(s) pour bloc
style: style inline pour bloc
filter: conditions. Voir doc action filter

➠ sound_hover : Joue un son au survol d'un élément ou d'un événement JS ➠ DEMO

syntaxe {up sound_hover=fichier_son }

author LOMART version 1.0 license GNU/GPLv3 credit script xxx de xxx

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

➠ tab : affiche du contenu dans des panneaux avec onglets en haut, à gauche ou à droite. ➠ DEMO

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

author Lomart version v1.0 - 07/2017 license GNU/GPLv3 credit Script de bhaveshcmedhekar

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

➠ table_by_columns (table_par_colonnes) : tables responsives par empilement des lignes d'une colonne. ➠ DEMO

Syntaxe {up table-par-colonnes}
< table> ... < /table>
{/up table-par-colonnes}
Les lignes sont empilées par colonnes. Très pratique pour des plannings

author lomart license GNU/GPLv3 credit John Polacek

table_by_columns (table_par_colonnes): rien
breakpoint = 720px: bascule en vue responsive
model = up-stacktable: nom d'un fichier CSS prévu par le webmaster pour toutes les tables de la page
style: style inline pour balise table
class: classe(s) pour balise table (obsolète)
max-height: max-height pour la table
key-width = 35%: pour bloquer le header en haut
title-style: style pour la ligne titre en vue responsive

➠ table_by_rows (table_par_lignes) : tables responsives par empilement des colonnes par lignes. ➠ DEMO

{up table-par-lignes}
< table> ... < /table>
{/up table-par-lignes}
les colonnes sont empilés par lignes avec la possibilité de les déplacer, de les fusionner, de supprimer le titre, d'afficher seulement certaines colonnes. https://github.com/codefog/restables/blob/master/README.md
.
IMPERATIF : Les titres des colonnes doivent être dans une balise HEAD

author lomart version 1.0 - 07/2017 license GNU/GPLv3 credit codefog

table_by_rows (table_par_lignes): rien
breakpoint = 720px: bascule en vue responsive
style: style inline pour balise table
class: classe(s) pour balise table (obsolète)
max-height: max-height pour la table
merge: fusion de colonnes. 1:[2,3],5:[6] = 2&3 avec 1 et 6 avec 5
move: deplacement colonne. 1:0,6:1 = 1 au debut et 6 en 2eme
skip: non visible. [3,5] = col 3 et 5 non visible
span: [2,4] = valeur sans libellé (eq: colspan)

➠ table_fixe : tables responsives: ligne entete reste visible ➠ DEMO

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

author lomart version 1.0beta - 07/2017 license GNU/GPLv3 credit lai32290

table_fixe: aucun argument
col-left = 0: nombre de colonnes fixées à gauche
max-height: max-height pour le bloc parent
style: classes et styles pour le bloc parent
class: classe(s) pour le bloc parent (obsolète)

➠ table_flip (table_permute) : tables responsives par permutation lignes/colonnes ➠ DEMO

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}

author lomart version 1.0beta - 07/2017 license GNU/GPLv3 credit Jason Gross

table_flip (table_permute): aucun argument
style: classes et styles inline pour balise table
class: classe(s) pour balise table (obsolète)

➠ tabslide : ajoute des onglets pour ouvrir un panneau sur les bords de la fenetre ➠ DEMO

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

author Lomart version 1.0 - 07/2017 credit script de hawk-ip license GNU/GPLv3

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

➠ toc : Sommaire automatique ➠ DEMO

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

author LOMART version 1.0 license GNU/GPLv3 credit https://www.jqueryscript.net/layout/Highly-Configurable-jQuery-Table-of-Contents-Plugin-TocJS.html

toc: inutilisé
class: classe(s) ajoutées au bloc principal
style: style inline ajouté au bloc principal
css-head: style ajouté au head de la page
content = [itemprop="articleBody"]: bloc analysé pour le sommaire
selector = h2,h3,h4,h5,h6: liste des selecteurs utilisés pour le sommaire
exclude = .notoc: liste sélecteur pour exclusion du sommaire
indexingFormats: format des index : nombres, lettres ou
maxlen: longueur maxi des titres du sommaire
elementClass = uptoc: class de la div navigation
rootUlClass = toc-ul-root:
ulClass = toc-ul:
levelPrefixClass = toc-level-: (interne) préfixe des classes
heading:

➠ tweeter_timeline : affiche la timeline Tweeter ➠ DEMO

{up tweeter-timeline=}
voir : dev.twitter.com/web/embedded-timelines/parameters

author PMLECONTE version v1.1 du 22/05/2018 license GNU/GPLv3

tweeter_timeline: nom.
style: classes et style inline bloc parent
class: classe bloc parent (obsolète)
theme: light ou dark
link-color: couleur des liens en hexa
border-color: couleur des bordures en hexa
height (h,hauteur) = 400: hauteur
width (l,largeur,w): largeur
tweet-limit: nombre maxi de tweet, sinon indéfini
chrome: noheader nofooter noborders transparent noscrollbar
lang = fr: code langage

➠ upactionslist : INTERNE - liste des UP actions avec infos et paramétres ➠ DEMO

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

author Lomart - http://lomart.fr update 2019-10-25 license GNU/GPLv3

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

➠ upscsscompiler : INTERNE - Compile tous les fichiers SCSS dans les dossiers des actions

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

author LOMART version 1.0 license GNU/GPLv3 credit https://github.com/leafo/scssphp

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

➠ website : Affiche un screenshot d'un site avec un lien. ➠ DEMO

syntaxe {up website=URL}
par défaut, le texte affiché sous la vignette est l'URL sans http://

author LOMART version 1.0 license GNU/GPLv3

website: URL du site
link = 1: affiche le lien au-dessous du screenshot
link-text: texte affiché pour le lien et alt
target = _blank: ou _self pour ouvrir le site dans le même onglet
style: classes et style inline pour bloc
class: classe(s) pour bloc (obsolète)
base-css: règles CSS définies par le webmaster (ajout dans le head)

Un shortcode est composé de :

{up l'identifiant du plugin pour la recherche du shortcode dans les articles et modules.
une suite d'option=argument séparés par des caractères pipes (AltGr+6).
la première option est le nom de l'action
une option sans argument est considérée comme égal à vrai ou 1. (0=faux)
le shortcode peut être sur plusieurs lignes pour faciliter la lecture
on peut saisir le nom des options sans se soucier de la case, ils sont évalués en minuscules.
De même les tirets du 6 seront remplacés par les underscores du 8
le programmeur de l'action peut définir des alternatives pour le nom de l'action et des options.
Par exemple: saisir table-par-lignes renvoie vers le nom 'technique': table_by_rows
} pour indiquer la fin du shortcode.

Le shortcode peut être en 2 parties entourant un contenu.

Exemple {up table-par-lignes} <table> ...</table> {/up table-par-lignes}

Il peut y avoir des shortcodes à l'intérieur du contenu pour indiquer des alternatives.

{if filter | admin} je suis un admin {=====} je ne suis pas un admin {/if filter}

Cela permet une saisie entièrement en wysiwyg

Vous pouvez aussi consulter l'articles : les options courantes

Les copier-coller des exemples de shortcodes sur ce site peuvent ne pas fonctionner. Dans ce cas, copier uniquement le contenu sans les accolades {}.

9 août 2017 Mis à jour : 2 janvier 2020