Annonce

[UP upactionslist]
make-dico : consolidation effectuée

UP Universal Plugin

UP le plugin Universel pour Joomla swiss knife

UP permet de réaliser de nombreuses actions dans les articles et modules personnalisés.

UP permet d'insérer des éléments comme une vidéo ou des prévisions météo, de modifier le comportement d'une table pour la rendre responsive, d'ajouter du code CSS/JS sans risque de suppression par les éditeurs wysiwyg.

A l'image du couteau suisse, UP très discret si on n'a pas besoin de lui (zéro octet sur la page), servira de chef d'orchestre pour lancer l'action demandée.
Seuls les fichiers nécessaires à cette action seront chargés par le navigateur client.

Universal Plugin permet de :

comparer deux images

des effets sur des images

Effet n° 82

aller sur la page d'accueil de perlimpinpin.fr

voir les détails d'une image

afficher le temps restant avant l'an 2030

jouer de l'accordéon

question n°1

texte pour la question n°1

question n°2

texte lorem pour la question n°2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Huic mori optimum esse propter desperationem sapientiae, illi propter spem vivere. Duo Reges: constructio interrete. Cupit enim dícere nihil posse ad beatam vitam deesse sapienti. Cum ageremus, inquit, vitae beatum et eundem supremum diem, scribebamus haec. Idem iste, inquam, de voluptate quid sentit? Ita graviter et severe voluptatem secrevit a bono. Igitur neque stultorum quisquam beatus neque sapientium non beatus. Ergo, inquit, tibi Q. Ita relinquet duas, de quibus etiam atque etiam consideret. Quid igitur dubitamus in tota eius natura quaerere quid sit effectum?

Progredientibus autem aetatibus sensim tardeve potius quasi nosmet ipsos cognoscimus. Quid ergo attinet dicere: Nihil haberem, quod reprehenderem, si finitas cupiditates haberent? Quae cum praeponunt, ut sit aliqua rerum selectio, naturam videntur sequi; Indicant pueri, in quibus ut in speculis natura cernitur. Quis est, qui non oderit libidinosam, protervam adolescentiam? Non est igitur summum malum dolor. Virtutis, magnitudinis animi, patientiae, fortitudinis fomentis dolor mitigari solet. Longum est enim ad omnia respondere, quae a te dicta sunt. Vitae autem degendae ratio maxime quidem illis placuit quieta.

Deinde disputat, quod cuiusque generis animantium statui deceat extremum. Sed tamen omne, quod de re bona dilucide dicitur, mihi praeclare dici videtur. Quis est tam dissimile homini. Transfer idem ad modestiam vel temperantiam, quae est moderatio cupiditatum rationi oboediens. Dolere malum est: in crucem qui agitur, beatus esse non potest. Varietates autem iniurasque fortunae facile veteres philosophorum praeceptis instituta vita superabat.

Ita relinquet duas, de quibus etiam atque etiam consideret. Hoc est dicere: Non reprehenderem asotos, si non essent asoti. Itaque eos id agere, ut a se dolores, morbos, debilitates repellant. Si longus, levis. Ratio enim nostra consentit, pugnat oratio. Beatus autem esse in maximarum rerum timore nemo potest. Videmusne ut pueri ne verberibus quidem a contemplandis rebus perquirendisque deterreantur? Tum ille: Ain tandem? Addidisti ad extremum etiam indoctum fuisse.

question n°3

texte pour la question n°3

afficher et/ou télécharger un fichier

Ouvrir une photo dans une nouvelle fenêtre

Télécharger une photo

afficher selon conditions

Vive le weekend

du texte défilant

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quod autem in homine praestantissimum atque optimum est, id deseruit. Quasi vero, inquit, perpetua oratio rhetorum solum, non etiam philosophorum sit. Sine ea igitur iucunde negat posse se vivere? An quod ita callida est, ut optime possit architectari voluptates? Ut nemo dubitet, eorum omnia officia quo spectare, quid sequi, quid fugere debeant? Virtutis, magnitudinis animi, patientiae, fortitudinis fomentis dolor mitigari solet. Duo Reges: constructio interrete. Si quidem, inquit, tollerem, sed relinquo. Hanc ergo intuens debet institutum illud quasi signum absolvere.

Nihil sane. Quod iam a me expectare noli. Miserum hominem! Si dolor summum malum est, dici aliter non potest. Cuius quidem, quoniam Stoicus fuit, sententia condemnata mihi videtur esse inanitas ista verborum. Cum sciret confestim esse moriendum eamque mortem ardentiore studio peteret, quam Epicurus voluptatem petendam putat. Hoc non est positum in nostra actione. Virtutis, magnitudinis animi, patientiae, fortitudinis fomentis dolor mitigari solet. Summum ením bonum exposuit vacuitatem doloris;

Illud urgueam, non intellegere eum quid sibi dicendum sit, cum dolorem summum malum esse dixerit. Age nunc isti doceant, vel tu potius quis enim ista melius? Ut nemo dubitet, eorum omnia officia quo spectare, quid sequi, quid fugere debeant? Sic, et quidem diligentius saepiusque ista loquemur inter nos agemusque communiter. Si autem id non concedatur, non continuo vita beata tollitur. Nam quibus rebus efficiuntur voluptates, eae non sunt in potestate sapientis.

Eam tum adesse, cum dolor omnis absit; Quid interest, nisi quod ego res notas notis verbis appello, illi nomina nova quaerunt, quibus idem dicant? Sumenda potius quam expetenda. Quid est, quod ab ea absolvi et perfici debeat? Re mihi non aeque satisfacit, et quidem locis pluribus. Ad corpus diceres pertinere-, sed ea, quae dixi, ad corpusne refers? Tum Lucius: Mihi vero ista valde probata sunt, quod item fratri puto. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas?

afficher une carte OpenStreetMp

exécuter du code php

Bonjour, nous sommes le : 11-04-2021 02:06:04

Dans 3 mois, nous serons le : 11/07/2021

afficher du contenu masqué

... le contenu masqué ...

Cliquer pour voir les explications c'est bon, j'ai compris

un diaporama d'images

des onglets

question n°1
question n°2
question n°3

texte pour la question n°1

texte pour la question n°2 mais un peu plus long

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si quicquam extra virtutem habeatur in bonis. Sed quoniam et advesperascit et mihi ad villam revertendum est, nunc quidem hactenus; Quis enim potest ea, quae probabilia videantur ei, non probare? Nam de isto magna dissensio est. Quid turpius quam sapientis vitam ex insipientium sermone pendere?

Quarum ambarum rerum cum medicinam pollicetur, luxuriae licentiam pollicetur. Quid ei reliquisti, nisi te, quoquo modo loqueretur, intellegere, quid diceret? Id enim volumus, id contendimus, ut officii fructus sit ipsum officium. Sed tu istuc dixti bene Latine, parum plane.

Nihilne est in his rebus, quod dignum libero aut indignum esse ducamus? Sin dicit obscurari quaedam nec apparere, quia valde parva sint, nos quoque concedimus; Duo Reges: constructio interrete. Dic in quovis conventu te omnia facere, ne doleas. Aperiendum est igitur, quid sit voluptas; De illis, cum volemus. Quod quidem nobis non saepe contingit.

Vitiosum est enim in dividendo partem in genere numerare. Et quidem, inquit, vehementer errat; Quid enim possumus hoc agere divinius? Nos vero, inquit ille; Itaque hic ipse iam pridem est reiectus; Tria genera bonorum;

3 :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Respondent extrema primis, media utrisque, omnia omnibus. Itaque hoc frequenter dici solet a vobis, non intellegere nos, quam dicat Epicurus voluptatem. Huius ego nunc auctoritatem sequens idem faciam. Scientiam pollicentur, quam non erat mirum sapientiae cupido patria esse cariorem. Ubi ut eam caperet aut quando? Duo Reges: constructio interrete.

Quarum ambarum rerum cum medicinam pollicetur, luxuriae licentiam pollicetur. Sed erat aequius Triarium aliquid de dissensione nostra iudicare. Ac tamen hic mallet non dolere. Ut enim consuetudo loquitur, id solum dicitur honestum, quod est populari fama gloriosum. Quis est tam dissimile homini. Prioris generis est docilitas, memoria; Ab hoc autem quaedam non melius quam veteres, quaedam omnino relicta. Intellegi quidem, ut propter aliam quampiam rem, verbi gratia propter voluptatem, nos amemus;

Zenonis est, inquam, hoc Stoici. Quid censes in Latino fore? Tum Lucius: Mihi vero ista valde probata sunt, quod item fratri puto.

une vidéo locale

et beaucoup d'autres choses, bidules, trucs ....

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

Il est possible :
- de cibler le parent d'un sélecteur CSS ou être relatif à l'emplacement du shortcode
- de créer la règle CSS avec l'option 'css-head=.foo[color:red]'
syntaxe {up addclass=nom_classe}
Utilisation : changer l'image de fond à partir d'un article
author LOMART version UP-0.9 license GNU/GPLv3 tags Expert
addclass: nom de la classe ajoutée à la balise
filter: conditions. Voir doc action filter (v1.8)
selector = body: balise cible. Ne pas oublier le point pour une classe ou le # pour un ID
parent: 1 si on cible le parent de selector, 2 le grand-père, ...
css-head (base-css): code CSS pour head. Attention utiliser [] au lieu de {}

➠ 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}
Attention : l'option XXX doit être remplacée directement dans le shortcode par un nom d'attribut et sa valeur
author LOMART version UP-0.9 license GNU/GPLv3 tags Expert
addcodehead: code à ajouter dans le head ou balise
xxx = yyy: couple attribut-valeur. ex: title=le titre, href=//google.fr
filter: conditions. Voir doc action filter (v1.8)

➠ 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 UP-0.9 license GNU/GPLv3 tags Expert
addcsshead: code CSS. ATTENTION [ ] à la place des {}
filter: conditions. Voir doc action filter (v1.8)

➠ 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 UP-1.3.1 license GNU/GPLv3 tags Expert
addscript = head: ou body pour insérer le code à la position du shortcode
jquery = 0: 1: entoure avec appel jquery (sauf fichier)
filter: conditions. Voir doc action filter (v1.8)

