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. 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.
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?
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 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è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 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: delai en millisecondes (50-3000 ms)
duration: durée animation en millisecondes (50-3000 ms)
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 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: 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
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 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é 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
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 = ;: 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
author LOMART version UP-1.6 licenseGNU/GPLv3tags 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 licenseGNU/GPLv3tags 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 licenseGNU/GPLv3tags 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 : 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 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
➠ 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
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 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 licenseGNU/GPLtags 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 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: 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 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: style inline ajoutée(s) au bloc enfant
➠ 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}
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 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 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
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 = ##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é 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
author LOMART version UP-1.7 licenseGNU/GPLv3tags 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 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
. 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 licenseGNU/GPLv3tags 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 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 : 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 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 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 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: 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 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 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 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 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
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.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
➠ 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
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}
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 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é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 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: 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 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 : description de l'action. La 1ère ligne d'en-tête du script ➠ 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 - https://lomart.fr 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: 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 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
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 licenseGNU/GPLv3credit https://github.com/leafo/scssphp tags UP
upscsscompiler: liste des actions à recompiler. toutes par défaut