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.
avec possibilité d'ajouter du code CSS dans le head
syntaxe
Utilisation : changer l'image de fond à partir d'un article
syntaxe
{up addclass=nom}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 oublié le point pour une classe ou le # pour un ID
- parent: 1 si on cible le parent de selector
- css-head: code CSS pour head. Attention utiliser [] au lieu de {}
possibilité d'ajouter du code libre dans le head sans risque de nettoyage par un éditeur WYSIWYG
syntaxe
syntaxe
{up addCodeHead=}- addcodehead: code à ajouter dans le head
possibilité d'ajouter du code CSS dans le head
sans risque de nettoyage par un éditeur WYSIWYG
syntaxe
sans risque de nettoyage par un éditeur WYSIWYG
syntaxe
{up addCssHead=.foo[color:red]} Attention: mettre des [ ] au lieu de {}- addcsshead: code CSS. ATTENTION [ ] à la place des {}
- un fichier JS dans le head
- du code JS ou JQuery dans le head ou à la position shortcode (body)
syntaxe
- du code JS ou JQuery dans le head ou à la position shortcode (body)
syntaxe
{up addScript=body | jquery }code ou fichier{/up addScript}- addscript=head: ou body = au niveau du shortcode
- jquery=0: 1: entoure avec appel jquery (sauf fichier)
syntaxe
Une action très pratique pour lister les articles de la catégorie en cours, il suffit de taper
TODO: gestion contenu affiché. ex: #TITRE# (#DATE#). Prévoir modèle par défaut dans actionprefs
TODO: filtre sur vue pour afficher uniquement en vue blog, article, ...
Une action très pratique pour lister les articles de la catégorie en cours, il suffit de taper
{up article-category}TODO: gestion contenu affiché. ex: #TITRE# (#DATE#). Prévoir modèle par défaut dans actionprefs
TODO: filtre sur vue pour afficher uniquement en vue blog, article, ...
- 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=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
- author: filtre sur auteur: liste des id ou article, current
- style: classes et styles inline pour bloc principal
- title (titre): titre HTML si article trouvé.
- title-tag=h3: niveau du titre
- title-style: classes et styles inline pour le titre
- list-style: classes et styles inline pour la liste
- class: classe(s) pour bloc principal (obsoléte)
- title-class: classe(s) pour le titre (obsoléte)
- list-class: classe(s) pour la liste (obsoléte)
syntaxe
doc : https://developer.mozilla.org/fr/docs/Web/CSS/background
{up bg-image=chemin_image} contenu {/up bg-image}doc : https://developer.mozilla.org/fr/docs/Web/CSS/background
- bg_image: images séparées par des points-virgules
- mobile: image ou règle(s) css (si smartphone)
- path: chemin de base ajouté devant le nom des fichiers
- bg-selector=body: sélecteur du bloc pour image(s) de fond
- bg-color: couleur sous image
- bg-repeat=no-repeat: répétition de l'image : no-repeat, repeat-x, repeat-y, repeat, space
- bg-position=center: position de l'image : left
- 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)
syntaxe
syntaxe
doc : https://developer.mozilla.org/fr/docs/Web/CSS/background
{up bg-slideshow=liste images ou dossier}syntaxe
{up bg-slideshow=liste images ou dossier}contenu{/up bg-slideshow}doc : https://developer.mozilla.org/fr/docs/Web/CSS/background
- bg_slideshow: dossier ou images séparées par des points-virgules
- mobile: image ou règle(s) css
- path: chemin commun aux images indiquées en argument principal
- bg-selector=body: bloc portant le slideshow
- bg-overlay: calque superposé à l'image de fond (png, opacité, RGBA, CSS)
- bg-color: couleur sous image
- page-selector: bloc sur contenu
- page-overlay: background de page-selector (png, opacité, RGBA, CSS)
- center=1: centrage vertical du contenu entre shortcodes
- 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
syntaxe
syntaxe
{up bg-video=fichier video}syntaxe
{up bg-video=fichier video}content{/up bg-video}- bg_video: fichier video ou ID video Youtube.
- poster: fichier image affiché avant chargement vidéo
- mobile: image ou css si un appareil mobile est détecté
- bg-selector=body: bloc portant le slideshow
- bg-position=50% 50%: 50% 50% = position poster et video
- bg-ratio=16/9: proportion de la video
- bg-overlay: calque superposé à l'image de fond (png, opacité, RGBA, CSS)
- bg-color: couleur de fond sous la vidéo lors chargement
- page-selector: bloc sur contenu
- page-overlay: background de page-selector (png, opacité, RGBA, CSS)
- center: style et classe pour centrage vertical du contenu entre shortcodes
- 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)
Cette action n'est pas finalisée et devrait etre rémaniée en profondeur !
syntaxe:
syntaxe:
{up box=titre}contenu HTML{/up box}- 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
syntaxe 1 :
syntaxe 2 :
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
{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
- class: class bloc principal
- style: style inline bloc parent
- class-*: class pour tous les blocs colonnes. sinon voir class-1 à class-6
- style-*: style inline pour tous les blocs colonnes. sinon voir style-1 à style-6
syntaxe
{up center=classe(s)}contenu{/up center}- 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)
syntaxe
{up clocks-gmt=ville | offset=décalage horaire}- clocks_gmt: Ville
- 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: horloge analogique
- digital=1: horloge digitale
- timeformat=HH:mm:
- date=0:
- dateformat=MM/DD/YYYY:
- imgpath:
syntaxe:
TODO : Position chiffres avec grandes polices
Voir alternative: http://flipclockjs.com/
{up countdown=201801010000} // délai jusqu'à une date{up countdown=120} // compte à rebours en secondes{up countdown} // affiche une horlogeTODO : Position chiffres avec grandes polices
Voir alternative: http://flipclockjs.com/
- 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 INUTILE
- 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
{up facebook=facebook id | tabs = [timeline, events, messages] | hidecover = [true, false]
facepile = [true,false], smallheader = [true, false] | adaptwidth = [true, false] | width = largeur |height = hauteur }
voir https://developers.facebook.com/docs/plugins/page-plugin
facepile = [true,false], smallheader = [true, false] | adaptwidth = [true, false] | width = largeur |height = hauteur }
voir https://developers.facebook.com/docs/plugins/page-plugin
- facebook_timeline: ID facebook. Voir https://findmyfbid.com
- class: classe bloc parent
- style: style inline bloc parent
- tabs=timeline: Onglets à afficher, par exemple : timeline, events, messages
- adaptwidth=1: Essayer d’adapter la largeur au conteneur.
- facepile=1: Affiche les photos de profils quand des amis aiment le contenu.
- hidecover=0: Masque la photo de couverture dans l’en-tête
- smallheader=0: Utiliser un en-tête réduit
- width (l,largeur,w)=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.
syntaxe : une alternance de titres pour les onglet en H4 et de contenu HTML
-- titre en H4
-- contenu HTML
{up faq}-- titre en H4
-- contenu HTML
{/up faq}- faq: rien
- title-tag=h4: pour utiliser une autre balise pour les titres
- title-class: classe pour le titre (onglet)
- title-style: style inline pour le titre
- title-icon: TODO
- content-class: classe pour le contenu
- content-style: style inline pour le contenu
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
texte du lien
Le fichier peut etre affiché (si prise en charge par navigateur client)
ou le téléchargement peut-etre forcé avec changement de nom optionnel
Une icône représentative est affichée devant le lien
syntaxe
{up file=nomfichier.ext | download | icon |target }texte du lien
{/up file}- file: chemin et nom du fichier à télécharger
- download: vide ou nom du fichier récupéré par le client
- icon=32: chemin et nom de l'icone devant le lien ou taille de l'icone selon extension du fichier (16 ou 32)
- target: argument ou _blank si option sans argument
- rel: nofollow, noreferrer, ...
- class: classe(s) pour la balise a
- style: style inline pour la balise a
Reprise du plugin LM-Filter de Lomart
Le contenu si faux est optionnel. Il doit être après le contenu si vrai et séparé par
--> affiche si admin connecté. admin=0 affiche si admin NON connecté
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 | datemax=20171225} contenu si vrai {====} contenu si faux {/up filter}{up filter | admin} contenu si vrai {====} contenu si faux {/up filter}--> affiche si admin connecté. admin=0 affiche si admin NON connecté
- filter: aucun argument prévu
- datemax: vrai jusqu'à cette date AAAAMMJJHHMM
- datemin: vrai à partir de cette date AAAAMMJJHHMM
- period: vrai entre ces dates AAAAMMJJHHMM-AAAAMMJJHHMM
- day: liste des jours autorisés. 1=lundi, 7=dimanche
- month: liste des mois autorisés. 1=janvier, ...
- hmax: vrai jusqu'à cette heure HHMM
- hmin: vrai à partir de cette heure HHMM
- hperiod: vrai entre ces heures HHMM-HHMM
- guest: vrai si utilisateur invité
- admin: vrai si admin connecté
- user: liste des userid autorisé. ex: 700,790
- username: liste des username autorisé. ex: admin,lomart
- group: liste des usergroup autorisé. ex: 8,12
- lang: liste des langages autorisé. ex: fr,ca
- mobile: vrai si affiché sur un mobile
- homepage: vrai si affiché sur la page d'accueil
author Lomart version 1.0 - juillet 2017
- 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
syntaxe 1 :
syntaxe 2 :
x1-x2 sont les largeurs relatives des colonnes
exemple col=4-8 ou col=33-66 pour 2 colonnes span4 et span8
{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 span4 et span8
- 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
syntaxe :
IMPORTANT: il faut saisir son APIKey dans les paramétres du plugin sous la forme: gmap-key=apikey
{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
- gmap (googlemap): adresse postale
- width (l,largeur,w)=100%: largeur de la carte
- height (h,hauteur)=300px: hauteur de la carte
- class: classe
- style: style-inline
syntaxe :
{up googlefont=nompolice | class=nom}{up googlefont=nompolice} contenu {/up googlefont}- 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, ....
exemples :
-->
--> < img class="foo" src="/images/img.jpg" >
note: toutes les options sont considérées comme des attributs de la balise
{up html=div | class=foo | id=x123}contenu{/up html}-->
contenu
{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
- html=div: balise html
- class: classe(s)
- style: style inline
- attr: couple attribut-valeur (title:le titre)
syntaxe :
Important : indiquer dans prefs.ini le préfixe pour la police d'icones installée sur le site
{up icon=nom_icone}Important : indiquer dans prefs.ini le préfixe pour la police d'icones installée sur le site
- icon: nom de l'icone
- prefix=icon-: pour icomoon ou 'fa fa-' pour font-awesome (a mettre dans pref.ini)
- size: taille icone en px, em
- color: couleur
- color-hover: couleur lors survol icone
- style: style inline
- class: classe
{up imagecompare}< img src="/avant.jpg" >
< img src="/apres.jpg" >
{/up imagecompare}- 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
avec adaptation de la taille image au device et legendes
syntaxe 1
syntaxe 2
syntaxe 3
syntaxe 1
{up photoswipe=chemin_image | alt=texte}syntaxe 2
{up photoswipe=chemin_dossier}syntaxe 3
{up photoswipe}contenu avec des images{/up photoswipe}- 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
{up imagehover=images/image.jpg | effect=xx}-- contenu HTML affiché au survol
{/up imagehover}- 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 {}
syntaxe
{up image-magnify=imgage | imgzoom=image-pour-zoom}- 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
syntaxe
{up image-rollover=image_base | hover=image_survol}- image_rollover: image repos
- hover: image au survol
- click: image lors clic
- class: classe(s) pour bloc
- style: style inline pour bloc
syntaxe
<area target="" alt="" title="" href="/" coords="" shape="">
<area target="" alt="" title="" href="/" coords="" shape="">
{up imagemap=chemin_image}<area target="" alt="" title="" href="/" coords="" shape="">
<area target="" alt="" title="" href="/" coords="" shape="">
{/up imagemap}- imagemap: le chemin et nom de l'image
- class: classe(s) ajoutées au bloc principal
- style: style inline ajouté au bloc principal
syntaxe
{up kawa=long | sucre | speculoos=lotus }- kawa: vide = café court, long = café long
- sucre=1: option sucre
- speculoos: speculoos base ou spécifier marque (lotus)
- class: classe(s) pour bloc
- style: style inline pour bloc
Syntaxe :
- (integer) - The number of paragraphs to generate.
- short, medium, medium, verylong - The average length of a paragraph.
- decorate - Add bold, italic and marked text.
- link - Add links.
- ul - Add unordered lists.
- ol - Add numbered lists.
- dl - Add description lists.
- bq - Add blockquotes.
- code - Add code samples.
- headers - Add headers.
- allcaps - Use ALL CAPS.
- prude - Prude version.
- plaintext - Return plain text, no HTML.
exemple appel : https://loripsum.net/api/2/code/decorate
{up lorem=liste des arguments ci-dessous }- (integer) - The number of paragraphs to generate.
- short, medium, medium, verylong - The average length of a paragraph.
- decorate - Add bold, italic and marked text.
- link - Add links.
- ul - Add unordered lists.
- ol - Add numbered lists.
- dl - Add description lists.
- bq - Add blockquotes.
- code - Add code samples.
- headers - Add headers.
- allcaps - Use ALL CAPS.
- prude - Prude version.
- plaintext - Return plain text, no HTML.
exemple appel : https://loripsum.net/api/2/code/decorate
- lorem: nombre de paragraphe
- class: classe(s) pour bloc
- style: style inline pour bloc
- max-char: nombre maxima de caractères
- max-word: nombre maxima de mots
Syntaxe :
-- catégorie = any, animals, arch, nature, people, tech
{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: abstract, animals, business, cats, city, food, nightlife, fashion, people nature, sports, technics, transport
- height (h,hauteur)=200: hauteur image téléchargée
- width (l,largeur,w)=200: largeur image téléchargée
- grayscale=0: rendu en niveau de gris
- sepia=0: rendu e sépia
- class: classe(s) (obsolète)
- style: classes et styles
Syntaxe :
rechercher n° image sur https://picsum.photos/images
{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
- class: classe(s) (obsolète)
- style: classes et styles
Syntaxe :
-- 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%
{up lorempixel=type | width=xx | height=xx }-- type = abstract, animals, business, cats, city, food, nightlife, fashion, people nature, sports, technics, transport
Note : width & height sont les dimensions de l'image retournée par lorempixel. Pour l'afficher en remplissant le bloc parent, il faut ajouter style=width:100%
- lorempixel=cats: type d'image: abstract, animals, business, cats, city, food, nightlife, fashion, people nature, sports, technics, transport
- align: alignement horizontal : left, center, right
- height (h,hauteur)=200: hauteur image téléchargée
- width (l,largeur,w)=200: largeur image téléchargée
- class: classe(s) obsolète
- style: classes et styles
syntaxe 1:
syntaxe 2:
{up markdown}contenu{/up markdown}syntaxe 2:
{up markdown=nom_fichier_md}- 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
{up marquee=label} texte du message défilant {/up marquee}- 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, up, down, 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
{up media_plyr=yt | code=bTqVqk7FSmY }{up media_plyr=vimeo | code=bTqVqk7FSmY }media_plyr : precisez yt ou youtube ou vimeo
code : il s'agit du code figurant dans l'URL de la vidéo.
-
{up media_plyr=video | poster=url image | mp4 | webm | vtt | download }media_plyr : video pour indiquer l'URL vers la video.
poster : nom de l'image fixe
mp4, webm, vtt, download : si URL non spécifiée, elle sera déduite de celle pour 'poster'
-
{up media_plyr=audio | mp3=url fichier mp3 | ogg}media_plyr : audio
mp3 : url vers fichier MP3 (obligatoire)
ogg : si URL non spécifiée, elle sera déduite de celle pour 'MP3'
-
- media_plyr (vimeo,audio,video): type de lecture : youtube, vimeo, video ou audio
- code: code de la video (à la fin de l'url youtube ou vimeo)
- poster: URL de l'image (obligatoire)
- mp4: URL du fichier MP4. Si vide, on utilise le nom de poster
- webm: URL du fichier WEBM. Si vide, on utilise le nom de poster
- vtt: URL du fichier VTT pour sous-titrage. Si vide, on utilise le nom de poster
- download: URL du fichier téléchargeable. Si vide, on utilise le nom du fichier MP4
- mp3: URL du fichier audio mp3. (obligatoire)
- ogg: URL du fichier audio ogg. Si vide, on utilise le nom du fichier MP3
- class: classe(s) ajoutée(s) au bloc extérieur
- style: style inline ajouté au bloc extérieur
{up media-youtube=ID}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 %
- class: classe pour bloc externe
- style: code css libre pour bloc externe
Basé sur une idée de Robert Gastaud - joomxtensions.com
et la discussion sur le forum JOOMLA.FR
Merci à Daneel pour la correction du code
--------------------------------
Syntaxe :
TODO :récupérer automatiquement le code commune (insee)
https://public.opendatasoft.com/explore/dataset/correspondance-code-insee-code-postal/api/?flg=fr&q=77810
https://api.gouv.fr/api/api-geo.html#!/Communes/get_communes
et la discussion sur le forum JOOMLA.FR
Merci à Daneel pour la correction du code
--------------------------------
Syntaxe :
{up meteo-france=ville | orientation=sens}TODO :récupérer automatiquement le code commune (insee)
https://public.opendatasoft.com/explore/dataset/correspondance-code-insee-code-postal/api/?flg=fr&q=77810
https://api.gouv.fr/api/api-geo.html#!/Communes/get_communes
- meteo_france: le code commune de la ville à récupérer sur cette page
- orientation=v: bloc horizontal (H) ou vertical (V)
- block (bloc)=p: balise HTML autour du module météo
- class: classe(s) pour bloc parent
- style: style inline pour bloc parent
les types autorises sont : inline, iframe, image, video, ajax
syntaxe 1 :
syntaxe 2 :
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
- image unique si
- bloc inline si id de bloc
- iframe si url
on peut forcer le type par type=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
- 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, ...
syntaxe
La latitude/longitude peut être connue sur le site : http://getlatlon.yohman.com/
Les tuiles disponibles sont ici : https://wiki.openstreetmap.org/wiki/Tile_servers
TODO : modal : https://stackoverflow.com/questions/49305901/leaflet-and-mapbox-in-modal-not-displaying-properly
{up osmap=latitude, longitude}La latitude/longitude peut être connue sur le site : http://getlatlon.yohman.com/
Les tuiles disponibles sont ici : https://wiki.openstreetmap.org/wiki/Tile_servers
TODO : modal : https://stackoverflow.com/questions/49305901/leaflet-and-mapbox-in-modal-not-displaying-properly
- 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 boc 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
Le fichier PDF peut-être hébergé sur le serveur ou ailleurs (url absolue)
syntaxe
voir : https://rootslabs.net/blog/538-embarquer-pdf-page-web-pdf-js
syntaxe
{up pdf=chemin du fichier PDF}voir : https://rootslabs.net/blog/538-embarquer-pdf-page-web-pdf-js
- pdf: chemin du fichier pdf
- method=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=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
Exemples :
date actuelle :
langage :
nom user :
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
syntaxe:
TODO : style différent pour bouotn more et less
{up readmore=texte bouton}contenu caché{/up readmore}TODO : style différent pour bouotn more et less
- readmore: idem textmore
- textmore=lire la suite: texte bouton
- textless=replier: texte bouton
- class=uprm-btn: classe(s) pour les boutons. remplace la classe par défaut.
- style: style inline pour les boutons
syntaxe:
<div>...</div>
<div>...</div>
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
{up sameheight}<div>...</div>
<div>...</div>
{/up sameheight}note: gestion de la largeur avec l'option "css-head" qui ajoute du code css dans le head
exemple: css-head=.sameheight[float:left;width:30%;]
Attention: remplacer les
{} par []- sameheight: inutilisé
- class:
- style:
- css-head: code css libre dans le head. attention: ] au lieu de }
syntaxe
{up slider-owl |items=2}bloc1 bloc2 blocN{/up slider-owl}- slider_owl: aucun paramétre nécessaire
- class: classe(s) ajoutées au bloc principal
- style: style inline ajouté au bloc principal
- autoPlay=0:
- 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
syntaxe 1:
syntaxe 2:
{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é).
- class: classe(s) ajoutées au bloc principal
- style: style inline ajouté au bloc principal
- 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
suite description
syntaxe
syntaxe
{up snowfall=image}- snowfall=snow-01.png: image ou dossier
- nb=20: cible pour 2e snowfall
- size=20/40: cible pour 2e snowfall
- speed=1/5: cible pour 2e snowfall
- selector=body: cible pour 2e 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
syntaxe
{up sound_hover=fichier_son }- sound_hover: le paramétre principal
- 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
Sur mobile ou sur demande, l'affichage est en mode accordion
- 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)
- plugin_type: accordion
- side: left ou right
- active_tab: 1 a N
Syntaxe
Les lignes sont empilées par colonnes. Très pratique pour des plannings
{up table-par-colonnes}contenu table{/up table-par-colonnes}Les lignes sont empilées par colonnes. Très pratique pour des plannings
- table_by_columns (table-par-colonnes): rien
- breakpoint=720px: bascule en vue responsive
- model=up-stacktable: nom d'un fichier CSS prévu par le webmaster pour toutes les tables de la page
- 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
Syntaxe
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
{up table-par-lignes}contenu table{/up table-par-lignes}les colonnes sont empilés par lignes avec la possibilité de les déplacer, de les fusionner, de supprimer le titre, d'afficher seulement certaines colonnes. https://github.com/codefog/restables/blob/master/README.md
IMPERATIF : Les titres des colonnes doivent être dans une balise HEAD
- table_by_rows (table-par-lignes): rien
- breakpoint=720px: bascule en vue responsive
- 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)
Syntaxe
col-left : nombre de colonnes toujours visible.
Une barre de défilement est ajoutée pour les autres colonnes.
{up table-fixe}contenu table{/up table-fixe}col-left : nombre de colonnes toujours visible.
Une barre de défilement est ajoutée pour les autres colonnes.
- table_fixe: aucun argument
- col-left=0: nombre de colonnes fixées à gauche
- max-height: max-height pour le bloc parent
- style: classes et styles pour le bloc parent
- class: classe(s) pour le bloc parent (obsolète)
Inversion colonnes/lignes. les titres de colonnes deviennent la 1ère colonne et reste visibles.
Une barre de défilement est ajoutée pour les autres colonnes.
Une barre de défilement est ajoutée pour les autres colonnes.
- table_flip (table-permute): aucun argument
- style: classes et styles inline pour balise table
- class: classe(s) pour balise table (obsolète)
syntaxe
{up tabslide=btn-text | tabLocation=top}contenu{/up tabslide}- 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() {:
{up tweeter-timeline=
| theme = [light , dark]
| height = hauteur
| link-color = couleur des liens en hexa
| chrome = [noheader nofooter noborders transparent noscrollbar] }
voir : https://dev.twitter.com/web/embedded-timelines/parameters
| theme = [light , dark]
| height = hauteur
| link-color = couleur des liens en hexa
| chrome = [noheader nofooter noborders transparent noscrollbar] }
voir : https://dev.twitter.com/web/embedded-timelines/parameters
- tweeter_timeline: nom.
- style: classes et style inline bloc parent
- class: classe bloc parent (obsolète)
- theme: light ou dark
- link-color: couleur des liens en hexa
- border-color: couleur des bordures en hexa
- height (h,hauteur)=400: hauteur
- width (l,largeur,w): largeur
- tweet-limit: nombre maxi de tweet, sinon indéfini
- chrome: noheader nofooter noborders transparent noscrollbar
- lang=fr' : code langage
syntaxe:
TODO: sortie sous d'autres formats que FAQ
{up upactionslist} toutes les actions{up upactionslist=action1, action2} une ou plusieurs actionsTODO: sortie sous d'autres formats que FAQ
- upactionslist: liste des actions à récupérer. toutes par défaut
- make-dico=0: consolide le fichier principal dico.json avec ceux des actions
- style:
- class: (obsolète)
- demo=1: afficher le lien vers la demo
- mode=faq: [faq,markdown] présentation du résultat
syntaxe:
note: les fichiers SCSS & CSS sont en racine des dossiers actions
{up upscsscompiler} toutes les actions{up upscsscompiler=action1, action2} une ou plusieurs actionsnote: les fichiers SCSS & CSS sont en racine des dossiers actions
- upscsscompiler: liste des actions à recompiler. toutes par défaut
- mode=Compressed: Compressed, Compact, Crunched, Expanded, Nested
- force=0: force la compilation de tous les SCSS. Par défaut: les SCSS plus récents que leur CSS.
- info=0: affiche rapport compilation
syntaxe
{up website=URL}- 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 :
{upl'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
Les copier-coller des exemples de shortcodes sur ce site peuvent ne pas fonctionner. Dans ce cas, copier uniquement le contenu sans les accolades {}.