➠ 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}
author Conseilgouz version UP-1.6.3 - 11/2019 license GNU/GPLv3 credit Script de michalsnik tags layout-dynamic
anim_aos = zoom-in-right: nom de l'animation
delay: delai en millisecondes (50-3000 ms)
duration: durée animation en millisecondes (50-3000 ms)
easing: effet: linear, ease-in-back, ease-out-cubic, ease-in-sine
offset: en px, hauteur pour déclenchement par rapport au bas de l'écran.
anchor-placement: déclenche l'effet lorsque le scrolling de l'élément arrive à certaines positions
once: one-time effect or not
repeat: applique l'effet à tous les tags. Ex: h2,h3
css-before: style de l'élément avant l'animation
css-after: style de l'élément après l'animation
style: style inline appliqué au bloc
class: classe(s) appliquée(s) au bloc

➠ article_category : liste des articles d'une ou plusieurs catégories ➠ DEMO

syntaxe : {up article_category=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
article_category: ID catégorie(s) (séparateur virgule) 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 : asc, desc
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
title-class: classe(s) pour le titre
list-class: classe(s) pour la liste

➠ barcode : Création de code à barres à partir de la librairie TCPDF. ➠ DEMO

syntaxe : {up barcode=text | type=...|height=..|width=...|color=...}
author ConseilGouz version UP-1.8 license GNU/GPLv3 tags Widget
barcode = text: valeur alphanumérique
type = EAN13: type de code-barres : C39,C39+,C39E,C39E+,C93,S25,S25+,I25,C128,C128A,C128B,EAN2,EAN5,EAN8,EAN13,UCPA,UPCE,MSI,MSI+,POSTNET,PLANET,RMS4CC,KIX,IMB,IMBPRE,CODABOR,CODE11,PHARMA,PHARMA2
format = html: format de sortie
height (h,hauteur) = 30: hauteur du code à barres
width (l,largeur,w) = 1: espacement des barres
color: Couleur du code-barre. En mode PNG, on attend des valeurs RGB séparés par des virgules, sinon la couleur en forme texte.
align = center: alignement code barres et texte (left, center, right)
showtext = 1: montrer le texte ayant permis de generer le code barres
class: Class(s) for block
style: Inline style for block
css-head (base-css): Régles CSS définie par le webmaster (ajoutées dans head)

➠ bbcode : Saisir du code HTML avec un éditeur WYSIWYG ➠ DEMO

syntax 1 {up bbcode=content}
syntax 2 {up bbcode} content {/up bbcode}
author LOMART version UP-1.8 (15/03/2020) license GNU/GPLv3 tags Editor
bbcode:
tags: balises à traiter. vide: par défaut, liste (a,b,p) ou balise en plus de defaut (+a,b,p)
css-head (base-css): style ajouté dans le HEAD de la page

➠ 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 UP-1.5 license GNU/GPLv3 credit Vegas de jaysalvat tags Body
bg_image: images séparées par des points-virgules
mobile: image ou règle(s) css (si smartphone)
path: chemin de base ajouté devant le nom des fichiers
bg-selector = body: sélecteur du bloc pour image(s) de fond
bg-color: couleur sous image
bg-repeat = no-repeat: répétition de l'image : no-repeat, repeat-x, repeat-y, repeat, space
bg-position = center: position de l'image : left|center|right top|center|bottom
bg-size = cover: remplissage : cover, contain, 100%, 100px
bg-attachment = scroll: défilement de l'image : scroll, fixed, local
bg-overlay: image ajouté en overlay
page-selector: si block défini, sélecteur du bloc sur lequel appliquer la transparence
page-overlay = 70: transparence sous la forme 70, #RGBA, image overlay ou règle CSS
center: centrage vertical du contenu entre shortcodes
filter: conditions. Voir doc action filter (v1.8)
style: style inline pour bloc
css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)

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

➠ 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 UP-1.5 license GNU/GPLv3 credit Script videoBackground de lemehovskiy tags Body
bg_video: fichier video ou ID video Youtube.
poster: fichier image affiché avant chargement vidéo
mobile: image ou css si un appareil mobile est détecté
bg-selector = body: bloc portant le slideshow
bg-position = 50% 50%: 50% 50% = position poster et video
bg-ratio = 16/9: proportion de la video
bg-overlay: calque superposé à l'image de fond (png, opacité, RGBA, CSS)
bg-color: couleur de fond sous la vidéo lors chargement
page-selector: bloc sur contenu
page-overlay: background de page-selector (png, opacité, RGBA, CSS)
center: style et classe pour centrage vertical du contenu entre shortcodes
filter: conditions. Voir doc action filter (v1.8)
height (h,hauteur) = 400px: hauteur d'une video Youtube ou Vimeo avec tarteauciitron
style: classes et style inline pour bloc créé
class: classes pour bloc créé (deprecated)
css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)

➠ box : affiche une boite avec un tite, sous-titre, image, contenu et action ➠ DEMO

syntaxe: {up box=model | title=title}contenu HTML{/up box}
author LOMART version UP-1.9.5 license GNU/GPLv3 tags Layout-static
box: model [danger, info] ou prefset
template = ##head## ##title-link## ##subtitle## ##image## ##/head## ##content## ##action-link##:
multibox = 3-2-1: nombre de blocs sur la même ligne (desktop-tablet-mobile)
multibox-class = fg-vspace-between-1: classe(s) pour le bloc externe
multibox-style: style CSS pour le bloc externe
class: classe(s) pour la box
style: style inline pour la box
title (titre): titre. Si vide et demandé : on prend le premier hx du contenu
title-tag = h4: balise pour titre
title-class: class user pour titre
title-style: style inline pour titre
title-link-class: class user pour titre avec lien
title-link-style: style inline pour titre avec lien
subtitle: sous-titre
subtitle-tag = h5: mise en forme du sous-titre
subtitle-class: class user pour sous-titre
subtitle-style: style inline pour sous-titre
subtitle-link-class: class user pour sous-titre avec lien
subtitle-link-style: style inline pour sous-titre avec lien
image: image. Si vide et demandée : on prend la première image du contenu
image-alt: texte alternatif pour l'image. Par défaut, le nom du fichier humanisé
image-class: class user pour image
image-style: style inline pour image
image-link-class: class user pour image avec lien
image-link-style: style inline pour image avec lien
action: texte du bouton action
action-tag = div: mise en forme du bouton action
action-class: class user pour action
action-style: style inline pour action
action-link-class: class user pour action avec lien
action-link-style: style inline pour action avec lien
link: lien. . Si vide et demandé : on prend le premier lien sur title ou image
link-target: _blank pour nouvelle fenetre
head-class: class pour le bloc entete. en général title, subtitle, image
head-style: style pour le bloc entete
body-class: class pour le bloc. en général content et action
body-style: style pour le bloc. en général content et action
css-head (base-css): style CSS inséré dans le HEAD
align-vertical = fg-vspace-between-1: type de repartition verticale en multibox

➠ 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
author Lomart version UP-0.9 - 08/2017 license GNU/GPLv3 tags Layout-static
cell = 12: nombre de colonnes
mobile: nombre de colonnes sur petit écran
tablet: nombre de colonnes sur moyen écran
filter: conditions. Voir doc action filter (v1.8)
class: class bloc principal
style: style inline bloc parent
class-*: class pour tous les blocs colonnes. sinon voir class-1 à class-6
style-*: style inline pour tous les blocs colonnes. sinon voir style-1 à style-6

➠ 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-yellow;color:red
author LOMART version UP-1.5 license GNU/GPLv3 tags HTML
center: classe(s) et style(s) pour le bloc interne (celui qui est centré)
class: classe(s) pour bloc externe
style: style inline pour bloc externe
css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)

➠ chart : Graphiques statistiques avec GoogleChart ➠ DEMO

syntaxe {up chart=type_chart}... data ...{/up chart}
author LOMART version UP-1.8 license GNU/GPLv3 credit https://developers.google.com/chart/interactive/docs tags Widget
chart: type de chart : area, bar,bubble,column,combo,line,pie,scatter,SteppedArea
separator: séparateur des valeurs dans la liste
vertical = 0: horizontal par défaut ou vertical
area: valeur en % dans l'ordre : left, top, width, height. EX: 10,25,90,75
maximized = 0: affichage remplit le bloc
colors: liste des couleurs
title (titre):
title-position: in, out, none (defaut)
title-style: color: 'blue', fontsize: '14px', bold:true (attention à la syntaxe)
legend-position: in, none (defaut), top, bottom
legend-style: ex: color:'blue',fontSize:14,bold:true
bar-width: largeur des barres en %
3D = 0: camembert en relief
donut = 0: part du trou central. ex: 0.5 pour la moitié
isstacked: 0, true (absolute) ou relative
height (h,hauteur): min-height bloc parent
options: chaine JSON des options (remplacer {} par [])
class: classe(s) pour bloc
style: style inline pour bloc
css-head (base-css): style ajouté dans le HEAD de la page

➠ chart_org : Affiche le graphe d'une organisation ➠ DEMO

syntaxe {up chart-org} liste UL / OL {/up chart-org}
version UP-2.2 license GNU/GPLv3 credit script Responsive Hierarchical Organization Chart In Pure CSS de erinesullivan tags Widget
chart_org: aucun argument
line-color: couleur liaisons entre bloc
color-bg: couleur arrière-plan par défaut des blocs
color-text: couleur par défaut des textes
border: bordure (outline) par défaut des blocs. ex: 1px red solid
radius: arrondi des blocs. border doit être none
color-bg-*: couleur des blocs de niveau 1 à 6
color-text-*: couleur des blocs de niveau 1 à 6
border-*: bordure (outline) des blocs de niveau 1 à 6. ex: 1px red solid
class: classe(s) pour bloc
style: style inline pour bloc
css-head (base-css): style ajouté dans le HEAD de la page

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

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

