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. Verum esto; Itaque fecimus. Neutrum vero, inquit ille. Nam memini etiam quae nolo, oblivisci non possum quae volo.
Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur. Quorum altera prosunt, nocent altera. Quamquam te quidem video minime esse deterritum. Eam si varietatem diceres, intellegerem, ut etiam non dicente te intellego; Res enim se praeclare habebat, et quidem in utraque parte. Modo etiam paulum ad dexteram de via declinavi, ut ad Pericli sepulcrum accederem. Itaque primos congressus copulationesque et consuetudinum instituendarum voluntates fieri propter voluptatem; Ipse Epicurus fortasse redderet, ut Sextus Peducaeus, Sex.
Itaque ne iustitiam quidem recte quis dixerit per se ipsam optabilem, sed quia iucunditatis vel plurimum afferat. Duo Reges: constructio interrete. Quid, cum fictas fabulas, e quibus utilitas nulla elici potest, cum voluptate legimus? Quo modo autem optimum, si bonum praeterea nullum est? Paulum, cum regem Persem captum adduceret, eodem flumine invectio? Aliter enim explicari, quod quaeritur, non potest. Quod ea non occurrentia fingunt, vincunt Aristonem; Atqui iste locus est, Piso, tibi etiam atque etiam confirmandus, inquam; In schola desinis. Magni enim aestimabat pecuniam non modo non contra leges, sed etiam legibus partam. An dubium est, quin virtus ita maximam partem optineat in rebus humanis, ut reliquas obruat?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quos quidem tibi studiose et diligenter tractandos magnopere censeo. Duo Reges: constructio interrete. Unum est sine dolore esse, alterum cum voluptate. Quam ob rem tandem, inquit, non satisfacit? Itaque fecimus. Utilitatis causa amicitia est quaesita.
Sint ista Graecorum; Bork Quae diligentissime contra Aristonem dicuntur a Chryippo. Id est enim, de quo quaerimus. In quo etsi est magnus, tamen nova pleraque et perpauca de moribus. Ut optime, secundum naturam affectum esse possit.
Septem autem illi non suo, sed populorum suffragio omnium nominati sunt. Quid enim tanto opus est instrumento in optimis artibus comparandis? Nunc haec primum fortasse audientis servire debemus. Conferam avum tuum Drusum cum C. Quamquam id quidem, infinitum est in hac urbe; Haec bene dicuntur, nec ego repugno, sed inter sese ipsa pugnant.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Prodest, inquit, mihi eo esse animo. Progredientibus autem aetatibus sensim tardeve potius quasi nosmet ipsos cognoscimus. Aliena dixit in physicis nec ea ipsa, quae tibi probarentur; Quid enim necesse est, tamquam meretricem in matronarum coetum, sic voluptatem in virtutum concilium adducere? Quem Tiberina descensio festo illo die tanto gaudio affecit, quanto L.
Duo Reges: constructio interrete. Esse enim quam vellet iniquus iustus poterat inpune. Non quam nostram quidem, inquit Pomponius iocans; Neminem videbis ita laudatum, ut artifex callidus comparandarum voluptatum diceretur. Cum id quoque, ut cupiebat, audivisset, evelli iussit eam, qua erat transfixus, hastam. Non quaeritur autem quid naturae tuae consentaneum sit, sed quid disciplinae. Philosophi autem in suis lectulis plerumque moriuntur. Aliter enim nosmet ipsos nosse non possumus.
Quod autem principium officii quaerunt, melius quam Pyrrho; Cum audissem Antiochum, Brute, ut solebam, cum M. Tollenda est atque extrahenda radicitus. Roges enim Aristonem, bonane ei videantur haec: vacuitas doloris, divitiae, valitudo; Virtutibus igitur rectissime mihi videris et ad consuetudinem nostrae orationis vitia posuisse contraria. Quid igitur dubitamus in tota eius natura quaerere quid sit effectum? Quamquam id quidem, infinitum est in hac urbe; Quia dolori non voluptas contraria est, sed doloris privatio.
3 :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illa argumenta propria videamus, cur omnia sint paria peccata. Num igitur eum postea censes anxio animo aut sollicito fuisse? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Obsecro, inquit, Torquate, haec dicit Epicurus? Haeret in salebra.Duo Reges: constructio interrete.Zenonem roges; Ille vero, si insipiens-quo certe, quoniam tyrannus -, numquam beatus; Ille incendat? Res enim se praeclare habebat, et quidem in utraque parte.
Sit, inquam, tam facilis, quam vultis, comparatio voluptatis, quid de dolore dicemus? Ab hoc autem quaedam non melius quam veteres, quaedam omnino relicta. Tu vero, inquam, ducas licet, si sequetur; Estne, quaeso, inquam, sitienti in bibendo voluptas? Licet hic rursus ea commemores, quae optimis verbis ab Epicuro de laude amicitiae dicta sunt. Non quaeritur autem quid naturae tuae consentaneum sit, sed quid disciplinae. Cum id quoque, ut cupiebat, audivisset, evelli iussit eam, qua erat transfixus, hastam. Si quae forte-possumus. Quo studio Aristophanem putamus aetatem in litteris duxisse?
Sin tantum modo ad indicia veteris memoriae cognoscenda, curiosorum. Si enim ad populum me vocas, eum. Quod si ita se habeat, non possit beatam praestare vitam sapientia. Ut id aliis narrare gestiant? Ne amores quidem sanctos a sapiente alienos esse arbitrantur. Sed audiamus ipsum: Compensabatur, inquit, tamen cum his omnibus animi laetitia, quam capiebam memoria rationum inventorumque nostrorum. Negare non possum. Eodem modo is enim tibi nemo dabit, quod, expetendum sit, id esse laudabile.
une vidéo locale
et beaucoup d'autres choses, bidules, trucs ....
🆙 addclass : ajoute une classe à un sélecteur CSS (body par défaut.)
Cliquer pour lire la documentation
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
*
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, ...
options secondaires
id: identifiant
css-head (base-css): code CSS pour head. Attention utiliser [] au lieu de {}
filter: conditions. Voir doc action filter (v1.8)
🆙 addcodehead : ajoute du code libre dans le head.
Cliquer pour lire la documentation
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
🆙 addcsshead : ajoute du code ou fichier CSS dans le head.
Cliquer pour lire la documentation
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}.foo{color:red}{/up addCssHead} syntaxe 3 {up addCssHead=chemin_fichier_css} Utilisation : charger un fichier CSS spécifique à une page
addfilehead: liste des fichiers ou URL. séparateur virgule
filter: conditions. Voir doc action filter (v1.8)
🆙 addscript : ajoute du code ou un fichier JS ou JQuery
Cliquer pour lire la documentation
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}
addscript = head: ou body pour insérer le code à la position du shortcode
jquery: 1: entoure avec appel jquery (sauf fichier)
filter: conditions. Voir doc action filter (v1.8)
id: identifiant
🆙 ajax_view : Affiche un bouton pour charger le contenu d'un article ou un fichier
Cliquer pour lire la documentation
il est possible de demander un mot de passe syntaxe {up ajax-view=999 | btn-label=Voir un article} syntaxe {up ajax-view=fichier.ext | btn-label=afficher un fichier} syntaxe {up ajax-view=fichier.jpg | btn-label=[img src='photo-mini.jpg'][br]Cliquer pour voir l'image en grand | password=1234}
ajax_view: id article ou chemin vers fichier txt ou image
Style du bouton d'appel du contenu ajax
btn-label = en=load content;fr=charger le contenu: texte sur le bouton appel
btn-style = btn btn-primary: style et classe du bouton appel
btn-tag = div: balise principale
Demande de mot de passe
password: mot de passe pour télécharger le fichier
options secondaires
HTML: 0= aucun traitement, 1=affiche le code, ou liste des tags à garder (ex: img,a)
EOL: forcer un retour à la ligne
ext-images = jpg,png,gif,webp: les extensions des fichiers images autorisés
Style
id: identifiant
main-tag (block) = 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)
🆙 anim_aos : affiche du contenu avec des animations sur scroll de page (librarie en pure JS)
Cliquer pour lire la documentation
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 @license: GNU/GPLv3@credit: Script de michalsnik@tags: 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)
barcode = text: valeur alphanumérique du code code barre
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
styles
id: identifiant
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
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
box
id:
class: classe(s) pour la box
style: style inline pour la box
title
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
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: 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
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
link: lien. . Si vide et demandé : on prend le premier lien sur title ou image
link-target: _blank pour nouvelle fenêtre
header
head-class: class pour le bloc entête. en général title, subtitle, image
head-style: style pour le bloc entête
body
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
general
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
Cliquer pour lire la documentation
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
cache_cleaner = com_content: liste des dossiers du cache ou * pour tous (séparateur: point-virgule)
folder-exclude: chemin relatif (à folder-cache) des dossiers à conserver (séparateur: point-virgule)
folder-cache: dossier racine du cache. vide=celui défini dans la configuration Joomla
file-mask = *.php: masque pour sélectionner les fichiers. *.* = tous, *.{php,html} = php et html
🆙 cell : affiche de 1 à 6 blocs enfants sur une même ligne
Cliquer pour lire la documentation
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-1.6 @license: GNU/GPLv3@tags: Body
corner: texte affiché dans le coin ou ruban
position, taille et style du corner
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
shadow: 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
style: styles CSS (non proposés ci-dessus) pour le coin
class: idem style
si le corner est clicable
url: lien
target = _blank: ou _self pour ouvrir le site dans le même onglet
style du bloc si le shortcode a un contenu
bloc-class: classe(s) pour bloc
bloc-style: style inline pour bloc
style et options secondaire
id: identifiant
css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
filter: chaine de conditions. Voir documentation filter
🆙 countdown : affiche un compte à rebours ou une horloge digitale
Cliquer pour lire la documentation
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 +
model: CSS de base pour la présentation (digital, rainbow)
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é
Textes ajoutés au compteur
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é
style des chiffres
digit-class: classe(s) pour les chiffres
zero: ajoute un zéro devant les heures, minutes et secondes
style et options secondaires
id: identifiant
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: condition d'éxécution
🆙 counter : Ajoute un compteur avec prefix et suffix
width (l,largeur,w): largeur minimal (par défaut en pixels)
mono = 1: force la police en monospace
style et options secondaires
id: identifiant
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: conditions. Voir doc action filter (v1.8)
paramétres Javascript pour configuration du compteur
start: 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)
Cliquer pour lire la documentation
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}
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
Style des points de conduite
leaders: points de conduite
leaders-color: couleur points de conduite
style du bloc principal de la liste
class: classe(s) pour la balise UL
style: style inline pour la balise UL
bgcolor: couleur de fond. #FFF par defaut
style des lignes de la liste
col-style-*: style inline pour les nièmes balise SPAN
list-style: code hexadecimal et couleur du caractère (bb,red ou 26BD,#F00)
Style de l'entête
header: 0: pas de titre, 1: la première ligne du contenu sera le titre des colonnes
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
Style du pied de liste
footer: 0: pas de pied, 1: la dernière ligne du contenu sera le pied des colonnes
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
style et options secondaires
id: identifiant
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
Cliquer pour lire la documentation
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}
title-tag = h4: pour utiliser une autre balise pour les titres
title-tag-preserve: 1 pour conserver 'title-tag' au lieu de div
title-class: classe et/ou style inline pour le titre (onglet)
title-style: classe et/ou style inline pour le titre
Définition des panneaux
content-class: classe et/ou style inline pour le contenu
content-style: classe et/ou style inline pour le contenu
style et options secondaires
id: identifiant
css-head (base-css): style ajouté dans le HEAD
Divers
filter: conditions. Voir doc action filter
🆙 field : Retourne la valeur d'un custom field pour le contenu courant
Cliquer pour lire la documentation
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: balise pour bloc principal
style et options secondaires
id: identifiant
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
Cliquer pour lire la documentation
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}
password: mot de passe pour télécharger le fichier
template (item-template) = ##icon## ##filename-link## (##size## - ##date##) [small]##hit## ##lastdownload##[/small] [br]##info##: modèle de mise en page. keywords + bbcode
Définition du type de liste
main-tag (block) = ul: balise pour la liste des fichiers
main-style: style pour la liste des fichiers
main-class = list-none: classes pour la liste des fichiers
Définition d'une ligne pour un fichier
item-tag = li: balise pour un bloc fichier
item-style: style pour un bloc fichier
item-class: classes pour un bloc fichier
link-style: style pour le lien (classes admises)
icon = 32: chemin et nom de l'icône devant le lien ou taille de l'icône selon extension du fichier (16 ou 32)
format pour les mots-clés
format-date = lang[en=m/d/Y H:i;fr=d/m/Y H:i]: 'd/m/Y H:i' format pour la date
model-hit = téléchargé %s fois: présentation pour ##hit##
model-lastdownload = dernier téléchargement le %s: présentation pour ##lastdownload##
model-info = %s: présentation pour ##info##
style et options secondaires
id: identifiant
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: condition pour exécuter l'action
🆙 file_explorer : Explorer un dossier et ses sous-dossiers avec prévisualisation et téléchargement.
Cliquer pour lire la documentation
syntaxe {up file-explorer=folder_relative_path_on_server} ##file## : chemin/nom.extension - pour copier/coller comme argument shortcode ##dirname## : chemin (sans slash final) ##basename## : nom et extension ##filename## : nom sans extension (sans le point) ##extension## : extension ##relpath## : chemin relatif au chemin passé comme principal argument ##size## : taille du fichier ##date## : date dernière modification ##icon## : icone ou vignette du fichier ##download## : bouton pour télécharger ##view-btn## : bouton pour voir le fichier dans une fenêtre modale ##view## & ##/view## : balise a (ouvrante et fermante) avec attributs pour voir le fichier dans une fenêtre modale Motclé disponible pour le dossier en format liste (ul/li) ##foldername## : nom du dossier (sans l'arboresccence) ##folderpath## : chemin et nom du dossier (avec l'arboresccence)
file_explorer: chemin relatif du dossier sur le serveur
mask: masque de sélection des fichiers
file-exclude: fichiers non listés. (separateur=virgule)
folder-recursive: niveaux d'exploration des sous-dossiers
view-root: si main-tag=ul, affiche t'on la racine
view-unknow-ext: 1: affiche tous les fichiers, 0: seules les extensions connues
type de contenu des fichiers. +ext1,ext2 : pour ajouter
ext-none: liste des extensions sans préview, ni téléchargement
ext-download-only: fichiers non visualisables, téléchargement uniquement. défaut: zip,rar
ext-image: les fichiers images. défaut: jpg,png,webp,gif
ext-pdf: les fichiers pdf. défaut: pdf
ext-office: les fichiers bureautiques. défaut: doc,docx,odt,xls,xlsx,ods,pps,ppsx,pptx
ext-audio: les fichiers audios. défaut: mp3,ogg
ext-video: les fichiers vidéos. défaut: mp4,ogv
ext-ajax: fichiers gérés en ajax. défaut: txt,csv,html,url
ext-iframe: fichiers gérés comme iframe. défaut : aucun
Modèle de mise en forme
template (item-template) = ##icon## ##basename## ##view-btn## ##download##: modèle de mise en forme du résultat
template-folder = [b]##foldername##[/b]: modèle de mise en forme pour les dossier en vue liste
Balises pour les blocs parents et enfants
main-tag (block) = ul: balise principale. indispensable pour utiliser id, class et style
item-tag = li: balise pour un fichier ou dossier. DIV si main-tag différent de UL
Format des éléments mot-clé
date-format = %Y/%m/%d %H:%M: format de la date
size-decimal: nombre de décimales pour la taille du fichier
icon-thumbnail = 1: pour les images, on affiche une vignette
icon-size = 32: 16, 32 ou 48: taille de l'icone ou vignette
icon-path: le chemin vers vos fichiers icônes. ce dossier doit contenir 3 sous-dossiers 16,32 et 48
configuration bouton télécharger
download-label = 📥: texte ou bbcode pour le bouton télécharger
download-style: classes et/ou styles du bouton pour télécharger
configuration bouton voir
view-label = 👁: texte du bouton pour voir le fichier
view-style: classes et/ou styles du bouton ou du lien pour voir le fichier
Styles CSS
js-params: règles JS définies par le webmaster
class: classe(s) pour bloc
style: style inline pour bloc
css-head (base-css): style ajouté dans le HEAD de la page
id: Identifiant
🆙 file_in_content : Utilise tous les fichiers d'un dossier pour construire un article
Cliquer pour lire la documentation
syntaxe {up file-in-content=fichier ou dossier} Mots-clés ##title## : le nom du fichier txt ##content## : le contenu du fichier txt ##image## : fichier image de même nom que le fichier texte ##date## : la date du fichier
main-tag (block) = div: balise principale. 0 pour aucune
class: classe(s) pour bloc
style: style inline pour bloc
Mise en forme du fichier
HTML: 0= aucun traitement, 1=affiche le code, ou liste des tags à garder (ex: img,a)
EOL: forcer un retour à la ligne
style et options secondaires
id: identifiant
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
Cliquer pour lire la documentation
Reprise du plugin LM-Filter de Lomart SYNTAXE 1 (condition comme option): {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) SYNTAXE 2 (condition comme argument principal): {up filter=datemax:20171225} contenu si vrai {====} contenu si faux {/up filter} SYNTAXE 3 (mono-shortcode): {up filter | guest=0 | return-true=REGISTER | return-false=GUEST} --> guest=0 est vrai si un utilisateur est connecté --> la valeur retournée est saisie comme option SYNTAXE 4 (multi-conditions et négation): {up filter=!day:1,7 ; hperiod:0900-1200,1500-1900 | return-true=OUVERT | return-false=FERME} --> vrai si pas lundi ou dimanche et entre 9-12h ou 15-19h
filter: condition sous la forme cond1:val1,val2 ; cond2:val1,val2
Les conditions
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
equal: vrai si op1 = op2 no case sensitive
smaller: vrai si op1 > op2 no case sensitive
bigger: vrai si op1 < op2 no case sensitive
retour pour version mono-shortcode
return-true = 1: valeur retournée si vrai et pas de contenu
return-false: valeur retournée si faux et pas de contenu
Divers
info: affiche les valeurs actuelles des arguments pour les conditions
id: identifiant
🆙 flexauto : une grille responsive sur plusieurs colonnes
Cliquer pour lire la documentation
syntaxe 1 : {up flexauto=x_ordi | tablet=x_tablet | mobile=x_mobile }contenu{/up flexauto} syntaxe 2 : {up flexauto=x_ordi-x_tablet-x_mobile }contenu{/up flexauto} x=1 à 12 est le nombre de colonnes sur grand écran et tablette. 4 sur mobile.
flexauto = 3: nombre de colonnes sur grand écran ou ordi-tablet-mobile
tablet = 2: nombre de colonnes sur moyen écran
mobile = 1: nombre de colonnes sur petit écran
Style bloc principal
id: identifiant
class: class ou style pour le bloc principal
style: class ou style pour le bloc principal
Style des blocs secondaires
bloc-tag = 1: uniquement si {===} 0=pas de bloc
class-*: class pour tous les blocs colonnes. sinon voir class-1 à class-12
style-*: style inline pour tous les blocs colonnes. sinon voir style-1 à style-12
bloc-style: style inline UNIQUEMENT ajoutés au bloc enfant
Style ajouté dans le head de la page
css-head (base-css): style ajouté dans le HEAD de la page
🆙 flexbox : affiche des blocs enfants dans une grille FLEXBOX responsive
Cliquer pour lire la documentation
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
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
Style bloc principal
id: identifiant du bloc principal
class: class ou style pour le bloc principal
style: class ou style pour le bloc principal
Style des blocs secondaires
bloc-tag = 1: ajoute un bloc DIV autour des contenus enyre {===}
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 UNIQUEMENT ajoutés au bloc enfant
Style ajouté dans le head de la page
css-head (base-css): style ajouté dans le HEAD de la page
🆙 folder_list : retourne la liste mise en forme du contenu d'un dossier sur le serveur
Cliquer pour lire la documentation
syntaxe {up folder_list=folder_relative_path_on_server | template=##file## (##size)}0 ##file## : chemin/nom.extension - pour copier/coller comme argument shortcode ##dirname## : chemin (sans slash final) ##basename## : nom et extension ##filename## : nom sans extension (sans le point) ##extension## : extension ##relpath## : chemin relatif au chemin passé comme principal argument ##size## : taille du fichier ##date## : date dernière modification Motclé disponible pour le dossier en format liste (ul/li) ##foldername## : nom du dossier (sans l'arboresccence) ##folderpath## : chemin et nom du dossier (avec l'arboresccence)
🆙 icon : uniformise l'appel des icônes. Evite de passer en mode code pour la saisie
Cliquer pour lire la documentation
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
src: nom icône, code unicode, chemin image (indispensable si prefset)
size: taille icône ou coté du carré dans lequel est inscrit l'image. px, rem, em, % (px par defaut). Responsive= basesize, breakpoint1:size1, breakpointN:sizeN
color: couleur
color-hover: couleur lors survol icône (sauf image et unicode coloré)
Pour ajouter l'icône à un bloc sur la page
selector: selecteur CSS pour identifier le bloc ciblé
Divers
info: 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
title (titre): texte affiché au survol de l'icone
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)
Style CSS
style: style inline
class: classe
id: identificateur
🆙 iframe : introduire un iFrame responsive dans un article
Cliquer pour lire la documentation
syntaxe {up iframe=URL}
@author: LOMART @version: UP-1.9.5 @license: GNU/GPLv3@credit: https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin/ @tags: HTML
iframe: URL site distant
preview: image affichée avant chargement de l'iframe
paramétre de l'iframe
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)
Style CSS
id: identifiant
class: classe(s) pour bloc externe
style: style inline pour bloc externe
css-head (base-css): style ajouté dans le HEAD de la page
Interne, conservé pour compatibilité
iframe-class: classe(s) pour bloc
iframe-style: style inline pour bloc
🆙 image_compare : comparaison de 2 images par déplacement d'un volet
🆙 image_gallery : Affiche une ou plusieurs images dans une lightbox
Cliquer pour lire la documentation
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}
language: liste motclé (bylineLabel,loadButtonLabel,loadingLabel) + traduction. Exemple:bylineLabel:lang[en=by %s;fr:par %s], loadingLabel:Loading...
options: liste des options supplémentaires . ex: showZoomCtrl:true,compass:true - Attention au min/maj. voir cette page
Style CSS
id: id genérée automatiquement par UP
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)
paramètres Javascript pour configuration
panorama: chemin image (il est rempli automatiquement avec l'argument principal du shortcode)
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: chargement auto de l'image
autoRotate: 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: 1 pour afficher les coordonnées hotspot dans la console
🆙 image_random : Affiche aléatoirement une des images d'un dossier
Cliquer pour lire la documentation
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}
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: pourcentage qualité en JPG
reset: force la génération des images strip
delete-source: supprime l'image source après génération des strips
Style CSS
id: identifiant
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
Cliquer pour lire la documentation
syntaxe {up imagemap=chemin_image} < area target="" alt="" title="" href="/" coords="" shape="">; OU pour prévenir l'effacement par editeur (remplacer les <> par []) [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
jcat_image: dossier/chemin/url vers une image si la catégorie n'en possède pas
Style CSS
id: identifiant
class: classe(s) pour bloc
style: style inline pour bloc
css-head (base-css): style ajouté dans le HEAD de la page
🆙 jcategories_by_tags : liste des catégories d'un mot-clé (tag)
Cliquer pour lire la documentation
syntaxe : {up jcategories-by-tags=id-ou-nom-tag} MOTS-CLES : ##title## ##title-link## ##subtitle## ##link## ##intro## ##content## : la description de la catégorie en HTML ##intro-text## ##intro-text,100## : la description de la catégorie en TEXT ##image## ##image-link## ##image-src## ##image-alt## ##date-crea## ##date-modif## ##new## ##count## ##hits## ##tags-list##
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
Modèles de présentation
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]: présentation pour ##note##
Balise et style du bloc principal
main-tag (block) = ul: balise pour bloc parent
style: classes et styles
id: identifiant
Balise pour les lignes
item-tag = li: balise pour blocs enfants (lignes)
Style CSS
css-head (base-css): style ajouté dans le HEAD de la page
🆙 jcontent_by_categories (jnews) : liste des articles d'une catégorie
Cliquer pour lire la documentation
syntaxe 1 : {up jcontent-by-categories=id-catégorie(s) | template=##title-link##} syntaxe 2 : {up jcontent-by-categories=id-catégorie(s)}##title-link##{/up jcontent-by-categories} 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## ##maintitle## ##link## ##id## ##intro## ##intro-text## ##intro-text,100## ##content## ##image## ##image-src## ##image-alt## ##date-crea## ##date-modif## ##date-publish## ##author## ##note## ##cat## ##cat-link## ##new## ##featured## ##hits## ##tags-list## ##CF_id_or_name## : valeur brute du custom field ##upnb## : nbre actions UP dans la page - ##uplist## : nbre par actions
no-content-html = Pas de nouvelles, bonnes nouvelles ...[br]No news, good news ...: texte si aucune correspondance. 0=aucun texte
Modèles de présentation
template (item-template): modèle de mise en page. Si vide le modèle est le contenu
Balise et style pour le bloc principal
main-tag (block) = 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)
Balise et style pour un article
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)
Paramètre pour l'image
image-src: lorempixel.com/300/300', // image par défaut
image-alt = news: image, texte alternatif par défaut
Format pour les mots-clés
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
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
Style CSS
id: identifiant
css-head (base-css): code CSS dans le head
🆙 jcontent_by_subcat : Les articles par categories et sous-categories
Cliquer pour lire la documentation
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## ##upnb## : nbre actions UP dans la page - ##uplist## : nbre par actions ##CF_id_or_name## : valeur brute du custom field 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
template (item-template) = ##content##: modèle de mise en page. Si vide le modèle est le contenu. BBCode accepté
balise & style du bloc principal
tag = _div: balise pour le bloc d'un article. _div = div si class ou style, sinon rien. = 0=jamais
id: identifiant
style: classes et styles inline pour un article
class: classe(s) pour un article (obsoléte)
Format pour les mots-clés
date-format = %e %B %Y: format pour les dates
date-locale: localisation pour les dates. Par défaut, celle du navigateur client.
featured-html = [b class="t-gris"]★[/b], [b class="t-jauneFonce"]★[/b]: présentation mise en vedette
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.
Style CSS
css-head (base-css): code CSS dans le head
🆙 jcontent_list (article_category) : liste des articles d'une catégorie
Cliquer pour lire la documentation
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}
listup: style des puces (séparateur point-virgule) par niveaux (markers) (séparateur virgule)
Valeurs par défaut
ul-default = square;t-c1: type liste par défaut
ol-default = decimal;t-c1: type liste numérotée par défaut
Style CSS
id: identifiant
class: classe(s) pour bloc principal
style: class ou style inline pour bloc principal
style-*: class ou style pour les niveaux des puces
css-head (base-css): style ajouté dans le HEAD de la page
Divers
start: indice pour début liste numérotée
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
🆙 lorem : Affiche du texte aléatoire (enrichissement possible)
Cliquer pour lire la documentation
. 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é.
lorem: nombre de paragraphe et mots-clés séparés par des virgules
Divers
max-char: nombre maxima de caractères
max-word: nombre maxima de mots
Style CSS
tag = div: (v1.6) tag du bloc contenant le texte en retour ou tag=0 pour aucun.
id: pour forcer l'id (sans effet, si tag=0)
class: classe(s) pour bloc (sans effet, si tag=0)
style: style inline pour bloc (sans effet, si tag=0)
🆙 lorem_flickr (lorempixel,lorem_placeimg) : affiche une image aleatoire
Cliquer pour lire la documentation
Syntax 1 : {up loremflickr=type | width=xx | height=xx} . 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% Le site //lorempixel.com étant fermé, l'action utilise le site //loremflickr.com on peut appeler l'action par loremflickr ou lorempixel
orientation: H ou V pour utiliser des photos horizontale ou verticale avant recadrage
color = g: NON DISPONIBLE (g (gris), p (pixellisé), red, green, ou blue)
number = 1: nombre d'images retournées
cache-delai = - 1: durée de validité du cache. 0:aucun, 1:une heure, -1:illimité
cache-reset: efface TOUS les fichiers dans le cache
Methode pour retour
mode = img: balise img ou dir pour le chemin vers le dossier
Bloc parent
main-tag (block) = div: balise du bloc parent à l'image si options main-class ou align
main-class: classe(s)
align: alignement horizontal : left, center, right
Style CSS
id: identifiant
class: classes et styles image(s) en mode=img
style: classes et styles image(s) en mode=img
🆙 lorem_place : Affiche une image aux dimensions indiquées
Cliquer pour lire la documentation
Affiche une image aux dimensions indiquées avec ou sans texte personnalisé. La couleur du fond et du texte peut être spécifiée par son code hexadecimal ou son nom syntaxe {up lorem-place=250x150 | text=... | bg-color=gold | text-color=333}
gravity: recadrage : north, east, south, west, center
Style CSS
id: identifiant
class: classe(s) (obsolète)
style: classes et styles
🆙 lorempixel : affiche une image aleatoire
Cliquer pour lire la documentation
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%
model = base: style CSS dans .upmq-*style*. 0=aucun
height (h,hauteur) = 100px: hauteur defaut pour scroll vetical
Style CSS
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: 1 = label sur une ligne
Divers
id: identifiant
filter: conditions. Voir doc action filter (v1.8)
Paramètres Javascript pour configuration
direction = left: right, up, down
loop = - 1: nombre d'affichage, -1 : infini
scrolldelay: 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: scroll uniquement lors survol
🆙 masonry : Affiche des blocs dans une grille fluide et responsive
Cliquer pour lire la documentation
syntaxe {up masonry=breakpoint:nbCols*margeX*margeY} bloc-1 bloc-2 bloc-n {/up masonry} l'argument principal est la liste du nombre de colonnes et des marges par breakpoint. Exemple : {up masonry=960:4,1200:5} 4 colonnes au-dessus de 960px, 5 si 1200px {up masonry=960:4*10, 1200:5*10*20} idem plus marges XY de 10px pour 960 et marge X de 10px et Y de 20px pour 12000
masonry = 480:2,720:3,960:4,1200:5: colonnes et marges par breakpoint : bp:col*x*y. ex: 960:2*10*10,480:1
margin: marge en pixels. x*y pour des marges différentes en horizontal et vertical
Options annexes
preserve-order: 1: l'ordre des blocs est préservé. 0=priorité à l'égalité de la hauteur des colonnes
wait-images: 1: charge toutes les images avant le calcul. 0: calcul à chaque chargement d'image.
breakpoints-container: 0: breakpoints définis sur la largeur du navigateur. 1: largeur du bloc parent
mise en forme CSS
id: id genérée automatiquement par UP
class: classe(s) ajoutées au bloc principal
style: style inline ajouté au bloc principal
css-head (base-css): style ajouté dans le HEAD de la page
🆙 media_audio : affiche un lecteur (HTML5) pour un ou des fichiers audio hébergé sur le serveur
Cliquer pour lire la documentation
il suffit d'indiquer le chemin et le nom du fichier (avec ou sans extension) pour utiliser toutes les fichiers audio de ce nom dans le dossier. Si le nom du fichier n'est pas indiqué ou contient des jokers, tous les fichiers audios correspondants seront retournés Supporte les formats audio : mp3,ogg Si une image (jpg,png,webp,gif) existe, elle sera utilisé comme preview (poster) syntaxe {up media-audio=chemin_vers_audios} Mot-clés pour le template : ##player##, ##title##, ##image##, ##info##, ##download##
@version: UP-5.1 @license: GNU/GPLv3@author: lomart @tags: media
media_audio: chemin et nom du fichier vidéo ou dossier. caractères joker autorisés
configuration du lecteur vidéo
autoplay: lancement automatique du 1er fichier audio
muted: coupe le son
loop: joue le fichier audio en boucle
controls = 1: affiche les boutons de commande
preload = auto: mode de chargement du fichier audio : none, metadata, auto.
Mise en forme résultat
template (item-template) = ##title## ##player##: modèle de mise en forme d'un item
main-tag (block): balise pour le bmoc principal
main-style: classe(s) et style pour le bloc principal
item-tag = div: balise pour un fichier. forcé à DIV si vide
item-style: classe(s) et style pour les blocs des différents morceaux
player-style: classe(s) et style pour le lecteur audio
title-style: classe(s) et style pour la légende
title-tag = div: balise pour le titre du morceau
image-default: image utilisée par défaut pour tous les fichiers
image-types = jpg,jpeg,png,gif,webp: liste extension des fichiers images acceptés
image-style: classe(s) et style pour la légende
info-style: classe(s) et style pour les infos
download-tag = a: balise pour bouton download. forcé à DIV si vide
download-text = lang[en=Download;fr=Télécharger]: texte pour bouton téléchager
download-style: classe(s) et style pour la légende. ex: btn btn-primary
Types des fichiers audio acceptés
types = ogg:ogg;mp3:mpeg;MP3:mpeg: liste extension fichier et type mime. défaut: ogg:ogg;mp3:mpeg;MP3:mpeg
codecs: liste type et codec supportés. ex: ogg:opus,vorbis
Messages si erreur
no-audio = lang[en=no audio;fr=aucun fichier audio]: message si audio non trouvée
no-support = lang[en=Your web browser does not support HTML5 audio;fr=Votre navigateur Web ne prend pas en charge l\'audio HTML5: message si type audio non supporté
styles
id = identifiant instance:
css-head (base-css): style ajouté dans le HEAD de la page
🆙 media_plyr (vimeo,audio,video) : affiche un lecteur video ou audio qui s'inscrit au maxima dans son bloc parent
Cliquer pour lire la documentation
{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 (obligatoire) 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 @license: GNU/GPLv3@tags: Media
media_plyr (vimeo,audio,video): type de lecture : youtube, vimeo, video ou audio
code: code de la video (à la fin de l'url youtube ou vimeo)
poster: URL de l'image (obligatoire)
mp4: URL du fichier MP4. Si vide, on utilise le nom de poster
webm: URL du fichier WEBM. Si vide, on utilise le nom de poster
vtt: URL du fichier VTT pour sous-titrage. Si vide, on utilise le nom de poster
download: URL du fichier téléchargeable. Si vide, on utilise le nom du fichier MP4
mp3: URL du fichier audio mp3. (obligatoire)
ogg: URL du fichier audio ogg. Si vide, on utilise le nom du fichier MP3
Style CSS
id: identifiant
class: classe(s) ajoutée(s) au bloc extérieur
style: style inline ajouté au bloc extérieur
🆙 media_video : affiche une vidéo locale en HTML5
Cliquer pour lire la documentation
il suffit d'indiquer le chemin et le nom du fichier (avec ou sans extension) pour utiliser toutes les vidéos de ce nom dans le dossier. Si le nom du fichier n'est pas indiqué ou contient des jokers, toutes les vidéos correspondantes seront retournées Supporte les formats video : mp4,webm,ogg Si une image (jpg,png,webp,gif) existe, elle sera utilisé comme preview (poster) syntaxe {up media-video=chemin_vers_videos}
@version: UP-3.1 @license: GNU/GPLv3@author: lomart @tags: media
media_video: chemin et nom du fichier vidéo. caractères joker autorisés
configuration du lecteur vidéo
autoplay: lancement automatique de la 1ere video
muted: coupe le son
loop: joue la vidéo en boucle
controls = 1: affiche les boutons de commande
preload = auto: none, metadata, auto.
legend: texte affiché au dessous des vidéo ou 1 pour le nom humanisé de chaque vidéo
legend-style: classe(s) et style pour la légende
Types des vidéos acceptées
types = mp4:mp4;webm:webm;ogv:ogg: liste extension fichier et type mime
codecs: liste type et codec supportés. ex: ogg:theora,vorbis; webm:vp8.0,vorbis
Messages si erreur
no-video = lang[en=no video;fr=aucune vidéo]: message si video non trouvée
no-support = lang[en=Your web browser does not support HTML5 video;fr=Votre navigateur Web ne prend pas en charge la vidéo HTML5: message si video non supportée
styles
id:
class: classe(s) pour bloc
style: style inline pour bloc
css-head (base-css): style ajouté dans le HEAD de la page
🆙 media_vimeo : affiche une video Viméo qui s'inscrit au maxima dans son bloc parent
Cliquer pour lire la documentation
{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 @license: GNU/GPLv3@tags: Media
media_vimeo: code de la video (à la fin de l'url vimeo)
width (l,largeur,w): largeur de la video en px ou %
autoplay: démarrage automatique
title (titre): afficher le titre de la vidéo
portrait: afficher l'image de profil de l'auteur (portrait)
loop: boucle en fin de video
muted: coupe le son
play-on-visible: démarre et arrête la video selon sa visibilité sur l'ecran
Style CSS
id: identifiant
class: classe pour bloc externe
style: code css libre pour bloc externe
Divers
rgpd = 1: 0 pour ne pas appliquer la règle pour le RGPD
🆙 media_youtube (youtube) : affiche une video Youtube qui s'inscrit au maxima dans son bloc parent
Cliquer pour lire la documentation
{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 @license: GNU/GPLv3@tags: Media
media_youtube (youtube): code de la video (à la fin de l'url youtube)
ratio = 16/9: homothétie de la vidéo sous la forme 16/9 ou 1.77
width (l,largeur,w): largeur de la video en px ou %
autoplay: demarrage automatique
loop: boucle sur la video
muted: coupe le son
play-on-visible: démarre et arrête la video selon sa visibilité sur l'ecran
Style CSS
id: Identifiant
class: classe pour bloc externe
style: code css libre pour bloc externe
Divers
rgpd = 1: 0 pour ne pas appliquer la règle pour le RGPD
🆙 meteo_concept : Retourne les prévisions météo pour à date donnée pout une ville FRANCAISE donnée
Cliquer pour lire la documentation
Basée sur l'API de Météo Concept permettant aux développeurs de site internet ou d'applications d'intégrer des données météorologiques de prévisions ou d'observations pour un lieu ou une station météo souhaitée. Pour commencer à l'utiliser l'API, il est nécessaire de s'inscrire sur le site internet de Météo Concept. La formule gratuite permet de faire jusqu'à 500 requêtes par jour. Cette inscription fourni une authentification et une autorisation grâce à une clé d'API, appelé communément « token ». syntaxe 1 {up meteo=Date ou dateheure de la prévision |insee=code |token=Token fourni par Météo Concept } syntaxe 2 {up meteo=Date ou dateheure de la prévision |insee=code |token=Token fourni par Météo Concept } modèle de texte avec mots-clés {/up meteo} trouver un code insee : https://www.insee.fr/fr/recherche/recherche-geographique ---- MOTS CLES ##insee## Code Insee de la commune ##cp## Code postal de la commune ##name## Nom de la commune ##latitude## Latitude décimale de la commune ##longitude## Longitude décimale de la commune ##altitude## Altitude de la commune en mètres ##dirwind10m## ou ##winddirs## Direction du vent ##gust10m## Rafales de vent à 10 mètres en km/h ##gustx## Rafale de vent potentielle sous orage ou grain en km/h ##probafog## Probabilité de brouillard entre 0 et 100% ##probafrost## Probabilité de gel entre 0 et 100% ##rainprob## ou ##probarain## Probabilité de pluie entre 0 et 100% ##probawind100## Probabilité de vent >70 km/h entre 0 et 100% ##probawind70## Probabilité de vent >100 km/h entre 0 et 100% ##rainmax## ou ##rr1## Cumul de pluie maximal sur la journée en mm ##rain## ou ##rr10## Cumul de pluie sur la journée en mm ##weather-text## Resenti météo sous forme de texte ##weather## Resenti météo index (nombre de 0 à 235) ##windspeed## ou ##wind10m## Vent moyen à 10 mètres en km/h ---- QUART DE JOURNEE UNIQUEMENT ##temp## ou ##temp2m## Température à 2 mètres en °C ---- JOURNEE ENTIERE UNIQUEMENT ##temp-max## ou ##tmax## Température maximale à 2 mètres en °C ##temp-min## ou ##tmin## Température minimale à 2 mètres en °C ##sun_hours## Ensoleillement en heures ##etp## Cumul d'évapotranspiration en mm
orientation = v: bloc horizontal (H) ou vertical (V)
block (bloc) = p: balise HTML autour du module météo
Style CSS
id: Identifiant
class: classe(s) pour bloc parent
style: style inline pour bloc parent
🆙 modal : Affiche du contenu dans une fenêtre modale (popup)
Cliquer pour lire la documentation
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 modal} 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
page_search = body: sélecteur CSS du bloc où rechercher. J3=.article-details OU J4=.com-content-article__body
Position de la zone de recherche
search-top = 80px: position verticale de la zone de recherche. positif: top, négatif: bottom
search-left = 80px: position horizontale de la zone de recherche. positif=left, négatif= right
Icone et texte de la zone de recherche
search-icon = loupe-64-red.png: image pour le bouton. Si le chemin n'est pas indiqué, l'image est dans le dossier de l'action.
search-text = lang[en=Search;fr=Rechercher]: texte indice dans la zone de recherche (Placeholder)
Mise en évidence du résultat
highlight-bg = yellow: couleur de surlignage des mots trouvés
Style CSS
id: id genérée automatiquement par UP
class: classe(s) ajoutées au bloc principal
style: style inline ajouté au bloc principal
css-head (base-css): style ajouté dans le HEAD de la page
🆙 pdf : Affiche un PDF dans le contenu ou génère un bouton pour l'afficher dans une fenêtre
Cliquer pour lire la documentation
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
pdf: chemin du fichier pdf ou masque si plusieurs (v311)
method (methode) = PDFJS: ou Google, Embed ... ou 0
maxi: nombre maxi de fichiers affichés. 0 sans limite
view = 1: 0 = masque le PDF
width (l,largeur,w) = 100%: largeur iframe
height (h,hauteur) = 500px: hauteur iframe
Gestion du lien pour télécharger le PDF
download = 1: 1 pour afficher lien téléchargement
download-name: nom du fichier téléchargé
download-text = en=Download %s;fr=Telecharger %s: texte pour lien
download-icon: image affichée devant le lien
download-class: class(s) pour bouton lien seul
download-style: style inline pour bouton lien seul
Gestion bouton pour afficher le PDF
btn (bouton): 1 pour afficher un bouton
btn-target = _blank: cible : _blank, _parent, popup ou _popup
btn-text = voir %s: texte pour bouton
btn-icon: image affichée devant le texte du bouton
btn-class = btn btn-primary: class(s) pour bouton lien seul
btn-style: style inline pour bouton lien seul
Divers
close-left: 1=croix de fermeture en haut à gauche. 0=haut-droite par défaut
flip: activer le mode flipbook uniquement si PDFJS
background: couleur fond perdu du PDF au format #rrggbb
zoom: zoom par défaut (100%)
pdfjs-model = web: ou mobile (non opérationnel)
Style CSS
id: identifiant
class: classe(s) pour bloc parent
style: style inline pour bloc parent
tag = div: balise pour bloc parent - v2.9
css-head (base-css): style ajouté dans le HEAD de la page
🆙 pdf_gallery : Affiche une liste des PDF contenus dans un dossier
Cliquer pour lire la documentation
syntaxe {up pdf-gallery=dossier} syntaxe {up pdf-gallery=dossier}template{/up pdf-gallery} Template pour définir le rendu ##name## : nom et extension du fichier sans le prefixe date ##full-name## : nom et extension du fichier avec le prefixe date ##human-name## : nom du fichier sans les tirets ##size## : taille du fichier ##date## : date du fichier ou prefixe date du nom de fichier ##info## : fichier .info de même nom que le PDF avec texte descriptif ##image## : fichier jpg ou png de même nom que le PDF ##image-view## : idem ##image## avec lien pour afficher PDF dans fenêtre modale ##btn-view## : lien pour afficher PDF dans fenêtre modale. Texte selon btn-view-text ##btn-download##, ##name-download## : lien pour télécharger le PDF. Texte selon btn-download-text ##preview## : vue du PDF avec la méthode jsviewer de l'action PDF. ATTENTION ##preview## charge tous les fichiers PDF lors de l'affichage de la page
css-head (base-css): style ajouté dans le HEAD de la page
filter: conditions. Voir doc action filter
paramètres Javascript pour la configuration du popover
width (l,largeur,w) = 250: largeur du popover en px
top (t) = false: true : popover au-dessus du trigger, sinon au-dessous
arrow = true: affichage de la fleche
offset: décalage entre trigger et popover
viewportSideMargin = 10: Espace à laisser sur le côté lorsqu'il est contre le bord de la fenêtre (pixels)
fadeInDuration = 65: Durée de l'animation de fondu enchaîné popover (ms)
fadeOutDuration = 65: Durée de l'animation de fondu sortant du popover (ms)
preventHide = true: Empêcher le masquage lors d'un clic dans le popover
onShow: fonction à exécuter lorsque le popover est affiché. c'est l'élément déclencheur et le premier argument passé à la fonction est l'élément popover (tous deux enveloppés dans jQuery).
onHide: Callback à exécuter lorsque le popover est masqué. Identique à onShow.
🆙 popup : Ouvre un popup après un délai ou une position dans la page
Cliquer pour lire la documentation
syntaxe {up popup=5s}contenu popup{/up popup} Ouvre le popup 5 secondes après le chargement de la page syntaxe {up popup=50%}contenu popup{/up popup} Ouvre le popup à la moitié de la page syntaxe {up popup=#bloc}contenu popup{/up popup} Ouvre le popup quand le haut du bloc #bloc est en haut de la zone visible du navigateur
@author: LOMART @version: UP-3.0 @license: GNU/GPLv3@tags: HTML
Mode et conditions d'exécution
popup = 5s: Délai en sec (15s), position dans la page (50%) ou sélecteur de bloc (#bloc)
scroll-offset = 3: x = tolérance avant-après pour le scroll. x1-x2 = avant et après
filter: condition pour exécuter l'action
cookie-duration: nombre de jours de conservation des cookies. 0 pour la session ou -1 pour ignorer
Position et style de la fenêtre surgissante
popup-position: position YX du popup : TL, TC, TR, CL, CC, CR, BL, BC, BR
popup-style: classe ou style pour la fenetre popup
Arrière-plan
overlay-lock = 1: 1: le popup bloque la navigation sur la page
overlay-style: classe ou style pour masquer/atténuer le contenu
Bouton fermeture popup
close-only-button = 1: 1: fermeture uniquement par le bouton, 0: en cliquant hors du popup
close-style: classe ou style pour la fenetre popup
close-label = ×: texte ou symbole pour le bouton. BBCode et action UP admis
Animation
animation-in: classe unique pour animation ouverture du popup
animation-out: classe unique pour animation fermeture du popup
animation-target = popup: popup ou overlay: cible de l'animation
Divers
id: id genérée automatiquement par UP. A préciser pour les cookies dans les modules
css-head (base-css): style ajouté dans le HEAD de la page
🆙 printer : Ajoute un bouton pour proposer l'impression d'une partie de la page
Cliquer pour lire la documentation
syntaxe {up printer=texte bouton} le contenu à imprimer {/up printer}
qrcode = text: type de QRCode : text/url/sms/email/phone/location/wifi/contact
Style du QRCode
size = 200: Largeur
margin: Espace autour de l'image QR
light: Code hexadécimal de la couleur de fond du QRcode. ex: FFFFFF = blanc
dark: Code couleur hexadécimal du QRcode. ex: 000000 = noir
centerImageUrl: URL absolue vers image au centre du qrcode
centerImageSizeRatio: ratio image / qrcode
centerImageWidth: Largeur de l'image centrale en pixels
centerImageHeight: Hauteur de l'image centrale en pixels
Les types de contenus
name: nom pour contact
text: texte libre pour text, sms, email, contact
phone: numéro de téléphone pour sms, tel, contact
url: site Internet pour url, contact
email: adresse email pour email, contact
subject: sujet pour email
latitude: pour geo
longitude: pour geo
address: adresse pour contact
ssid: identifiant point d'accés pour wifi
auth = WPA: WPA ou WEP pour wifi
password: clé wifi du point d'accés pour wifi
Divers
alt: texte alternatif, si le qrcode n'est pas affiché
encoding = UTF-8: code pour texte OBSOLETE
Style CSS
id: identifiant
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)
🆙 random : sélectionne une ou plusieurs valeurs dans une liste ou un dossier
Cliquer pour lire la documentation
syntaxe {up random=1;2;3} -> une des 3 valeurs au hasard {up random=1;2;3 | maxi=2 | sep-out=;} -> deux des 3 valeurs au hasard séparées par un point virgule {up random=1,2,3 | sep-in=,} -> une des 3 valeurs séparées par une virgule au hasard {up random=dossier/*.{jpg,ˆpng}} -> un des fichiers jpg ou png dans le dossier {up random=dossier/fichier.csv} -> une des valeurs dans le fichier csv {up random}val1{===}val2{===}val3{===}valN{/up random} -> une des valeurs au hasard
replace: liste des remplacements sous la forme ancien:nouveau, ... BBcode admis
sep-item: séparateur entre les groupes ancien:nouveau. virgule par défaut
sep-oldnew = :: séparateur entre les parties recherche et remplace. 2 points par défaut
tags: vide: conserve les balises autorisées par défaut, liste (a,b,p) ou en plus des balises par défaut (+a,b,p)
regex: 1 si la partie recherche est une expression régulière
🆙 sameheight : égalise la hauteur des enfants directs du bloc (p ou div)
Cliquer pour lire la documentation
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 @license: GNU/GPLv3@credit: un vieux script de mes archives @tags: HTML
sameheight: inutilisé
id:
class: classe(s) pour bloc principal
style: style pour bloc principal
css-head (base-css): code css libre dans le head. attention: ] au lieu de }
🆙 scroll_indicator : Affiche la position dans la page dans un cercle autour du curseur
scroller: nombre d'élément ou hauteur du bloc en px
Style CSS
id: Identifiant
class: classe(s) pour la balise principale
style: style inline pour la balise principale
css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
paramètres Javascript pour configuration
newsPerPage = 4: nombre de blocs par page. Idem option principale
navigation = true: affiche la navigation haut/bas
autoplay = true: active la lecture automatique
direction = up: sens de défilement (up/down)
animationSpeed = normal: normal, slow ou fast
newsTickerInterval = 4000: autoplay interval en ms
pauseOnHover = true: arrêt défilement lors survol souris
🆙 site_stat : comptabilise le nombre d'appel de cette action et affiche le nombre de visite
Cliquer pour lire la documentation
syntaxe : {up site-stats} : incrémente le fichier dir-logs/id-alias_article.log {up site-stats=*} : Calcule et affiche les stats pour TOUS les fichiers {up site-stats=0} : Calcule et affiche les stats pour l'article courant {up site-stats=12} : Calcule et affiche les stats pour l'article d'ID=12 {up site-stats=mask} : affiche les stats des fichiers correspondant au mask L'affichage est réalisé à l'aide de templates et de mots clés : --- tmpl-lign : résultat pour un fichier log (un article) ##count## : nombre total de visites uniques pour un article ##id##, ##alias##, ##title##, ##created##, ##updated## : données de l'article ##catid##, ##catalias## : id et alias de la catégorie de l'article ##detail## : affiche le détail des visites par année, mois, langue --- tmpl-detail-period : modèle pour une période de ##detail## Les mots clés pour les sous-templates de ##detail## Détail par articles : ##PERIOD##, ##TOTAL##, ##LANG## Motif répété pour ##LANG## : ##LANG##, ##COUNT## Détail par nombre de pges vues par un visteur : ##PERIOD##, ##TOTAL##, ##PAGES-VISITORS## Motif répété pour ##PAGES-VISITORS## : ##NBPAGES##, ##NBVISITORS## :
site_stat: vide : enregistre l'accès, sinon masque= *:tous, 1:courant, ID article ou masque fichiers (id-alias)
catid-include: liste des id catégories à inclure, séparateur virgule
catid-exclude: liste des id catégories à exclure, séparateur virgule
usergroup-list: liste des groupes d'utilisateurs à exclure, séparateur virgule
ip-list = 127.0.0.8, localhost: liste des IP à ignorer. les botnets sont ignorés, séparateur virgule
bots-list = bot,spider,crawler,libwww,search,archive,slurp,teoma,facebook,twitter: liste de bots exclus
Options pour affichage résultats
view-catid-include: liste des catégories prise en compte
detail-max-month: Nombre de mois affichés. 0: tous
tmpl-lign = ##ALIAS## ##CATALIAS## ##DETAIL##: modele d'affichage pour un article ou total
tmpl-detail-period = [b class="t-blue bg-grisClair ph1"]##PERIOD##[/b] ([b]##TOTAL##[/b] - ##LANG##): template pour une période
tmpl-detail-period-lang = [i]##LANG##[/i]:[b]##COUNT##[/b]: Sous-template pour un langage
tmpl-total-detail-period = [b class="t-blanc bg-brun ph1"]##PERIOD##[/b] ([b]##TOTAL##[/b] - ##PAGES-VISITORS##): template pour le nombre de pages vues par les visiteurs
tmpl-total-detail-PV = [i]##NBPAGES##p[/i]:##COUNT##: Sous-template groupe de nombres de pages par visiteurs
date-format = lang[en=%B %se, %Y; fr=%e %B %Y]: format pour la date
no-content-html = lang[en=No statistical data; fr=Aucune donnée statistique]: message affiché si aucun résultat pour la sélection
Paramètres consolidation pour prefs.ini
keep-days = 3: nombre de jours non compactés en mois. Aujourd'hui non inclus. Ces jours ne sont pas comptabilisé dans leur mois
keep-months = 12: nombre minimum de mois non compactés en années. (0=année courante, 12=année courante et précédente)
delay-unique = 300: delai (en secondes) entre 2 visites d'une page par une IP pour la considerer comme unique
bots-nbpages = 200: nb pages/jour pour suspision de robots
Classe(s) et style(s) pour la ligne total
total-style = bg-grisClair: style pour la dernière ligne
Gestion style d'une ligne
item-tag: balise pour les lignes de la liste
item-class: classe pour les lignes de la liste
item-style: style pour les lignes de la liste
Gestion style du bloc principal
main-tag (block): balise pour la liste
id: identifiant
class: classe(s) pour bloc
style: style inline pour bloc
css-head (base-css): style ajouté dans le HEAD de la page
Pour webmaster - à ajouter dans le fichier prefs.ini
dir-logs = up/site-stat: dossier pour logs
🆙 site_visit : comptabilise le nombre d'appel de cette action et affiche le nombre de visite
Cliquer pour lire la documentation
syntaxe : {up site-visit} : incrémente le fichier log-path/alias_article.stat {up site-visit=nom} : incrémente le fichier log-path/nom.stat {up site-visit | info} : liste le contenu de tous les fichiers .stat dans log-path {up site-visit | info=xxx} : liste le contenu de tous les fichiers action-xxx.stat dans log-path Les données sauvées dans xxx.stat sont ##alias## : le nom du fichier, puis dans l'ordre : ##counter## : le cumul des visites ##lastdate## : la date dernère consultation ##id##, ##alias##, ##title##, ##created##, ##updated## : données de l'article ##catid##, ##catalias## : id et alias de la catégorie de l'article ##detail## : affiche le détail des visites par année, mois, langue
max-height = 1: égalise la hauteur de tous les blocs
Style CSS
id: id genérée automatiquement par UP
class: classe(s) ajoutées au bloc principal
style: style inline ajouté au bloc principal
css-head (base-css): style ajouté dans le HEAD de la page
JS : autoplay
autoPlay: 0 ou durée affichage image en millisecondes
slideSpeed = 200: vitesse de transition en millisecondes
JS : pagination
paginationSpeed: durée changement en millisecondes
pagination = true: affiche pagination
paginationNumbers: affiche numéros à l'intérieur des boutons de pagination
JS : navigation
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"
JS : nombre d'images selon largeur écran
responsive = true: adaptation sur petits ecrans
items: 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
🆙 slider_tiny : bandeau défilant d'images ou de blocs HTML
navType = list: "controls", "list", "both" or "none"
styleNav = 1: applies default styles to nav
includeFooter = 1: afficher/masquer le pied de page (légende et navigation)
autosize = 1: hauteur diaporama fixe. calcul sur 1ère image
resize: tente de détecter automatiquement la taille de chaque diapositive
stretch = 1: étire les images pour remplir le conteneur
🆙 snippet : créer et charger des petits fichiers texte (snippet)
Cliquer pour lire la documentation
Syntaxe : {up snippet=foo} // charge un fichier up/snippet/foo.html {up snippet=foo}texte{/up snippet} // écrit le texte dans le fichier up/snippet/foo.snippet {up snippet} // affiche la liste de tous les fichiers du dossier up/snippet/ {up snippet=* | delete} // supprime tous les snippets
variable-*: remplace ##variable-X## dans les options ci-dessus
informations sur la base de données
dbinfos: vide= la liste des tables OU nom_table = la liste des colonnes
no-prefix-auto: utiliser le nom de la table sans ajouter le prefix #__
mise en forme du résultat
presentation = table: présentation du résultat : list,table,div ou 0
template (item-template): modèle mise en page
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)
no-content-html = aucun résultat: essage si echec requete
Style CSS pour afficher le résultat
id: identifiant
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
🆙 tab : affiche du contenu dans des panneaux avec onglets en haut, à gauche ou à droite.
Cliquer pour lire la documentation
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 @license: GNU/GPLv3@credit: Script de bhaveshcmedhekar@tags: layout-dynamic
tab = tab: tab ou accordion
auto: 0 ou delai en millisecondes pour changement automatique d'onglet
Style des titres (onglets)
title-tag = h4: balise utilisée pour les titres onglets
title-style: classe(s) et style inline onglets
title-class: classe(s) onglets (obsolète)
Style des panneaux de contenu
content-style: classe(s) et style inline contenu
content-class: classe(s) contenu (obsolète)
espace-vertical = 1: 0, 1 ou 2 : niveau des éléments à répartir
Style du bloc principal
id: identifiant
style: classe(s) et style(s) bloc principal
class: classe(s) bloc principal (obsolète)
css-head (base-css): règles CSS mises dans le head
paramètres Javascript pour configuration
side: left ou right
active_tab: 1 a N
plugin_type: accordion (interne, ne pas modifier)
content_display = block: interne, ne pas modifier, défini par espace-vertical
🆙 table_by_columns (table_par_colonnes) : tables responsives par empilement des lignes d'une colonne.
Cliquer pour lire la documentation
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 @license: GNU/GPLv3@credit: John Polacek@tags: Responsive
table_by_columns (table_par_colonnes): rien
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
breakpoint = 720px: bascule en vue responsive
key-width = 35%: largeur de la première colonne en vue responsive
title-style: style pour la ligne titre en vue responsive
Style CSS
id: Identifiant
style: style inline pour balise table
class: classe(s) pour balise table (obsolète)
css-head (base-css): permet d'ajouter des style à la table incluse
🆙 table_by_rows (table_par_lignes) : tables responsives par empilement des colonnes par lignes.
Cliquer pour lire la documentation
{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
css-head (base-css): permet d'ajouter des style à la table incluse
paramètres Javascript pour configuration
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
Cliquer pour lire la documentation
{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.
css-head (base-css): permet d'ajouter des style à la table incluse
🆙 table_flip (table_permute) : tables responsives par permutation lignes/colonnes
Cliquer pour lire la documentation
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 @license: GNU/GPLv3@credit: Jason Gross@tags: Responsive
table_flip (table_permute): aucun argument
Style CSS
id: identifiant
style: classes et styles inline pour balise table
class: classe(s) pour balise table (obsolète)
css-head (base-css): permet d'ajouter des style à la table incluse
🆙 table_sort : Trier, filtrer et paginer une table
col-type: mode de tri des colonnes. n=numerique, a=alphanum, i=alphanum case insensitive, d=date
col-init: n° de la colonne triée au chargement et sens (asc, desc)
champs pour recherche
placeholder = lang[en=Search;fr=Rechercher]: texte dans la zone recherche
globalSearch: vide= recherche sur toutes les colonnes, sinon liste des colonnes (1,2,5)
Pagination
pagination: nombre de lignes par pages ou 0 pour désactiver
pagination-class: classe pour les boutons
pagination-class-active: classe pour le bouton actif
Style CSS
id: id genérée automatiquement par UP
class: classe(s) ajoutées à la table
style: style inline ajouté à la table
css-head (base-css): style ajouté dans le HEAD de la page
paramétres JS
sortable = 1: Activer le tri
searchable = 1: Activer la recherche
🆙 tabslide : ajoute des onglets pour ouvrir un panneau sur les bords de la fenêtre
Cliquer pour lire la documentation
syntaxe {up tabslide=btn-text | tabLocation=top}contenu{/up tabslide} utilisation : - un sommaire sur le coté du site - un module connexion
@author: Lomart @version: UP-1.0 @credit: script de hawk-ip@license: GNU/GPLv3@tags: Body
l'onglet
tabslide: titre de l'onglet
tab-style: classes et styles inline pour onglets
tab-class: classe(s) pour onglet (obsolète)
le panneau
id: identifiant
panel-style: classes et styles inline pour panneau
panel-class: classe(s) pour panneau (obsolète)
Options JS disparues - conservés pour compatibilité
speed = 300: OBSOLETE voir bounceSpeed
positioning = fixed: or absolute, so tabs move when window scrolls
toggleButton = .tab-opener: not often used
paramétres JS : définition de l'onglet
tabLocation = left: position : left, right, top ou bottom
onLoadSlideOut: slide out after DOM load
clickScreenToClose = 1: fermer l'onglet lorsque le reste de l'écran est cliqué
tabHandle = .handle: Sélecteur JQuery pour l'onglet, peut utiliser #
action = click: mode ouverture : 'hover' ou 'click'. Forcer à click sur mobile
hoverTimeout = 5000: sélai en ms pour garder l'onglet ouvert après la fin du survol - uniquement si action = 'hover'
offset = 200px: distance pour top or left (bottom or right si offsetReverse est vrai)
offsetReverse: true= aligné a droite ou en bas
otherOffset = null: si défini, la taille du panneau est définie pour maintenir cette distance à partir du bas ou de la droite (haut ou gauche si offsetReverse)
handleOffset = null: Si null, détecte la bordure du panneau pour bien aligner la poignée, sinon la distance en px
handleOffsetReverse: si vrai, poignée alignée avec la droite ou le bas du panneau
paramétres JS : Animation
bounceDistance = 50px: distance autorisée pour le rebond
bounceTimes = 4: nombre de rebonds si 'bounce' est appelé
bounceSpeed = 300: vitesse d'animation des rebonds
paramétres JS : image pour l'onglet
pathToTabImage = null: image facultative à afficher dans l'onglet
imageHeight = null: hauteur image
imageWidth = null: largeur image
paramétres JS : pour expert
onOpen = function () {}: appelé après l'ouverture
onClose = function () {}: appelé après la fermeture
onSlide = function () {}: appelé après l'ouverture ou la fermeture
🆙 upactionslist : Liste des UP actions avec infos et paramètres
Cliquer pour lire la documentation
{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 @author: Lomart @update: 2019-10-25 @license: GNU/GPLv3@tags: UP
Sélection des actions listées
upactionslist: liste des actions à récupérer. toutes par défaut
exclude-prefix = _,x_: prefix des actions non listées. Separateur = comma
without-custom: affiche les infos du dossier custom de l'action. 1 pour les masquer
Affichage du lien vers la démo
demo = 1: afficher le lien vers la demo
Générer les fichiers JSON synonymes des noms utilisés par UP 'dico'
make-dico: consolide le fichier principal dico.json avec ceux des actions
Création des fichiers documentation
csv: fichier doc-actions.csv avec les options des actions
comment: fichier 'comment-actions.csv' avec les infos des entêtes scripts pour analyse
md: enregistre la documentation au format markdown dans plugins/content/up/doc-actions.md
Style CSS
id: identifiant
style: style ou class
class: idem style
filter: condition pour exécuter l'action
🆙 upbtn_makefile : Création des fichiers HTML pour le plugin editors-xtd
Cliquer pour lire la documentation
syntaxe {up upbtn_makefile}
@author: LOMART @version: UP-2.1 @license: GNU/GPLv3@tags: UP
Sélection des actions listées
upbtn_makefile: Vide pour toutes les actions, sinon liste des actions à inclure ou exclure (list-exclude=1).
list-exclude: 0:uniquement les actions indiquées, 1: toutes sauf les actions indiquées
without-custom: 1 sans les infos dans prefs.ini (v2.6)
mode d'affichage
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)
Exportation des fichiers
export-folder: sous-dossier de TMP pour sauver l'arborescence. ex : up-pref-foo
🆙 upprefset : Affiche la liste de tous les prefsets de UP pour le site
Cliquer pour lire la documentation
syntaxe {up upPrefSet}
@author: LOMART @version: UP-1.8 @license: GNU/GPLv3@tags: UP
Sélection des actions
upprefset: liste des actions ou vide pour toutes
action-exclude: 1: toutes les actions sauf celles du paramétre principal
prefset-exclude = icons,options: sections exclues
Format de la mise en page
action-template = [h4]##action##[/h4]: présentation pour ##action##
prefset-template = [b class="t-vertFonce"]##prefset##[/b] : [small]##options##[/small]: présentation pour ##prefset##
info-template = [div class="bd-grey ph1"]##info##[/div]: présentation pour ##info##
prefset-separator = [br]: séparateur entre items
options-separator = [b class="t-vert"] | [/b]: les underscrores sont remplacés par des espaces
exportation des fichiers
export-prefs: ou sous-dossier de TMP pour sauver l'arborescence. ex : up-pref-foo
Style CSS
action-class: classes et style pour le bloc d'une action
id: identifiant
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
Cliquer pour lire la documentation
syntaxe: {up upscsscompiler} toutes les actions {up upscsscompiler=action1, action2} une ou plusieurs actions note: les fichiers SCSS & CSS sont en racine des dossiers actions
@author: LOMART @version: UP-1.2 @license: GNU/GPLv3@credit: https://github.com/leafo/scssphp @tags: UP
Sélection des actions
upscsscompiler: liste des actions à recompiler. toutes par défaut. 0 pour inactiver
without-custom: sans prise en compte des personnalisations. Usage interne pour créer le zip de UP
force: force la compilation de tous les SCSS. Par défaut: les SCSS plus récents que leur CSS.
force-filter: oblige force si la condition est remplie