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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ergo in gubernando nihil, in officio plurimum interest, quo in genere peccetur. Hi curatione adhibita levantur in dies, valet alter plus cotidie, alter videt. Nunc omni virtuti vitium contrario nomine opponitur. Hoc est non dividere, sed frangere. Nummus in Croesi divitiis obscuratur, pars est tamen divitiarum. Habent enim et bene longam et satis litigiosam disputationem.
Et hercule-fatendum est enim, quod sentio -mirabilis est apud illos contextus rerum. Nihil minus, contraque illa hereditate dives ob eamque rem laetus. Ergo id est convenienter naturae vivere, a natura discedere. Cum id fugiunt, re eadem defendunt, quae Peripatetici, verba. Zenonis est, inquam, hoc Stoici. Illi enim inter se dissentiunt.
Illi enim inter se dissentiunt. Quae autem natura suae primae institutionis oblita est? Quod quidem nobis non saepe contingit. Beatus autem esse in maximarum rerum timore nemo potest. Nondum autem explanatum satis, erat, quid maxime natura vellet. Haeret in salebra.
Duo Reges: constructio interrete. Aliter autem vobis placet. Beatus autem esse in maximarum rerum timore nemo potest. Licet hic rursus ea commemores, quae optimis verbis ab Epicuro de laude amicitiae dicta sunt. Non est igitur voluptas bonum. A primo, ut opinor, animantium ortu petitur origo summi boni. Non enim ipsa genuit hominem, sed accepit a natura inchoatum. Audax negotium, dicerem impudens, nisi hoc institutum postea translatum ad philosophos nostros esset. Quae autem natura suae primae institutionis oblita est? Causa autem fuit huc veniendi ut quosdam hinc libros promerem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quod dicit Epicurus etiam de voluptate, quae minime sint voluptates, eas obscurari saepe et obrui. Quorum sine causa fieri nihil putandum est. Non autem hoc: igitur ne illud quidem. Ad corpus diceres pertinere-, sed ea, quae dixi, ad corpusne refers? Duo Reges: constructio interrete. Quod autem magnum dolorem brevem, longinquum levem esse dicitis, id non intellego quale sit. Idemne, quod iucunde? Illud dico, ea, quae dicat, praeclare inter se cohaerere. Primum cur ista res digna odio est, nisi quod est turpis?
Proclivi currit oratio. Putabam equidem satis, inquit, me dixisse. Qualem igitur hominem natura inchoavit? Quacumque enim ingredimur, in aliqua historia vestigium ponimus. Theophrasti igitur, inquit, tibi liber ille placet de beata vita? Quod autem in homine praestantissimum atque optimum est, id deseruit.
An vero, inquit, quisquam potest probare, quod perceptfum, quod. Igitur neque stultorum quisquam beatus neque sapientium non beatus. Quod non faceret, si in voluptate summum bonum poneret. Hoc dixerit potius Ennius: Nimium boni est, cui nihil est mali.
Cenasti in vita numquam bene, cum omnia in ista Consumis squilla atque acupensere cum decimano. Quamquam id quidem licebit iis existimare, qui legerint. Quod non faceret, si in voluptate summum bonum poneret. Quid ergo aliud intellegetur nisi uti ne quae pars naturae neglegatur? Quid de Pythagora? Nummus in Croesi divitiis obscuratur, pars est tamen divitiarum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quod iam a me expectare noli. Sed finge non solum callidum eum, qui aliquid improbe faciat, verum etiam praepotentem, ut M. In quibus doctissimi illi veteres inesse quiddam caeleste et divinum putaverunt. Dic in quovis conventu te omnia facere, ne doleas. Itaque haec cum illis est dissensio, cum Peripateticis nulla sane. Duo Reges: constructio interrete. Facile est hoc cernere in primis puerorum aetatulis. Quod, inquit, quamquam voluptatibus quibusdam est saepe iucundius, tamen expetitur propter voluptatem.
Nummus in Croesi divitiis obscuratur, pars est tamen divitiarum. Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Ille vero, si insipiens-quo certe, quoniam tyrannus -, numquam beatus; Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest.
Videamus igitur sententias eorum, tum ad verba redeamus. Tu autem negas fortem esse quemquam posse, qui dolorem malum putet. Sed tamen enitar et, si minus multa mihi occurrent, non fugiam ista popularia. Vives, inquit Aristo, magnifice atque praeclare, quod erit cumque visum ages, numquam angere, numquam cupies, numquam timebis. Ergo instituto veterum, quo etiam Stoici utuntur, hinc capiamus exordium. Primum quid tu dicis breve? Ita prorsus, inquam; Atqui pugnantibus et contrariis studiis consiliisque semper utens nihil quieti videre, nihil tranquilli potest. Nummus in Croesi divitiis obscuratur, pars est tamen divitiarum. Non igitur potestis voluptate omnia dirigentes aut tueri aut retinere virtutem. Fortemne possumus dicere eundem illum Torquatum? Neque enim civitas in seditione beata esse potest nec in discordia dominorum domus;
Ut placet, inquit, etsi enim illud erat aptius, aequum cuique concedere. Nam Pyrrho, Aristo, Erillus iam diu abiecti. Atque his de rebus et splendida est eorum et illustris oratio. Videmus igitur ut conquiescere ne infantes quidem possint. Ita multo sanguine profuso in laetitia et in victoria est mortuus. Nos paucis ad haec additis finem faciamus aliquando; Invidiosum nomen est, infame, suspectum.
3 :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Summae mihi videtur inscitiae. Ut nemo dubitet, eorum omnia officia quo spectare, quid sequi, quid fugere debeant? Nos paucis ad haec additis finem faciamus aliquando;Suam denique cuique naturam esse ad vivendum ducem. Sed id ne cogitari quidem potest quale sit, ut non repugnet ipsum sibi. Cuius quidem, quoniam Stoicus fuit, sententia condemnata mihi videtur esse inanitas ista verborum. Sic enim censent, oportunitatis esse beate vivere.
Duo Reges: constructio interrete. Estne, quaeso, inquam, sitienti in bibendo voluptas? Eaedem enim utilitates poterunt eas labefactare atque pervertere. Expectoque quid ad id, quod quaerebam, respondeas. Quae cum dixisset paulumque institisset, Quid est? Si enim ad populum me vocas, eum. Quod cum dixissent, ille contra. Sed in rebus apertissimis nimium longi sumus.
Bestiarum vero nullum iudicium puto. Idem iste, inquam, de voluptate quid sentit? Numquam hoc ita defendit Epicurus neque Metrodorus aut quisquam eorum, qui aut saperet aliquid aut ista didicisset. Sin dicit obscurari quaedam nec apparere, quia valde parva sint, nos quoque concedimus; Quid Zeno? Praeclare enim Plato: Beatum, cui etiam in senectute contigerit, ut sapientiam verasque opiniones assequi possit. Longum est enim ad omnia respondere, quae a te dicta sunt.
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 licenseGNU/GPLv3tags 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 licenseGNU/GPLv3tags Expert
addcodehead: code à ajouter dans le head ou balise
🆙 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 licenseGNU/GPLv3tags 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ètre 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 licenseGNU/GPLv3tags 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 licenseGNU/GPLv3credit Script de michalsniktags layout-dynamic
anim_aos = zoom-in-right: nom de l'animation
delay: délai en millisecondes (50-3000 ms)
duration: durée animation en millisecondes (50-3000 ms)
author ConseilGouz version UP-1.8 licenseGNU/GPLv3tags 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 = #000: Couleur du code-barre. En mode PNG, on attend des valeurs RGB séparées par des virgules, sinon la couleur en forme texte.
align = center: alignement code barres et texte (left, center, right)
showtext = 1: montrer le texte ayant permis de générer le code barres
class: Class(s) pour bloc
style: Inline style pour bloc
css-head (base-css): Régles CSS définie par le webmaster (ajoutées dans head)
🆙 bbcode : Saisir du code HTML avec un éditeur WYSIWYG ➠ DEMO
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 fenêtre
head-class: class pour le bloc entête. en général title, subtitle, image
head-style: style pour le bloc entête
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
🆙 cache_cleaner : Efface les fichiers du cache ➠ DEMO
Supprime tous les fichiers PHP du sous-dossier indiqué en option. com_content par défaut syntaxe {up cache-cleaner=com_modules} // defaut : com_content
version UP-2.6 author Lomart licenseGNU/GPLv3tags Expert
cache_cleaner = com_content: liste des dossiers du cache (séparateur: point-virgule)
🆙 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 licenseGNU/GPLv3tags 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 licenseGNU/GPLv3tags 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 licenseGNU/GPLv3credit 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)
author LOMART version UP-1.6 licenseGNU/GPLv3tags 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
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ée au premier affiché
digit-class: classe(s) pour les chiffres
zero = 0: ajoute un zéro 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
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 licenseGNU/GPLv3tags layout-static
csv2def: chemin vers fichier à afficher
separator = ;: séparateur des colonnes (fichier uniquement)
HTML = 0: pour fichier (contenu CSV): 0=affiche le rendu, 1=affiche le code ou liste des tags conservés (strip_tags)
model = stack: empile par défaut, 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 séparer les différents termes
def-class: classe(s) pour le bloc des definitions
def-style: style pour le bloc des définitions
def-style-separator: style pour séparer les différentes définitions
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
author LOMART version UP-1.6 licenseGNU/GPLv3tags layout-static
csv2list: chemin vers fichier à afficher
separator = ;: séparateur des colonnes
HTML = b,a,span,strong,i,em,u,mark,small,img,code: 0= aucun traitement, 1=affiche le code, ou liste des tags a garder (strip_tags)
model = stack: nom de la classe modèle dans le fichier csv2list.css
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: première 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: dernière 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 licenseGNU/GPLv3tags layout-static
csv2table: URL ou chemin et nom d'un fichier local
separator = ;: séparateur des colonnes
HTML = 0: 0= aucun traitement, 1=affiche le code, ou liste des tags a garder (strip_tags)
model: nom de la classe modèle dans le fichier csv2table.css
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: dernière 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)
🆙 csv_info : Retourne la valeur brute d'un élément (ligne/colonne) d'un fichier CSV
syntaxe : une alternance de titres pour les onglets en H4 et de contenu HTML {up faq} -- titre en H4 -- contenu HTML {/up faq}
author lomart version UP-1.0 - 15/07/2017 licenseGNU/GPLv3creditryans temkoskitags 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
css-head (base-css):
🆙 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 author Lomart licenseGNU/GPLv3tags 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 licenseGNU/GPLv3tags 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 licenseGNU/GPLv3tags file
file_download: fichier ou dossier
file-mask: pour sélectionner les fichiers d'un dossier. ex: fic-*
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 licenseGNU/GPLv3tags file
file_view: chemin et nom du fichier
HTML = 0: 0= aucun traitement, 1=affiche le code, ou liste des tags à 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 licenseGNU/GPLtags editor
filter: valeur retournée si vrai;faux
datemax: vrai jusqu'à cette date AAAAMMJJHHMM
datemin: vrai à partir de cette date AAAAMMJJHHMM
period: vrai entre ces dates AAAAMMJJHHMM-AAAAMMJJHHMM
day: liste des jours autorisés. 1=lundi, 7=dimanche
month: liste des mois autorisés. 1=janvier, ...
hmax: vrai jusqu'à cette heure HHMM
hmin: vrai à partir de cette heure HHMM
hperiod: vrai entre ces heures HHMM-HHMM
guest: vrai si utilisateur invité
admin: vrai si admin connecté
user: liste des userid autorisé. ex: 700,790
username: liste des username autorisé. ex: admin,lomart
group: liste des usergroup autorisé. ex: 8,12
lang: liste des langues autorisées. ex: fr,ca
mobile: vrai si affiché sur un mobile
homepage: vrai si affiché sur la page d'accueil
server-host: vrai si le domaine du serveur contient un des termes de la liste
server-ip: vrai si l'adresse IP du serveur des dans la liste
artid: vrai si l'ID de l'article courant est dans la liste
catid: vrai si l'ID de la catégorie de l'article courant est dans la liste
menuid: vrai si l'ID du menu actif est dans la liste
info = 0: affiche les valeurs actuelles des arguments pour les conditions
return-true = 1: valeur retournée si vrai et pas de contenu
return-false = 0: valeur retournée si faux et pas de contenu
🆙 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 licenseGNU/GPLv3tags 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: classes et style inline ajouté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 licenseGNU/GPLv3tags 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: classe et style inline ajoutés au bloc enfant
css-head (base-css):
🆙 folder_list : retourne la liste mise en forme du contenu d'un dossier sur le serveur ➠ DEMO
syntaxe {up folder_list=path | template=##file## (##size)} ##file## : chemin/nom.extension ##fullpath## : chemin (sans slash final) ##relpath## : chemin relatif (sans slash final) ##basename## : nom et extension ##filename## : nom sans extension (sans le point) ##extension## : extension ##size## : taille du fichier ##date## : date dernière modification
🆙 icon : uniformise l'appel des icônes. Evite de passer en mode code pour la saisie ➠ DEMO
syntaxe 1 : {up icon=nom_icone} syntaxe 2 : {up icon=Ux1F7A7} syntaxe 3 : {up icon=images/icone.png} syntaxe 4 : {up icon=Ux1F7A7,#F00,2rem} Important : indiquer dans prefs.ini le préfixe pour la police d'icones installée sur le site
author Lomart version UP-0.9 licenseGNU/GPLv3tags 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 icône, code unicode, chemin image (indispensable si prefset)
size: taille icône en px, em (px par defaut) - coté du carré dans lequel est inscrit l'image
color: couleur
color-hover: couleur lors survol icône (sauf image et unicode coloré)
style: style inline
class: classe
selector: retour sous forme propriétés CSS pour ce selecteur
info = 0: 1 affiche la liste des icônes définies dans prefs.ini comme un message debug, 2 la retourne pour affichage à la place du shortcode
🆙 iframe : introduire un iFrame responsive dans un article ➠ DEMO
syntaxe {up iframe=URL}
author LOMART version UP-1.9.5 licenseGNU/GPLv3credit 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 ascenseurs si nécessaire
ratio = 16:9: sous forme largeur:hauteur ou ratio 0.5625 ou pourcentage 56.25%
height (h,hauteur): hauteur (utile pour mobile)
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
🆙 image_gallery : Affiche une ou plusieurs images dans une lightbox ➠ DEMO
avec adaptation de la taille image à celle de l'appareil et légendes syntaxe 1 {up image-gallery=chemin_image | alt=texte} syntaxe 2 {up image-gallery=chemin_dossier} syntaxe 3 {up image-gallery}contenu avec des images{/up image-gallery}
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 degrés par seconde
showControls = 1: 0 pour masquer tous les boutons
showZoomCtrl = 1: 0 pour masquer les boutons +/- du zoom
showFullscreenCtrl = 1: 0 pour masquer le bouton plein écran
hotSpotDebug = 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 licenseGNU/GPLv3tags 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
author LOMART version UP-1.4 licenseGNU/GPLv3tags 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) licenseGNU/GPLv3tags image
image_secure: chemin relatif vers image jpg ou png
folder-source = images: dossier racine des images originales
folder-strip = images/image-secure: dossier avec les images fractionnées
nb-strip = 5: nombre de bandes
alt: texte alternatif pour image. Si vide: nom du fichier humanisé
quality = 80:
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
template (item-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 licenseGNU/GPLv3tags 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 (item-template) = ##title-link##[small] (id:##id##) ##access## ##extension## ##language##[/small] ##note##: modèle de mise en page. keywords + bbcode
model-note = [i class="t-blue"]%s[/i]:
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 licenseGNU/GPLv3tags Joomla
jcontent_by_categories (jnews): ID(s) catégorie(s) séparé(s) avec virgule, vide pour celle de l'article actuel ou 0 pour toutes
maxi: Nombre maxi d'articles dans la liste. Vide = tous
exclude: liste des id des catégories non reprises si option principale=0
current = 0: 1 pour inclure l'article en cours
no-published (no_published) = 1: Liste aussi les articles non publiés
author: filtre sur auteur: liste des id ou article, current
template (item-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 = ⭐: 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 éventuels tags
tags-list-style = badge;margin-right:4px: classe ou style affecté à une balise span par mot-clé
tags-list-separator: séparateur entre mots-clés
css-head (base-css): code CSS dans le head
🆙 jcontent_by_subcat : Les articles par categories et sous-categories ➠ DEMO
syntaxe 1 : {up jcontent-by-subcat=id-categorie} liste des articles d'une catégorie et ses sous-catégories syntaxe 2 : {up jcontent-by-subcat} liste des articles de la catégorie en cours et ses sous-catégories syntaxe 3 : {up jcontent-by-subcat=0} liste des articles de toutes les catégories syntaxe 4 : {up jcontent-by-subcat}##title##{/up jcontent-by-subcat} variante : saisie template pour articles entre shortcodes Les mots-clés article: ##title## ##title-link## ##subtitle## ##link## ##intro## ##intro-text## ##intro-text,100## ##content## ##image## ##image-src## ##image-alt## ##date-crea## ##date-modif## ##date-publish## ##author## ##note## ##cat## ##new## ##featured## ##hits## ##tags-list## Les mots-clés catégorie: ##catpath## : Chemin des categories depuis la categorie racine. ex: si on demande la categorie 2 avec 3 niveaux (subcat=3): 2.1 > 2.1.1 > 2.1.1.1 ##title## ##title-link## ##link## : titre et lien de la categorie ##alias## ##note## ##id## ##count## : nombre d'articles dans la catégorie
author LOMART version UP-2.5 licenseGNU/GPLv3tags Joomla
jcontent_by_subcat: ID catégorie, vide pour celle de l'article actuel ou 0 pour toutes
exclude: liste des id des catégories non reprises si option principale=0
cat-level = 99: 0 a 99 - niveau maxi exploration des sous-catégories
maxi: Nombre maxi d'articles dans chaque catégorie. Vide = tous
current = 0: 1 pour inclure l'article en cours
no-published (no_published) = 0: Liste aussi les articles non publies
author: filtre sur auteur: liste des id user ou article, current
tags-list-prefix: texte avant les autres eventuels tags
tags-list-style = badge;margin-right:4px: classe ou style affecte a une balise span par mot-cle
tags-list-separator: separateur entre mots-cles
path-separator = »: caractère ou bbcode pour séparer les items menus ou les catégories
path-current-class = b: style de l'élement terminal d'un chemin
path-parent-class = fs90: style des élements parents
path-order = asc: asc: élément terminal à la fin, desc : au début
path-link = 1: affiche les liens sur les éléments.
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 licenseGNU/GPLv3tags 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
listup: style des puces (séparateur point-virgule) par niveaux (markers) (séparateur virgule)
class: classe(s) pour bloc principal
style: class ou style inline pour bloc principal
style-*: class ou style pour les niveaux des puces
start: indice pour début liste numérotée
ul-default = square;t-c1: type liste par défaut
ol-default = decimal;t-c1: type liste numérotée par défaut
valid-type = rounded-alpha,squared-alpha,circled-decimal,rounded-decimal,decimal-leading-zero,lower-alpha,upper-alpha,lower-roman,upper-roman: types de liste (numérotée) autorisés
fonticon = FontAwesome: police d'icônes installée sur le site
css-head (base-css): style ajouté dans le HEAD de la page
. Syntaxe : {up lorem=liste des arguments ci-dessous } - (integer) - Nombre de paragraphes (P) générés. 4 par défaut - short, medium, medium, verylong - La longueur moyenne d'un paragraphe. - decorate - ajoute bold, italic, ... - link - ajoute des liens. - ul - ajoute listes. - ol - ajoute listes ordonnées. - dl - ajoute listes description. - bq - ajoute bloc citation - code - ajoute des exemples de code. - headers - ajoute des titre hx. - allcaps - TOUT EN MAJUSCULES. - prude - version prude. - plaintext - Retourne text sans balise HTML. exemple appel : https://loripsum.net/api/2/code/decorate . Pour avoir un texte sans aucun tag, utilisez : {up lorem=2,plaintext | tag=0}. Même sans balise P, le nombre de paragraphes influe sur la longueur du texte retourné. v1.9.5 : strip_tags si max-char ou max-word
author Lomart version UP-1.0 - 07/2017 licenseGNU/GPLv3tags editor
lorem: nombre de paragraphe et mots-clés 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 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 licenseGNU/GPLv3tags 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) = 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 : précisez yt ou youtube ou vimeo code : il s'agit du code figurant dans l'URL de la vidéo. . {up media_plyr=video | poster=url image | mp4 | webm | vtt | download } media_plyr : video pour indiquer l'URL vers la video. poster : nom de l'image fixe 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 licenseGNU/GPLv3tags 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 débloquer cela. voir https://vimeo.zendesk.com/hc/en-us/articles/115004485728-Autoplaying-and-looping-embedded-videos Les options title et portrait ne fonctionne que si la video le supporte.
author Pascal version UP-1.9.5 licenseGNU/GPLv3tags 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: démarrage 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 licenseGNU/GPLv3tags 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
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 fenêtre modale (popup) ➠ DEMO
les types autorisés sont : inline, iframe, image, video, ajax syntaxe 1 : {up modal=contenu popup | label=texte du lien} syntaxe 2 : {up modal=vide,'html','images' ou contenu | label=texte lien}contenu{/up popup} si vide ou 'html' : le contenu du popup est le code entre les shortcodes si 'img' : chaque image du code entre les shortcodes sera un popup sinon on analyse la valeur du paramètre pour déterminer son type - video vimeo, youtube ou dailymotion {up modal=//youtu.be/H9fa9aWFbLM} - image unique si {up modal=images/xx.jpg} ou png, ... - bloc inline si id de bloc {up modal=#bloc} - iframe si url {up modal=//lomart.fr} ou {up modal=doc/xx.pdf} ou {up modal=?index/...} on peut forcer le type par type=inline, iframe, image, video, ajax
author LOMART version UP-1.4 licenseGNU/GPLv3credit 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 définies par le webmaster (ajout dans le head)
base-js-params: règles JS définies par le webmaster (ajout dans init JS)
filter: conditions. Voir doc action filter (v1.8)
overlayClose = 1: 1 pour fermer la fenêtre modale en cliquant sur la zone grisée autour du contenu
videoAutoPlay = 0: 1 pour démarrer la video à l'ouverture du popup
gallery = 1: 0 pour traiter les images individuellement
title (titre) = 1: afficher le titre
width (l,largeur,w): largeur avec unité. Ex: 80%, 500px, ...
height (h,hauteur): hauteur avec unité. Ex: 80%, 500px, ...
🆙 note : Ajouter des commentaires visibles dans un éditeur WYSIWYG et pas sur le site ➠ DEMO
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
🆙 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} integration libraire TurnJs http://turnjs.com/ depuis https://github.com/iberan/pdfjs-flipbook
author Lomart version UP-1.0 - 07/2017 licenseGNU/GPLv3credit script de Matttags 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
panel-style: classes et style pour le contenu (v2.6)
🆙 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 licenseGNU/GPLv3credit 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} Attention : - définir un style="height:..." aux images (pas de height="...")
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 même temps sur la plus grande largeur de navigateur
itemsDesktop = [1199, 4]: cela vous permet de prédéfinir le nombre de diapositives visibles avec une largeur de navigateur particulière. Le format est [x, y] où x = largeur du navigateur et y = nombre de diapositives affichées. Par exemple, [1199,4] signifie que si (window <= 1199) {affiche 4 diapositives par page} Vous pouvez également utiliser "itemsDesktop: false" pour ignorer ces paramètres. Pour bien comprendre comment cela fonctionne, consultez ma démo personnalisée
itemsDesktopSmall = [979, 3]: voir ci-dessus
itemsTablet = [768, 2]: voir ci-dessus
itemsMobile = [479, 1]: voir ci-dessus
🆙 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}
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 des points-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 (item-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 licenseGNU/GPLv3credit Script de bhaveshcmedhekartags 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 licenseGNU/GPLv3creditJohn Polacektags 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ées par lignes avec la possibilité de les déplacer, de les fusionner, de supprimer le titre, d'afficher seulement certaines colonnes. https://github.com/codefog/restables/blob/master/README.md . IMPERATIF : Les titres des colonnes doivent être dans une balise HEAD
author lomart version UP-1.0 - 07/2017 licenseGNU/GPLv3creditcodefogtags 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: déplacement colonne. 1:0,6:1 = 1 au debut et 6 en 2eme
skip: non visible. [3,5] = col 3 et 5 non visible
span: [2,4] = valeur sans libellé (eq: colspan)
🆙 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 licenseGNU/GPLv3creditlai32290tags Responsive
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 licenseGNU/GPLv3creditJason Grosstags 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 : Trier, filtrer et paginer une table ➠ DEMO
🆙 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 update 2019-10-25 licenseGNU/GPLv3tags 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: fichier doc-actions.csv avec les options des actions
comment = 0: interne: fichier comment-actions.csv avec les infos des entêtes des scripts pour relecture globale
md = 0: enregistre la documentation au format markdown dans plugins/content/up/doc-actions.md
exclude-prefix = _,x_: prefix des actions non listées. Separateur = comma
🆙 upbtn_makefile : Création des fichiers HTML pour le plugin editors-xtd ➠ DEMO
syntaxe {up upbtn_makefile}
author LOMART version UP-2.1 licenseGNU/GPLv3tags UP
upbtn_makefile: Vide pour toutes les actions, sinon liste des actions à inclure ou exclure (list-exclude=1).
top10: liste des actions à dupliquer dans un groupe au début de la liste
by-tags = 1: si 0, les actions sont dans l'ordre alpha sans notion de groupes (sauf top10)
list-exclude = 0: 0:uniquement les actions indiquées, 1: toutes sauf les actions indiquées
export-folder: sous-dossier de TMP pour sauver l'arborescence. ex : up-pref-foo
without-custom = 0: 1 sans les infos dans prefs.ini (v2.6)
🆙 upprefset : Affiche la liste de tous les prefsets de UP pour le site ➠ DEMO
syntaxe {up upPrefSet}
author LOMART version UP-1.8 licenseGNU/GPLv3tags UP
upprefset: liste des actions ou vide pour toutes
action-exclude = 0: 1: toutes les actions sauf celles du paramétre principal
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
action-class: classes et style pour le bloc d'une action
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 ➠ DEMO
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 licenseGNU/GPLv3credit https://github.com/leafo/scssphp tags UP
upscsscompiler: liste des actions à recompiler. toutes par défaut. 0 pour inactiver
Les parcours présentés sur le site de perlimpinpin.fr, sont des comptes rendus de randonnées à bicyclette et pédestres présentant un caractère subjectif et grandement conditionné par le niveau technique de leur auteur, sa maîtrise, le type de matériel utilisé ainsi que par les conditions de réalisation. Les renseignements donnés à titre indicatif, peuvent se révéler obsolètes par suite d'une évolution du terrain ou de l'environnement. En aucun cas perlimpinpin.fr n'incite les utilisateurs à fréquenter les randonnées décrites sur le site et ne pourra être tenu pour responsable de l'utilisation des topos, des traces GPS et des éventuels incidents pouvant survenir sur les parcours présentés.
Vos yeux après de longues heures devant votre ordi commencent à se fermer. 