➠ 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 UP-0.9 - 20/07/2017 license GNU/GPLv3 credit Lexxus - jq-timeTo tags widget
countdown: date, nombre de secondes ou vide pour horloge
align: left, center ou right
class: classe
style: style inline
callback: Fonction appellée à la fin du compte à rebours
captionSize = 0: fontsize legendes
countdownAlertLimit = 10: alerte en seconde avant fin countdown
displayCaptions = 0: 1 = légendes affichées
displayDays = 0: nb chiffres affichés pour jours
fontFamily = Verdana, sans-serif: Police pour chiffres
fontSize = 28: Taille police en pixels pour chiffres
lang = en: Défini automatiquement par UP
seconds = 0: Temps initial en secondes pour le compte à rebours
start = 1: démarrer automatiquement la minuterie
theme = white: black ou blue
timeTo: date, nb secondes ou vide pour horloge

➠ countdown_simple : Affiche un compte à rebours simple et facilement adaptable par CSS ➠ DEMO

syntaxe {up countdown-simple=AAAAMMJJHHMM}
author LOMART version 1.0 license GNU/GPLv3 credit Countdown From A Specific Date de anik4e tags widget
countdown_simple: date cible ou délai si débute par +
intro-text: texte avant les afficheurs
close-text: texte après les afficheurs
prefix: texte avant valeur
suffix = lang[en=years,months,days,hours,minutes,seconds;fr=années,mois,jours,heures,minutes,secondes]: texte après valeur
elapsed-text = lang[en=Too late;fr=Trop tard]: Texte ou bbcode affiché si délai écoulé
model = inline: CSS de base pour la présentation
digit-view = YMDHMS: afficheurs. Mettre un X pour ne pas l'afficher. Pour les premiers non affichés, la valeur sera convertie et ajouté au premier affiché
digit-class: classe(s) pour les chiffres
zero = 0: ajoute un zero devant les heures, minutes et secondes
class: classe(s) pour bloc
style: style inline pour bloc
css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
filter:

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

Syntaxe : {up counter=0,100}
author LOMART version UP-1.7 license GNU/GPLv3 credit jquery-simple-counter de marcovincit tags Widget
counter: min,max : valeurs de départ et de fin
filter: conditions. Voir doc action filter (v1.8)
width (l,largeur,w) = 0: largeur minimal (par défaut en pixels)
mono = 1: force la police en monospace
class: classe(s) pour bloc
style: style inline pour bloc
css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
start = 0: valeur de départ du compteur
end = 100: valeur d'arrivée du compteur
easing = swing: ou linear : effet
duration = 1500: durée du décompte en millisecondes
prefix: texte devant compteur. BBcode autorisé
suffix: texte après compteur. BBcode autorisé

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

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

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

➠ div : Facilite la saisie de blocs DIV avec un éditeur wysiwyg ➠ DEMO

syntaxe {up div=class_and_style}content{/up div}
author LOMART version UP-2.0 license GNU/GPLv3 tags HTML
div: classes et style (séparateur : point-virgule)
class: classe(s) pour bloc
style: style inline pour bloc
css-head (base-css): style ajouté dans le HEAD de la page

➠ donation : Formulaire de donation avec Paypal ➠ DEMO

syntaxe {up donation=title | business=compte_paypal}
author LOMART version UP-2.0 license GNU/GPLv3 tags widget
donation: Votre adresse e-mail PayPal enregistrée ou votre identifiant PayPal
title (titre): texte pour ##title##. bbcode accepté
text: texte bbcode pour motclé ##text##
button = lang[en=Donate;fr=Faire un don]: texte ou image Paypal pour bouton
template = ##title## ##amount## ##currency## ##button##: modèle mise en page
url-valid = http:: ', // Chemin complet vers la page de retour après un paiement correct
url-cancel = http:: ', // Chemin complet vers la page de retour après un échec de paiement
item-name = Donation: La raison de vos dons. Sera imprimé sur la confirmation PayPal
amount = 10: Montant du don. Inutile si ##amount##
currency-code = EUR: Devise. Inutile si ##currency##
currency-list = EUR,USD,GBP,CHF,AUD,HKD,CAD,JPY,NZD,SGD,SEK,DKK,PLN,NOK,HUF,CZK,ILS,MXN: liste des devise acceptée. 1ère par défaut
image-url: URL du logo de l'organisme receveur
use-sandbox = 0: pour tester la donation
class = tc: classe(s) pour bloc externe
style: style inline pour bloc externe
title-tag: balise pour le titre (##title##) span par defaut si title-style
title-style: classes et styles pour le titre (##title##)
text-tag: balise pour le titre (##text##) span par defaut si text-style
text-style: classes et styles pour texte d'acompagnement (##text##)
amount-style: classes et styles pour montant (##amount##)
currency-style: classes et styles pour choix devises (##currency##)
button-style = b;t-grisFonce;background:#FFC439;border:#ECB300 1px outset;border-radius:50px;cursor:pointer: classes et styles pour bouton (##button##)
css-head (base-css): style ajouté dans le HEAD de la page

➠ facebook_timeline : affiche la timeline Facebook ➠ DEMO

{up facebook=facebook id}
voir https://developers.facebook.com/docs/plugins/page-plugin
author PMLECONTE version UP-1.3 du 28/05/2018 license GNU/GPLv3 tags widget
facebook_timeline: ID facebook. Voir https://findmyfbid.com
class: classe bloc parent
style: style inline bloc parent
tabs = timeline: Onglets à afficher, par exemple : timeline, events, messages
adaptwidth = 1: Essayer d’adapter la largeur au conteneur.
facepile = 1: Affiche les photos de profils quand des amis aiment le contenu.
hidecover = 0: Masque la photo de couverture dans l’en-tête
smallheader = 0: Utiliser un en-tête réduit
width (l,largeur,w) = 200: La largeur du plugin en pixels. Valeur mini = 180, maxi = 500
height (h,hauteur) = 500: La hauteur du plugin en pixels. valeur mini = 70.

➠ 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 UP-1.0 - 15/07/2017 license GNU/GPLv3 credit ryans temkoski tags layout-dynamic
faq: rien
title-tag = h4: pour utiliser une autre balise pour les titres
title-class: classe pour le titre (onglet)
title-style: style inline pour le titre
content-class: classe pour le contenu
content-style: style inline pour le contenu

➠ field : Retourne la valeur d'un custom field pour le contenu courant ➠ DEMO

syntaxe
{up field=id_or_name_field} // contenu brut du champ
{up field=id_or_name_field | model=value} // contenu mis en forme du champ
{up field=id_or_name_field | model=label : [b]%id_or_name_field%[/b]} // modèle avec BBCODE
version UP-2.3 license GNU/GPLv3 tags Joomla
field: id ou name du champ
model: modèle BBCODE avec id ou nom des champs entre signes %
separator: sépare les éléments d'un tableau pour rawvalue
tag:
class: classe(s) pour bloc
style: style inline pour bloc
css-head (base-css): style ajouté dans le HEAD de la page

➠ 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 version UP-1.2 license GNU/GPLv3 tags 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

➠ 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## ##/link## ##filename-link## ##filename## ##icon## ##icon-link##
##hit## ##lastdownload##
##info## ##size## ##date##
author LOMART version UP-1.9 license GNU/GPLv3 tags file
file_download: fichier ou dossier
file-mask: pour sélectionner les fichiers d'un dossier. ex: fic-*
extensions = zip, pdf,txt,md,png,jpg,gif,svg,doc,docx,xls,xlsx,odt,ods: extensions autorisées
template = ##icon## ##filename-link## (##size## - ##date##) [small]##hit## ##lastdownload##[/small] [br]##info##: modèle de mise en page. keywords + bbcode
main-tag = ul: balise pour la liste des fichiers
main-style: style pour la liste des fichiers
main-class = list-none: classes pour la liste des fichiers
item-tag = li: balise pour un bloc fichier
item-style: style pour un bloc fichier
item-class: classes pour un bloc fichier
link-style: style pour le lien (classes admises)
icon = 32: chemin et nom de l'icone devant le lien ou taille de l'icone selon extension du fichier (16 ou 32)
password: mot de passe pour télécharger le fichier
format-date = lang[en=m/d/Y H:i;fr=d/m/Y H:i]: 'd/m/Y H:i'
model-hit = téléchargé %s fois:
model-lastdownload = dernier téléchargement le %s:
model-info = %s:
class: classe(s) pour bloc
style: style inline pour bloc
filter:
css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)

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

➠ 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 UP-1.0 license GNU/GPL tags editor
filter: aucun argument prévu
datemax: vrai jusqu'à cette date AAAAMMJJHHMM
datemin: vrai à partir de cette date AAAAMMJJHHMM
period: vrai entre ces dates AAAAMMJJHHMM-AAAAMMJJHHMM
day: liste des jours autorisés. 1=lundi, 7=dimanche
month: liste des mois autorisés. 1=janvier, ...
hmax: vrai jusqu'à cette heure HHMM
hmin: vrai à partir de cette heure HHMM
hperiod: vrai entre ces heures HHMM-HHMM
guest: vrai si utilisateur invité
admin: vrai si admin connecté
user: liste des userid autorisé. ex: 700,790
username: liste des username autorisé. ex: admin,lomart
group: liste des usergroup autorisé. ex: 8,12
lang: liste des langages autorisé. ex: fr,ca
mobile: vrai si affiché sur un mobile
homepage: vrai si affiché sur la page d'accueil
server-host: vrai si le domaine du serveur contient un des termes de la liste
server-ip: vrai si l'adresse IP du serveur des dans la liste
artid: vrai si l'ID de l'article courant est dans la liste
catid: vrai si l'ID de la catégorie de l'article courant est dans la liste
menuid: vrai si l'ID du menu actif est dans la liste
info = 0: affiche les valeurs actuelles des arguments pour les conditions

➠ 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 UP-1.0 - juillet 2017 license GNU/GPLv3 tags layout-static
flexauto = 3: nombre de colonnes sur grand écran ou G-T-M
tablet = 2: nombre de colonnes sur moyen écran
mobile = 1: nombre de colonnes sur petit écran
class: classe(s) ajoutée(s) au bloc parent
style: style inline ajouté au bloc parent
bloc-style: style inline ajoutée(s) au bloc enfant
css-head (base-css):

➠ 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 : flexbox=4-8 ou flexbox=33-66 pour 2 colonnes (équivalent: span4 et span8)
Note : les options class-1 à class-6 et style-1 à style-6 sont à saisir directement dans le shortcode
author Lomart version UP-1.0 - 08/2017 license GNU/GPLv3 tags Layout-static
flexbox: nombre de colonnes ou prefset sous la forme x-x-x-x
tablet: nombre de colonnes sur moyen écran sous la forme x-x-x-x
mobile: nombre de colonnes sur petit écran sous la forme x-x-x-x
class: class bloc principal
style: style inline bloc parent
class-*: class pour tous les blocs colonnes. sinon voir class-1 à class-6
style-*: style inline pour tous les blocs colonnes. sinon voir style-1 à style-6
bloc-style: style inline ajoutée(s) au bloc enfant
css-head (base-css):

➠ form_select : liste déroulante d'options ➠ DEMO

syntaxe : {up form-select=action_onchange}liste options CSV (label;value){/up form-select}
author LOMART version UP-1.9 license GNU/GPLv3 tags expert
form_select = url: mot-clé (url, url-blank) ou argument pour onchange ou prefset
file: fichier CSV pour contenu
separator = ;: separateur des colonnes
no-content-html = en=content not found : %s;fr=contenu non trouvé : %s: message erreur. %s:nom fichier
style: classes et styles
css-head (base-css):

➠ 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 UP-0.9 - Juillet 2017 license GNU/GPLv3 tags widget
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 UP-0.9 (17/08/17) license GNU/GPLv3 tags Expert
googlefont: nom police
size: ajout font-size et line-height
family: famille de substitution (cursive, fantasy)
tag = span: balise HTML pour entourer le contenu
className: nom de la classe pour utiliser la police
css-head (base-css): complément de css: color, font-size, ....

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

➠ 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
v2.2 : possibilité saisie rapide {up html=h1.foo.xx} equivaut à {up html=h1 | class=foo xx}
version UP-1.0 author LOMART 2017-08 license GNU/GPLv3 tags html
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 UP-0.9 license GNU/GPLv3 tags editor
icon: jeu d'options ou src color size
prefix = icon-: pour icomoon ou 'fa fa-' pour font-awesome (a mettre dans pref.ini)
fontname = icomoon: pour icomoon ou FontAwesome ou autres (a mettre dans pref.ini)
src: nom icone, code unicode, chemin image (indispensable si prefset)
size: taille icone en px, em (px par defaut) - coté du carré dans lequel est inscrit l'image
color: couleur
color-hover: couleur lors survol icone (sauf image et unicode coloré)
style: style inline
class: classe
selector: retour sous forme propriétés CSS pour ce selecteur
info = 0: 1 affiche la liste des icons définies dans prefs.ini comme un message debug, 2 la retourne pour affichage à la place du shortcode

➠ iframe : introduire un iFrame responsive dans un article ➠ DEMO

syntaxe {up iframe=URL}
author LOMART version UP-1.9.5 license GNU/GPLv3 credit css : https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin/ tags HTML
iframe: URL site distant
allowfullscreen = allowfullscreen: autorise le plein ecran
scrolling = no: affiche les ascenceurs si nécessaire
ratio = 16:9: sous forme largeur:hauteur ou ratio 0.5625 ou pourcentage 56.25%
height (h,hauteur): hauteur (utile pour mobile)
preview: image affichée avant chargement de l'iframe
class: classe(s) pour bloc externe
style: style inline pour bloc externe
iframe-class: classe(s) pour bloc - utilisation interne
iframe-style: style inline pour bloc - utilisation interne
css-head (base-css): style ajouté dans le HEAD de la page

➠ 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 UP-0.9 - Juillet 2017 license GNU/GPLv3 credit script de Sylvain Combes tags image
image_compare: aucun argument nécessaire
class: classe(s) pour le bloc
style: style inline pour le bloc
initVisibleRatio = 0.2: position initiale
interactionMode = drag: mode: drag, mousemove, click
addSeparator = 1: ajoute séparateur (ligne verticale)
addDragHandle = 1: ajoute poignee sur séparateur
animationDuration = 450: Duree animation en ms
animationEasing = linear: animation: linear, swing
precision = 2: Precision rapport, nb decimales

➠ 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 UP-1.4 license GNU/GPLv3 credit jqPhotoSwipe de Ergec - photoswipe.com - Masonry - Shuffle.js tags image
image_gallery: fichier image, dossier pour galerie ou largeurs des images contenues
layout = masonry-3-2-1: layout pour galerie : grid-x-x-x, none-x-x-x, shuffle-x-x-x
nb-img = 0: nombre de vignette affiché pour la galerie d'un dossier, 0 = toutes
gallery = 1: affiche la galerie dans une lightbox. Saisie obligée pour faire une galerie des images du contenu
legend: label pour image unique
legend-type = 2: 0:aucune, 1:hover-top, 2:hover-bottom, 3:sous l'image
class: classe(s) pour bloc principal
style: style inline pour bloc principal
img-class: classe(s) pour bloc figure avec image et legende
img-style: style inline pour bloc avec image et legende
legend-class: classe(s) pour la légende vignette
legend-style: style pour la légende vignette
img-sizes: largeur image en pourcentage de wmax-page en mode desktop, tablette et mobile. 100,100,100 par defaut
wmin-image = 600: largeur mini de l'image pour prise en charge
wmax-page = 1200: largeur maxi du conteneur contenu de la page
wmax-lightbox = 1200: largeur image dans lightbox
wmax-lightbox-mobile = 768: largeur image dans lightboox sur mobile ou 0 pour desactiver. Multiplié par pixel-ratio
pixel-ratio = 0: facteur DPR. ex: 0:sans, vide, 1 ou 2: 2, 3:3
quality = 70: taux compression jpeg
similarity = 80: taux minimal. Si la largeur entre 2 images alternatives est inferieure a 80%, la plus petite n'est pas cree
bp-tablet = 768: point de rupture tablette
bp-mobile = 480: point de rupture smartphone
random: affichage random en mode shuffle
search: shuffle search
shuffle-reverse: shuffle : ordre inverse des boutons
css-head (base-css): style CSS inséré dans le HEAD

➠ 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 UP-0.9 - juillet 2017 license GNU/GPLv3 credit Sanjay Jadon tags image
image_hover: nom de l'image
effect = 11: nom de l'effet à trouver sur le site démo
class: classe pour bloc externe (deprecated)
style: style inline pour bloc externe
img-class: classe pour image (deprecated)
img-style: style inline pour image
text-class: classe pour bloc texte lors survol (deprecated)
text-style: style inline pour bloc texte lors survol
css-head (base-css): code css pour le head. ATTENTION [] au lieu de {}

➠ image_logo : Ajoute une image ou un texte sur une image ➠ DEMO

syntaxe {up image-logo=prefset,image_logo ou texte}image{/up image-logo}
author LOMART version UP-1.8 license GNU/GPLv3 tags image
image_logo: prefset,image_logo ou texte
pos = right,bottom: position horizontale (left, gauche, right, droite, center, centre), verticale (top, haut, bottom, bas, center, centre)
width (l,largeur,w): largeur logo en px, rem, %. % par défaut
class: classe(s) pour bloc
style: style inline pour bloc
main-class: classe(s) pour le bloc du contenu
main-style: style inline pour le bloc du contenu
css-head (base-css): style ajouté dans le HEAD de la page

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

syntaxe 1 {up image-magnify=petite image | imgzoom=grande image pour zoom}
syntaxe 2 {up image-magnify=image pour vignette et zoom}
author LOMART version UP-0.9 license GNU/GPLv3 credit thdoan tags image
image_magnify: fichier image normale
imgzoom: fichier image utilisé pour le zoom. si vide: image principale
size: diametre de la loupe en pixel
radius: diametre de la loupe en pixel
border: modele de bordure pour la loupe
class: classe(s) ajoutées au bloc principal
style: style inline ajouté au bloc principal

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

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

➠ image_random : Affiche aléatoirement une des images d'un dossier ➠ DEMO

Le dossier peut être un pattern valide pour la fonction PHP GLOB
syntaxe 1 : {up image-random=folder}
syntaxe 2 : {up image-random}image 1{===}image 2 avec lien{/up image-random}
syntaxe 3 : {up image-random}content 1{===}content 2{/up image-random}
author LOMART version UP-1.8.2 license GNU/GPLv3 tags image
image_random: dossier des images
path-only = 0: retourne uniquement le chemin de l'image pour utilisation par une autre action.
class: classe(s) pour bloc
style: style inline pour bloc
css-head (base-css): style ajouté dans le HEAD de la page

➠ image_rollover : Change l'image au survol ➠ DEMO

syntaxe {up image-rollover=image_base | hover=image_survol}
author LOMART version UP-1.4 license GNU/GPLv3 tags image
image_rollover: image repos
hover: image au survol
click: image lors clic
class: classe(s) pour bloc
style: style inline pour bloc

➠ image_secure : Affiche une image de manière à compliquer sa récupération ➠ DEMO

syntaxe {up image-secure=chemin_image}
author LOMART version UP-1.8 (10-03-2020) license GNU/GPLv3 tags image
image_secure: chemin relatif vers image jpg ou png
folder-source = images: dossier racine des images originales
folder-strip = images/image-secure: dossier avec les images fractionnées
nb-strip = 5: nombre de bande
alt: texte alternatif pour image. Si vide: nom du fichier humanisé
quality = 80:
reset = 0: force la génération des images strip
delete-source = 0: supprime l'image source après génération des strips
class: classe(s) pour bloc
style: style inline pour bloc
css-head (base-css): style ajouté dans le HEAD de la page

➠ 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 UP-1.2 du 10-12-17 license GNU/GPLv3 credit script RWD Image Maps de stowball tags image
imagemap: le chemin et nom de l'image
class: classe(s) ajoutées au bloc principal
style: style inline ajouté au bloc principal

➠ jcat_image : Affiche une image en rapport avec la catégorie de l'article courant ➠ DEMO

syntaxe {up jcat_image}
author LOMART version UP-1.95 license GNU/GPLv3 tags joomla
jcat_image: dossier/chemin/url vers une image si la catégorie n'en possède pas
class: classe(s) pour bloc
style: style inline pour bloc
css-head (base-css): style ajouté dans le HEAD de la page

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

➠ jcategories_list : liste des catégories descendantes ➠ DEMO

la catégorie parente n'est pas affichée
syntaxe : {up jcategories-list=id}
MOTS-CLES ITEM MENU:
##id## ##access## ##title-link## ##title## ##note## ##extension## ##language##
https://docs.joomla.org/Categories_and_CategoryNodes_API_Guide
author LOMART version UP-1.8 license GNU/GPLv3 tags Joomla
jcategories_list: id catégorie ou vide pour toutes
component = Content: nom de l'extension pour laquelle récupérer les catégories
level: nombre de niveaux. O = tous
main-tag = ul:
item-tag = li:
template = ##title-link##[small] (id:##id##) ##access## ##extension## ##language##[/small] ##note##: modèle de mise en page. keywords + bbcode
model-note = [i class="t-blue"]%s[/i]:
style: classes et styles
css-head (base-css):

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

➠ 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##
##CF_id_or_name## : valeur brute du custom field
##CF_id_or_name | [span class="t-red"]%label% : [:span]%value% ## (ou %rawvalue%)
author LOMART version UP-1.7 license GNU/GPLv3 tags Joomla
jcontent_by_tags: ID ou nom du tag
maxi: Nombre maxi d'articles dans la liste
no-published (no_published) = 0: 1 pour obtenir les catégories non publiées
sort-by = title: tri: title, rgt, created, modified, id, hits
sort-order = asc: ordre de tri : asc, desc
template: modèle de mise en page. Si vide le modèle est le contenu
main-tag = div: balise pour le bloc englobant tous les articles. 0 pour aucun
main-style: classes et styles inline pour bloc principal
main-class: classe(s) pour bloc principal (obsoléte)
item-tag = div: balise pour le bloc englobant tous les articles. 0 pour aucun
item-style: classes et styles inline pour bloc principal
item-class: classe(s) pour bloc principal (obsoléte)
image-src: lorempixel.com/150/150', // image par défaut
image-alt = news: image, texte alternatif par défaut
date-format = %e %B %Y: format pour les dates
date-locale: localisation pour les dates. Par défaut, celle du navigateur client.
new-days = 30: nombre de jours depuis la création de l'article
new-html = [span class="badge-red"]nouveau[/span]: code HTML pour badge NEW
tags-list-prefix: texte avant les autres eventuels tags
tags-list-style: classe ou style pour les autres mots-clés
no-content-html = aucune catégorie pour ce mot-clé: retour si aucune catégorie trouvée
css-head (base-css):

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

syntaxe 1 : {up jcontent-in-content=id_article}
syntaxe 2 : {up jcontent_in_content=145}template{/up jcontent_in_content}
Les mots-clés :
##id## ##title## ##title-link## ##subtitle## ##link##
##intro## ##intro-text## ##intro-text,100## ##content##
##image## ##image-src## ##image-alt##
##date-crea## ##date-modif## ##date-publish##
##author## ##note## ##cat## ##new## ##featured## ##hits##
author LOMART version UP-1.7 license GNU/GPLv3 tags Joomla
jcontent_in_content: ID de l'article
no-published (no_published) = 1: Liste aussi les articles non publiés
template = ##content##: modèle de mise en page. Si vide le modèle est le contenu. BBCode accepté
main-tag = div: balise pour le bloc d'un article. 0 pour aucun
main-style: classes et styles inline pour un article
main-class: classe(s) pour un article (obsoléte)
date-format = %e %B %Y: format pour les dates
date-locale: localisation pour les dates. Par défaut, celle du navigateur client.
css-head (base-css): code CSS dans le head

➠ 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 jcontent-list}
author LOMART version UP-0.9 license GNU/GPLv3 tags Joomla
jcontent_list (article_category): ID de la catégorie ou vide pour celle de l'article actuel
maxi: Nombre maxi d'article dans la liste
no-published (no_published) = 1: Liste aussi les articles non publiés
sort-by = title: tri: title, ordering, created, modified, publish_up, id, hits
sort-order = asc: ordre de tri : asc, desc
author: filtre sur auteur: liste des id ou article, current
main-class: classe(s) pour bloc principal (obsoléte)
class: idem main-class. Conservé pour compatibilité descendante
main-style: classes et styles inline pour bloc principal
style: idem main-style. Conservé pour compatibilité descendante
title (titre): titre HTML si article trouvé.
title-tag = h3: niveau du titre
title-style: classes et styles inline pour le titre
title-class: classe(s) pour le titre (obsoléte)
list-style: classes et styles inline pour la liste
list-class: classe(s) pour la liste (obsoléte)
css-head (base-css): code CSS dans le head

➠ jextensions_list : liste des extensions installées sur le site ➠ DEMO

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

➠ jmenus_list : liste des menus ➠ DEMO

syntaxe : {up jmenus-list=menutype}
MOTS-CLES MENUTYPE:
##id## ##menutype## ##title## ##description##
MOTS-CLES ITEM MENU:
##id## ##title## ##link## ##title-link## ##note## ##access## ##language## ##component##
author LOMART version UP-1.8 license GNU/GPLv3 tags Joomla
jmenus_list: prefset, nom menutype ou vide pour tous
menuid: ID menu parent pour limiter à cette branche
main-tag = ul: balise pour la liste des fichiers
template-menutype = [h5]##title## (id:##id##)[/h5] ##description## / ##menutype##: modèle de mise en page ou 0 pour aucun. keywords + bbcode
template-menu = ##title-link##[small] (id:##id##) ##access## - ##component## ##language##[/small] ##note##: modèle de mise en page. keywords + bbcode
model-note = [i class="t-blue"] %s[/i]: keywords + bbcode
style: classes et styles
css-head (base-css):

➠ jmodules_list : liste des modules sur le site ➠ DEMO

syntaxe : {up jmodules-list=position ou client_id}
MOTS-CLES:
##id## ##client## ##position## ##module## ##title##
##state## ##note## ##ordering## ##language##
author LOMART version UP-1.8 license GNU/GPLv3 tags Joomla
jmodules_list: prefset ou position(s). vide=tous les modules site
position-exclude = 0: 1= toutes les positions sauf celles passées en paramétre principal
client = 0: 0=site, 1=admin, 2=tous
module: nom du module. ex: LM-Custom-SITE
module-exclude = 0: 1= tous les modules sauf ceux passés au paramètre module
actif-only = 0: 1 pour lister les extensions dépubliées
order = position, ordering, title: tri
main-tag = ul: balise pour le bloc englobant tous les modules. 0 pour aucun
main-style: classes et styles inline pour bloc principal
main-class: classe(s) pour bloc principal (obsolète)
item-tag = li: balise pour un module. 0 pour aucun
item-style: classes et styles inline pour bloc ligne
item-class: classe(s) pour bloc ligne (obsoléte)
template = \[##position##\] [b class="##state##"][/b] [b]##title##[/b] [small] (id:##id## - ##module##) ##language##[/small] ##note##: modèle de mise en page.
model-note = [i class="t-blue"]%s[/i]:
no-content-html = [p]aucun module a cette position[/p]: retour si aucune catégorie trouvée
state-list = icon-unpublish t-rouge, icon-publish t-vert, icon-trash t-gris: liste de choix : inactif, actif 🔴
css-head (base-css):

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

Vos yeux après de longues heures devant votre ordi commencent à se fermer.
Vite tapez ce shortcode :
syntax {up kawa=long | sugar | speculoos=lotus }
author LOMART version UP-1.3.2 license GNU/GPLv3 tags widget
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 du contenu selon la langue du 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 UP-1.7 license GNU/GPLv3 tags Editor
lang: langue pour vérifer le rendu (vide en production)
lang-order = en,fr: ordre de saisie des langue dans contenu
tag: balise entourant le contenu retourné
class: classe(s) pour bloc
style: style inline pour bloc
css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
info = 0: affiche la langue du navigateur et celle affichée
http = 0: utilise lentête HTTP au lieu de JFactory::getLanguage()

➠ 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é.
v1.9.5 : strip_tags si max-char ou max-word
author Lomart version UP-1.0 - 07/2017 license GNU/GPLv3 tags editor
lorem: nombre de paragraphe et mots-clé séparés par des virgules
max-char: nombre maxima de caractères
max-word: nombre maxima de mots
tag = div: (v1.6) tag du bloc contenant le texte en retour ou tag=0 pour aucun.
class: classe(s) pour bloc (sans effet, si tag=0)
style: style inline pour bloc (sans effet, si tag=0)

➠ 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 UP-1.5 09/2018 license GNU/GPLv3 tags Editor
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 UP-1.5 07/2017 license GNU/GPLv3 tags Editor
lorem_unsplash: n° de l'image sur https://picsum.photos/images
height (h,hauteur) = 200: hauteur image téléchargée
width (l,largeur,w) = 200: largeur image téléchargée
random = 0: force la récupération aléatoire
grayscale = 0: pour rendu en niveaux de gris
blur = 0: rendu flou
gravity: recadrage : north, east, south, west, center
class: classe(s) (obsolète)
style: classes et styles

➠ 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 UP-1.0 07/2017 license GNU/GPLv3 tags Editor
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

➠ mapael : Affiche une carte vectorielle interactive ➠ DEMO

syntaxe
{up mapael=nom_carte}
{default-area | ...}
{default-plot | ...}
{default-link | ...}
{area=ID | value=X | ...}
{plot=ID | coord=lat,lon | value=[X1,X2] | text=... | ...}
{link=ID | between=lat1,lon1,lat2,lon2 | factor=0.5 | ...}
{link=ID | between=plot-ID-1, plot-ID-2 | factor=0.5 | ...}
{legend-area=TITRE | ...}
{legend-plot=TITRE | ...}
{legend-slice=LABEL | value=X | ...}
{legend-slice=LABEL | min=X | max=Y | ...}
{/up mapael}
# Options shortcode principal :
zoom=min,max | zoom-init=niv,lat,lon | csv-xxx | ...
# Options communes à tous les shortcodes secondaires :
bd-color | bd-color-hover | bd-dash | bd-width | bd-width-hover | bg-color | bg-color-hover
class | eventHandlers | href | target | transform-hover
text | text-attrs | text-attrs-hover | text-margin | text-position
tooltip | tooltip-class | tooltip-offset-left | tooltip-offset-top | tooltip-overflow-right | tooltip-overflow-bottom
options
# Options spÃ©cifiques Ã defaultPlot et plot
type | size | height | width | url | path
saisie rapide : circle=W,color | square=W,color | image=WxH,url | svg=WxH,path
# Options pour area
value
# Options pour plot
value | coord | plotsOn
# Options pour link
between | factor
# Options pour legend-area et legend-plot
mode | exclusive | display | legend-class
ml | mb | ml-label | ml-title |mb-title | color-title | color-label | color-label-hover
hide-enabled | hide-opacity | hide-animation
# Options pour legend-slice
value | min | max
legend-slice/label | clicked | display
legend-font-size | legend-bd-color | legend-bd-width
author LOMART version UP-2.3 license GNU/GPLv3 credit script xxx de xxx tags widget
mapael: nom de la carte (fichier .js)
zoom: valeur mini,maxi du zoom
zoom-init: niveau initial et coordonnÃ©es du centre
options: liste des options au format mapael. ex: default-area: {attrs:{fill:"#dda0dd"},attrsHover:{fill:"#FF00FF"}}
make-html = 1: par defaut, les blocs pour la ou les legendes sont crees au-dessous de celui pour la carte.
map-class = map: Nom de classe CSS du conteneur de la carte
csv-areas: fichier CSV pour definir les areas. Les sous-shortcodes 'area' sont ignores
csv-areas-model: modele pour construire la definition d'une zone
csv-plots: fichier CSV pour definir les plots. Les sous-shortcodes 'plot' sont ignores
csv-plots-model: modele pour construire la definition d'un point
csv-links: fichier CSV pour definir les links. Les sous-shortcodes 'link' sont ignores
csv-links-model: modele pour construire la definition d'un lien
tooltip-class: Nom de classe CSS des infobulles
tooltip-style: Proprietes CSS pour les infobulles
before-init: voir demo
after-init: voir demo
class: classe(s) ajoutees au bloc principal
style: style inline ajoute au bloc principal
css-head (base-css): style ajoute dans le HEAD de la page

➠ 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 UP-1.3 credit erusev/parsedown license GNU/GPLv3 tags File
markdown: chemin et nom du fichier markdown ou vide pour contenu
strip-tags = 1: 0 pour conserver les tags HTML dans le contenu saisi entre les shortcodes. Ils sont toujours conservés si la source est un fichier.
class: classe(s) pour bloc (obsolète)
style: classes et styles pour bloc

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

{up marquee=label} texte du message défilant {/up marquee}
author Lomart version UP-1.0 - 28/7/2017 license GNU/GPLv3 credit script JS limarquee de omcg33 tags layout-dynamic
marquee: le texte de l'etiquette
filter: conditions. Voir doc action filter (v1.8)
height (h,hauteur) = 100px: hauteur defaut pour scroll vetical
model = base: style CSS dans .upmq-*style*. aucun=none
out-class: classe(s) pour div out
out-style: style inline pour div out
msg-class: classe(s) pour div msg
msg-style: style inline pour div msg
lbl-class: classe(s) pour div label
lbl-style: style inline pour div label
lbl-pos: position label : left, right, top, bottom, none
lbl-nowrap = 0: 1 = label sur une ligne
direction = left: right, up, down
loop = -1: nombre d'affichage, -1 : infini
scrolldelay = 0: delai en millisecondes
scrollamount = 50: vitesse
circular = 1: mode carousel. si contenu plus large que .str_wrap
drag = 1: deplacement msg avec souris
runshort = 1: scroll si texte court (visible sans scroll)
hoverstop = 1: pause lors survol
inverthover = 0: scroll uniquement lors survol

➠ 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 UP-1.1 du 30-09-2017 license GNU/GPLv3 tags Media
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_vimeo : affiche une video Viméo qui s'inscrit au maxima dans son bloc parent ➠ DEMO

{up media_vimeo=ID [| autoplay | portrait |title |muted |loop | play-on-visible]}
ID : il s'agit du code figurant à la fin de l'URL de la vidéo.
L'autoplay sous Firefox/Chrome est interdit si la video contient du son.
Utilisez muted pour debloquer cela.
voir https://vimeo.zendesk.com/hc/en-us/articles/115004485728-Autoplaying-and-looping-embedded-videos
Les options title et portrait ne fonctionne que si la video le supporte.
author Pascal version UP-1.9.5 license GNU/GPLv3 tags Media
media_vimeo: code de la video (à la fin de l'url vimeo)
width (l,largeur,w): largeur de la video en px ou %
autoplay = 0: demarrage automatique
title (titre) = 0: Afficher le titre de la vidéo
portrait = 0: Afficher l'image de profil de l'auteur (portrait)
loop = 0: boucle en fin de video
muted = 0: coupe le son
play-on-visible = 0: démarre et arrête la video selon sa visibilité sur l'ecran
class: classe pour bloc externe
style: code css libre pour bloc externe

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

{up media-youtube=ID [|autoplay|play-on-visible|muted|loop]}
ID : il s'agit du code figurant à la fin de l'URL de la vidéo.
author LOMART/ modifié par Pascal version UP-0.9 MAJ 21-05-2020 license GNU/GPLv3 tags Media
media_youtube (youtube): code de la video (à la fin de l'url youtube)
width (l,largeur,w): largeur de la video en px ou %
autoplay = 0: demarrage automatique
loop = 0: boucle sur la video
muted = 0: coupe le son
play-on-visible = 0: démarre et arrête la video selon sa visibilité sur l'ecran
class: classe pour bloc externe
style: code css libre pour bloc externe

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

Syntaxe : {up meteo-france=ville | orientation=sens}
le code commune de la ville à récupérer sur https://www.meteofrance.com/meteo-widget
author LOMART version UP-1.0 du 01-07-2017 license GNU/GPLv3 tags Widget
meteo_france: le code commune de la ville à récupérer sur https://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 modal=//youtu.be/H9fa9aWFbLM}
- image unique si {up modal=images/xx.jpg} ou png, ...
- bloc inline si id de bloc {up modal=#bloc}
- iframe si url {up modal=//lomart.fr} ou {up modal=doc/xx.pdf} ou {up modal=?index/...}
on peut forcer le type par type=inline, iframe, image, video, ajax
author LOMART version UP-1.4 license GNU/GPLv3 credit https://www.jqueryscript.net/lightbox/Lightbox-Popup-Plugin-Flashy.html tags layout-dynamic
modal: contenu ou type de contenu
type: pour forcer le type : inline, iframe, image, video, ajax
class: classe(s) pour bloc label
style: style inline pour bloc label
label: texte du lien pour afficher le popup. bbcode accepté
close-left = 0: croix de fermeture en haut à gauche. haut-droite par défaut
zoom-suffix = -mini: suffixe pour les versions vignettes des images
css-head (base-css): règles CSS definies par le webmaster (ajout dans le head)
base-js-params: règles JS definies par le webmaster (ajout dans init JS)
filter: conditions. Voir doc action filter (v1.8)
overlayClose = 1: 1 pour fermer la fenêtre modale en cliquant sur la zone grisée autour du contenu
videoAutoPlay = 0: 1 pour demarrer la video a l'ouverture du popup
gallery = 1: 0 pour traiter les images individuellement
title (titre) = 1: afficher le titre
width (l,largeur,w): largeur avec unite. Ex: 80%, 500px, ...
height (h,hauteur): hauteur avec unite. Ex: 80%, 500px, ...

➠ note : Ajouter des commentaires visibles dans un éditeur WYSIWYG et pas sur le site ➠ DEMO

syntax 1 {up note=texte_commentaire}
syntax 2 {up note=texte_commentaire} contenu {/up note}
author LOMART version UP-1.9.5 license GNU/GPLv3 tags Editor
note:

➠ 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 UP-1.3 license GNU/GPLv3 credit script de Leaflet tags widget
osmap: latitude, longitude du centre de la carte (a récupérer sur https://getlatlon.yohman.com)
zoom = 13: niveau de zoom de la carte
height (h,hauteur) = 250: hauteur du bloc carte. La largeur est 100% du parent
scale = 1: affiche l'échelle. 0:sans, 1:métrique, 2:impérial, 3:métrique&impérial
map-options: liste des options pour la carte. ex: zoomControl:1, keyboard:0
tile: nom de la tuile
tile-options: niveau de zoom maximum, ...
tile-url: url de la tuile
marker = 1: affiche un marker au centre de la carte
marker-image: 0: aucun ou chemin image pin
marker-options: chaine des options du marqueur. voir https://leafletjs.com/reference-1.3.0.html#icon
popup-clic = 1: 0: permanent ou 1: sur clic (si texte)
popup-text: texte du popup en bbcode. Si vide, pas de popup
gmap (googlemap): texte du lien affiché au-dessous de la carte pour afficher la carte sous GMap
gmap-url: optionnel.Permet d'afficher un marqueur
class: classe(s) ajoutées au bloc principal
style: style inline ajouté au bloc principal

Action parallax : erreur de structure des dossiers.
➠ 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 https://turnjs.com/ depuis https://github.com/iberan/pdfjs-flipbook
author LOMART version UP-1.4 license GNU/GPLv3 credit Mozilla PDF.js tags File
pdf: chemin du fichier pdf
method (methode) = PDFJS: ou Google, Embed ... ou 0
view = 1: ou Google, Embed ... ou 0
pdfjs-model = web: ou mobile (non opérationnel)
width (l,largeur,w) = 100%: largeur iframe
height (h,hauteur) = 500px:
download = 1: 1 pour afficher lien téléchargement
download-name: nom du fichier téléchargé
download-text = en=Download %s;fr=Telecharger %s: texte pour lien
download-icon: image affichée devant le lien
download-class: class(s) pour bouton lien seul
download-style: style inline pour bouton lien seul
btn (bouton) = 0: 1 pour afficher un bouton
btn-target = _blank: cible : _blank, _parent, popup ou _popup
btn-text = voir %s: texte pour bouton
btn-icon: image affichée devant le texte du bouton
btn-class = btn btn-primary: class(s) pour bouton lien seul
btn-style: style inline pour bouton lien seul
close-left = 0: croix de fermeture en haut à gauche. haut-droite par défaut
flip = 0: activer le mode flipbook uniquement si pdfJs
class: classe(s) pour bloc parent
style: style inline pour bloc parent
background: couleur fond perdu du PDF au format #rrggbb
➠ 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 UP-1.0 license GNU/GPLv3 tags Expert
php: le code PHP
filter: conditions. Voir doc action filter (v1.8)
class:
style:
➠ 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 UP-1.7 license GNU/GPLv3 tags Expert
php_error = dev: mode rapport d'erreurs : none, 0, min, max, dev
➠ printer : Ajoute un bouton pour proposer l'impression d'une partie de la page ➠ DEMO
syntaxe {up printer=texte bouton} le contenu à imprimer {/up printer}
author LOMART version UP-1.8 license GNU/GPLv3 tags Editor
printer = ⎙ Imprimer: texte du bouton
selector: sélecteur CSS du bloc à imprimer
filename: nom du document si impression PDF
btn-before = 0: le bouton est après le contenu à imprimer
btn-display-on-print = 0: 0 = masque le bouton sur l'impression
class: classe(s) pour bloc
style: style inline pour bloc
css-head (base-css): style ajouté dans le HEAD de la page
➠ qrcode : Génére des QRCodes avec Google API ➠ DEMO
syntaxe {up qrcode=type | xxx=...}
author LOMART version UP-1.8 license GNU/GPLv3 tags widget
qrcode = text: type de QRCode : text/url/sms/email/phone/location/wifi/contact
size = 200: Largeur
name: nom pour contact
text: texte libre pour text, sms, email, contact
phone: numéro de téléphone pour sms, tel, contact
url: site Internet pour url, contact
email: adresse email pour email, contact
subject: sujet pour email
latitude: pour geo
longitude: pour geo
address: adresse pour contact
ssid: identifiant point d'accés pour wifi
auth = WPA: WPA ou WEP pour wifi
password: clé wifi du point d'accés pour wifi
alt: texte alternatif, si le qrcode n'est pas affiché
encoding = UTF-8:
class: classe(s) pour bloc
style: style inline pour bloc
css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
➠ 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 UP-1.0 - 07/2017 license GNU/GPLv3 credit script de Matt tags layout-dynamic
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 UP-1.0 - 07/2017 license GNU/GPLv3 credit un vieux script de mes archives tags HTML
sameheight: inutilisé
class:
style:
css-head (base-css): 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 UP-1.7 license GNU/GPLv3 credit Super Treadmill de nishadmenezes adapté pour UP tags layout-dynamic
scroller = 3: nombre d'élément ou hauteur du bloc en px
class: classe(s) pour la balise principale
style: style inline pour la balise principale
css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
runAfterPageLoad = false:
direction = up: sens du défilement (up/down)
speed = medium: slow (5000), medium (3000), fast (1200) ou durée en millisecondes
viewable = 3: nombre d'élément ou hauteur du bloc en px (idem scroller)
pause = 1: stop on hover
➠ 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: 0 ou durée affichage image
slideSpeed = 200: Vitesse en millisecondes
paginationSpeed = 0: durée changement en millisecondes
pagination = true: Affiche pagination
paginationNumbers = 0: Affiche numéros à l'intérieur des boutons de pagination
goToFirst = 1: Retour sur premier élément si lecture automatique à la fin
goToFirstSpeed = 1000: vitesse de l'option goToFirst en millisecondes
navigation = false: Affichage boutons "next" et "prev"
navigationText = "prev,next": boutons sans texte: "navigationText: false"
responsive = true:
items = 0: Nombre maxi d'éléments affichés en meme temps sur la plus grande largeur de navigateur
itemsDesktop = [1199, 4]: Cela vous permet de prédéfinir le nombre de diapositives visibles avec une largeur de navigateur particulière. Le format est [x, y] où x = largeur du navigateur et y = nombre de diapositives affichées. Par exemple, [1199,4] signifie que si (window <= 1199) {affiche 4 diapositives par page} Vous pouvez également utiliser "itemsDesktop: false" pour ignorer ces paramètres. Pour bien comprendre comment cela fonctionne, consultez ma démo personnalisée
itemsDesktopSmall = [979, 3]: voir ci-dessus
itemsTablet = [768, 2]: voir ci-dessus
itemsMobile = [479, 1]: voir ci-dessus
➠ 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 UP-1.1 license GNU/GPLv3 credit Easy jQuery Responsive Slideshow - Billboard de Spalmer tags layout-dynamic
slideshow_billboard: si indiqué, toutes les images de ce dossier (ordre alpha)
label = 1: affiche la légende des images (attribut alt ou nom fichier humanisé).
zoom-suffix: si indiqué, seules les images avec ce suffixe sont utilisées
class: classe(s) ajoutées au bloc principal
style: style inline ajouté au bloc principal
css-head (base-css):
ease = easeInOutExpo: mode de transition
speed = 1000: durée des transitions en millisecondes
duration = 5000: durée entre les changements d'images
autoplay = 1: démarrage automatique
loop = 1: diaporama en boucle si exécution automatique est vraie
transition = left: "fade", "up", "down", "left", "right"
navType = list: "controls", "list", "both" or "none"
styleNav = 1: applies default styles to nav
includeFooter = 1: afficher/masquer le pied de page (légende et navigation)
autosize = 1: hauteur diaporama fixe. calcul sur 1ère image
resize = 0: tente de détecter automatiquement la taille de chaque diapositive
stretch = 1: étire les images pour remplir le conteneur
➠ snowfall : Simule des chutes de neige ou autres ... ➠ DEMO
syntaxe
site : {up snowfall=image}
bloc : {up snowfall=image | selector=bloc}
author LOMART version UP-1.5 license GNU/GPLv3 credit Script JQuery-Snowfall de loktar00 tags body
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 UP-1.1 license GNU/GPLv3 credit script xxx de xxx tags Media
sound_hover: fichier_son
evenement = onmouseenter: ou onclick, onmouseover...
tag = div: balise pour le bloc. span pour un bloc inline
class: classe(s) pour le bloc parent
style: style pour le bloc parent
➠ span : Facilite la saisie d'un bloc inline SPAN avec un éditeur wysiwyg ➠ DEMO
syntaxe {up span=class_and_style}content{/up span}
author LOMART version UP-2.0 license GNU/GPLv3 tags HTML
span: classes et style (séparateur : point-virgule)
class: classe(s) pour bloc (méthode traditionnelle)
style: style inline pour bloc (méthode traditionnelle)
css-head (base-css): style ajouté dans le HEAD de la page
➠ sql : Requête SQL avec mise en forme et tri ➠ DEMO
syntaxe {up sql=nom_table | ...}
Terminologie:
row : ligne de la table
col : cellule. Colonne de la table
tag ou motclé : ##nomcol##
author LOMART version UP-1.8 license GNU/GPLv3 credit script Stupid Table de joequery tags Joomla
sql: nom de la table
select = *: listes des colonnes
where:
order:
group:
innerjoin:
outerjoin:
leftjoin:
rightjoin:
setlimit:
presentation = table: présentation du résultat : list,table,div ou 0
header: 1 ou vide pour utiliser les mots-clés, sinon titres séparés par point-virgules
sort: type de tri par colonne sous la forme: i,3-f-s. i:int, s:string, f:float. ,3 indique un tri secondaire sur la 3e colonne
sort-first: nom ou position de la colonne triée en premier
col: alignement et largeur des colonnes sous la forme x-D-C5-100 pour rien-droite-centre 5%-100% (voir doc)
template: modèle mise en page
no-content-html = aucun résultat:
main-class = up: classe(s) pour bloc
main-style: style inline pour bloc
item-class: classe(s) pour ligne
item-style: style inline pour ligne
css-head (base-css): style ajouté dans le HEAD de la page
dbinfos: vide= liste des tables, nom_table=liste des colonnes
➠ 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 UP-1.0 - 07/2017 license GNU/GPLv3 credit Script de bhaveshcmedhekar tags layout-dynamic
tab = tab: tab ou accordion
title-tag = h4: balise utilisée pour les titres onglets
style: classe(s) et style(s) bloc principal
class: classe(s) bloc principal (obsolète)
title-style: classe(s) et style inline onglets
title-class: classe(s) onglets (obsolète)
content-style: classe(s) et style inline contenu
content-class: classe(s) contenu (obsolète)
auto: delai en millisecondes pour changement automatique d'onglet
espace-vertical = 1: 0, 1 ou 2 : niveau des éléments à répartir
css-head (base-css): règles CSS mises dans le head
plugin_type: accordion
side: left ou right
active_tab: 1 a N
content_display = block: interne, défini par espace-vertical
➠ 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 version UP-1.0 - 07/2017 license GNU/GPLv3 credit John Polacek tags Responsive
table_by_columns (table_par_colonnes): rien
breakpoint = 720px: bascule en vue responsive
model = up-stacktable: nom d'un fichier CSS prévu par le webmaster pour toutes les tables de la page
max-height: permet de limiter la place en hauteur par l'affichage d'un ascenseur
key-width = 35%: largeur de la première colonne en vue responsive
title-style: style pour la ligne titre en vue responsive
style: style inline pour balise table
class: classe(s) pour balise table (obsolète)
➠ 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 UP-1.0 - 07/2017 license GNU/GPLv3 credit codefog tags Responsive
table_by_rows (table_par_lignes): rien
breakpoint = 720px: bascule en vue responsive
max-height: max-height pour la table
style: style inline pour balise table
class: classe(s) pour balise table (obsolète)
merge: fusion de colonnes. 1:[2,3],5:[6] = 2&3 avec 1 et 6 avec 5
move: deplacement colonne. 1:0,6:1 = 1 au debut et 6 en 2eme
skip: non visible. [3,5] = col 3 et 5 non visible
span: [2,4] = valeur sans libellé (eq: colspan)
➠ 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 UP-1.0 - 07/2017 license GNU/GPLv3 credit lai32290 tags Responsive
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 UP-1.0 - 07/2017 license GNU/GPLv3 credit Jason Gross tags Responsive
table_flip (table_permute): aucun argument
style: classes et styles inline pour balise table
class: classe(s) pour balise table (obsolète)
➠ table_sort : description de l'action. La 1ère ligne d'en-tête du script ➠ DEMO
La suite de la description après la 1ère ligne
author LOMART version UP-2.3 license GNU/GPLv3 credit script jQuery fancyTable de myspace-nu tags layout-dynamic
table_sort: le paramétre principal
col-type: mode de tri des colonnes
col-init: n° de la colonne triée au chargement et sens (asc, desc)
globalSearch: vide= recherche sur toutes les colonnes, sinon liste des colonnes (1,2,5)
placeholder = lang[en=Search;fr=Rechercher]: texte dans la zone recherche
pagination = 0: nombre de lignes par pages ou 0 pour désactiver
pagination-class: classe pour les boutons
pagination-class-active: classe pour le bouton actif
class: classe(s)
style: style inline
css-head (base-css): style ajouté dans le HEAD de la page
sortable = 1: Activer le tri
searchable = 1: Activer la recherche
➠ 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 UP-1.0 - MAJ 05/2020 credit script de hawk-ip license GNU/GPLv3 tags Body
tabslide: titre de l'onglet
tab-style: classes et styles inline pour onglet
tab-class: classe(s) pour onglet (obsolète)
panel-style: classes et styles inline pour panneau
panel-class: classe(s) pour panneau (obsolète)
speed = 300: OBSOLETE voir bounceSpeed
positioning = fixed: or absolute, so tabs move when window scrolls
toggleButton = .tab-opener: not often used
tabLocation = left: left, right, top or bottom
tabHandle = .handle: JQuery selector for the tab, can use #
action = click: action open, 'hover' or 'click'
hoverTimeout = 5000: ms to keep tab open after no longer hovered - only if action = 'hover'
offset = 200px: distance pour top or left (bottom or right if offsetReverse is true)
offsetReverse = 0: true= aligné a droite ou en bas
otherOffset = null: if set, panel size is set to maintain this dist from bottom or right (top or left if offsetReverse)
handleOffset = null: e.g. '10px'. If null, detects panel border to align handle nicely
handleOffsetReverse = 0: if true, handle aligned with right or bottom of panel
bounceDistance = 50px: how far bounce event will move everything
bounceTimes = 4: how many bounces when 'bounce' is called
bounceSpeed = 300: time to animate bounces
pathToTabImage = null: optional image to show in the tab
imageHeight = null:
imageWidth = null:
onLoadSlideOut = 0: slide out after DOM load
clickScreenToClose = 1: close tab when rest of screen clicked
onOpen = function() {:
onClose = function() {:
onSlide = function() {:
➠ text_fit : Ajuste un texte à son conteneur ➠ DEMO
syntaxe {up up text-fit=option_principale}texte{/up text-fit}
version UP-2.2 <- version minimale de UP pour prise en charge license GNU/GPLv3 credit script Textblock de glyphic-co tags font
text_fit: sélecteur du bloc. ex: h1, h1.foo, #id, h2#id, ...
blocsize = 320-960: largeur mini-maxi en px du bloc conteneur
fontsize = 1-1.8: taille mini-maxi en em de la police. Autre unité : em,rem,px,ex,%,vh,vw. ex : 16-32px
lineheight = 1.33-1.25: hauteur de ligne mini-maxi. facteur multiplicateur de la taille de la police
fontweight: graisse mini-maxi si police variable. ex: 400-900
fontfile: chemin vers le fichier d'une police de caractère
fontclass: nom de la classe attribué à la police
container = parent: bloc utilisé pour calcul blocsize. parent ou self.
tag = div: balise par defaut
class: classe(s) pour bloc
style: style inline pour bloc
css-head (base-css): style ajouté dans le HEAD de la page
➠ text_typewriter : Afficher plusieurs phrases avec un effet machine à écrire ➠ DEMO
syntaxe 1 : {up text-typewriter=mot1, mot2, ..., motN}
syntaxe 2 : {up text-typewriter}alternatives dans blocs enfants {/up text-typewriter}
version UP-2.3 license GNU/GPLv3 credit script typed.js de mattboldt tags HTML
text_typewriter: liste de mots séparés par des virgules
class: classe(s) pour bloc
style: style inline pour bloc
css-head (base-css): style ajouté dans le HEAD de la page
typeSpeed = 0: vitesse de frappe en ms
startDelay = 0: délai en ms avant chaque série
backSpeed = 0: vitesse de l'espacement arrière en millisecondes
smartBackspace = true: n'efface que ce qui ne correspond pas à la chaîne précédente
shuffle = false: mélange les phrases
backDelay = 700: délai en ms avant effacement
fadeOut = false: Fondu au lieu de retour en arrière
fadeOutClass = typed-fade-out: classe CSS pour l'animation du fondu
fadeOutDelay = 500: Durée du fondu en millisecondes
loop = false: chaînes en boucle
loopCount = Infinity: nombre de boucles
showCursor = true: montrer le curseur
cursorChar = |: caractère pour le curseur
autoInsertCss = true: insérer le CSS pour le curseur et le fadeOut dans le HTML
attr = null: attribut pour la saisie. Ex: input placeholder, value, or just HTML text
bindInputFocusEvents = false: lier le focus et le blur si element est une entrée de texte
contentType = html: 'html' ou 'null' pour texte brut
➠ toc : Sommaire automatique ➠ DEMO
Création d'un sommaire à partir des titres de l'article
syntaxe {up toc}
author LOMART version UP-1.7 license GNU/GPLv3 credit https://www.jqueryscript.net/layout/Highly-Configurable-jQuery-Table-of-Contents-Plugin-TocJS.html tags Editor
toc: inutilisé
class: classe(s) ajoutées au bloc principal
style: style inline ajouté au bloc principal
css-head (base-css): style ajouté au head de la page
content = [itemprop="articleBody"]: bloc analysé pour le sommaire
selector = h2,h3,h4,h5,h6: liste des selecteurs utilisés pour le sommaire
exclude = .notoc: liste sélecteur pour exclusion du sommaire
indexingFormats: format des index : nombres, lettres ou
maxlen: longueur maxi des titres du sommaire
heading: Titre du sommaire
elementClass = uptoc: class de la div navigation
rootUlClass = toc-ul-root:
ulClass = toc-ul:
levelPrefixClass = toc-level-: (interne) préfixe des classes
➠ tooltip : des info-bulles au survol d'un élément ➠ DEMO
syntaxe {up tooltip=texte info-bulle}texte{/up tooltip}
author LOMART version UP-1.9.5 license GNU/GPLv3 credit sur un script de stefangabos tags Editor
tooltip: texte de la bulle. bbcode permis
model: une des classes principales définies dans up-model.scss
position = center: left, right
bottom (b,bas) = 0: vrai pour afficher la bulle au-dessous
width (l,largeur,w) = 250: largeur maxi de l'info-bulle
offset = 0: décalage verticcal de info-bulle. Négatif=vers le haut
opacity = 95: transparence de l'info-bulle
open = 0: info-bulle affichée au chargement de la page
class: classe(s) pour bloc
style: style inline pour bloc
css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
➠ tweeter_timeline : affiche la timeline Tweeter ➠ DEMO
{up tweeter-timeline=}
voir : dev.twitter.com/web/embedded-timelines/parameters
author PMLECONTE version UP-1.3 du 22/05/2018 license GNU/GPLv3 tags widget
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 : 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
version UP-1.0 update 2019-10-25 author Lomart - https://lomart.fr update 2019-10-25 license GNU/GPLv3 tags UP
upactionslist: liste des actions à récupérer. toutes par défaut
demo = 1: afficher le lien vers la demo
style:
class: (obsolète)
filter: condition d'exécution
make-dico = 0: consolide le fichier principal dico.json avec ceux des actions
csv = 0: enregistre un tableau CSV des actions et options dans plugins/content/up/doc-actions.csv
comment = 0: enregistre un tableau CSV des infos dans les commentaires des scripts dans plugins/content/up/comment-actions.csv
md = 0: enregistre la documentation au format markdown dans plugins/content/up/doc-actions.md
➠ upprefset : Affiche la liste de tous les prefsets de UP pour le site ➠ DEMO
syntaxe {up upPrefSet}
author LOMART version UP-1.8 license GNU/GPLv3 tags UP
upprefset: liste des actions ou vide pour toutes
action-exclude = 0: 1: toutes les actions sauf celles du paramétre principal
action-template = [h4]##action##[/h4]:
prefset-template = [b]##prefset##[/b] : [small]##options##[/small]:
info-template = [div class="bd-grey ph1"]##info##[/div]:
prefset-separator = [br]:
options-separator = [b class="t-vert"] | [/b]: les underscrores sont remplacés par des espaces
prefset-exclude = icons,options: sections exclues
export-prefs: ou sous-dossier de TMP pour sauver l'arborescence. ex : up-pref-foo
class: classe(s) pour bloc
style: style inline pour bloc
css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
➠ upscsscompiler : 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 UP-1.2 license GNU/GPLv3 credit https://github.com/leafo/scssphp tags UP
upscsscompiler: liste des actions à recompiler. toutes par défaut
mode = Compressed: Compressed, Compact, Crunched, Expanded, Nested
force = 0: force la compilation de tous les SCSS. Par défaut: les SCSS plus récents que leur CSS.
info = 0: affiche rapport compilation
force-filter: oblige force si la condition est remplie
➠ website : Affiche un screenshot d'un site avec un lien. ➠ DEMO
syntaxe {up website=URL}
par defaut, le texte affiche sous la vignette est l'URL sans https://
author LOMART version UP-1.4 license GNU/GPLv3 tags Widget
website: URL du site
link = 1: affiche le lien au-dessous du screenshot
link-text: texte affiche pour le lien et alt
target = _blank: ou _self pour ouvrir le site dans le meme onglet
renew = 30: nombre de jours pour actualiser les vignettes. 0 = jamais (v2.2)
timeout = 15: delai pour recupérer les infos du serveur Google (v2.2)
style: classes et style inline pour bloc
class: classe(s) pour bloc (obsolete)
css-head (base-css): regles CSS definies par le webmaster (ajout dans le head) v1.8

découverte

	accueil
	contacter perlimpinpin
	liens
	mentions légales
	météo à Neffiès
	plan

Annonce

UP Universal Plugin

Effet n° 82

Fil d'Ariane

rechercher

identification