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. Qualem igitur hominem natura inchoavit? Ita redarguitur ipse a sese, convincunturque scripta eius probitate ipsius ac moribus. Nec lapathi suavitatem acupenseri Galloni Laelius anteponebat, sed suavitatem ipsam neglegebat; Si autem id non concedatur, non continuo vita beata tollitur. Duo Reges: constructio interrete. Quamquam non negatis nos intellegere quid sit voluptas, sed quid ille dicat. Si de re disceptari oportet, nulla mihi tecum, Cato, potest esse dissensio. Nemo nostrum istius generis asotos iucunde putat vivere. Quamquam tu hanc copiosiorem etiam soles dicere.
Nihil ad rem! Ne sit sane; Quo plebiscito decreta a senatu est consuli quaestio Cn. Hoc non est positum in nostra actione. Animi enim quoque dolores percipiet omnibus partibus maiores quam corporis. Quis Pullum Numitorium Fregellanum, proditorem, quamquam rei publicae nostrae profuit, non odit? Quae cum praeponunt, ut sit aliqua rerum selectio, naturam videntur sequi; Sed residamus, inquit, si placet. Igitur neque stultorum quisquam beatus neque sapientium non beatus.
Cuius quidem, quoniam Stoicus fuit, sententia condemnata mihi videtur esse inanitas ista verborum. Quis animo aequo videt eum, quem inpure ac flagitiose putet vivere? Morbo gravissimo affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Etenim nec iustitia nec amicitia esse omnino poterunt, nisi ipsae per se expetuntur. Non est igitur voluptas bonum. At, illa, ut vobis placet, partem quandam tuetur, reliquam deserit.
Negat esse eam, inquit, propter se expetendam. Hoc Hieronymus summum bonum esse dixit. At enim, qua in vita est aliquid mali, ea beata esse non potest. Ex eorum enim scriptis et institutis cum omnis doctrina liberalis, omnis historia. Quid ei reliquisti, nisi te, quoquo modo loqueretur, intellegere, quid diceret? Universa enim illorum ratione cum tota vestra confligendum puto. Quia dolori non voluptas contraria est, sed doloris privatio. Quod si ita sit, cur opera philosophiae sit danda nescio. Cur post Tarentum ad Archytam? Et quidem illud ipsum non nimium probo et tantum patior, philosophum loqui de cupiditatibus finiendis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Commoda autem et incommoda in eo genere sunt, quae praeposita et reiecta diximus; Portenta haec esse dicit, neque ea ratione ullo modo posse vivi; Duo Reges: constructio interrete. Sed in rebus apertissimis nimium longi sumus.
Quicquid porro animo cernimus, id omne oritur a sensibus; Aliter homines, aliter philosophos loqui putas oportere? Cur id non ita fit? Quid ergo hoc loco intellegit honestum? Isto modo, ne si avia quidem eius nata non esset. Item de contrariis, a quibus ad genera formasque generum venerunt. Et quod est munus, quod opus sapientiae? Quid enim ab antiquis ex eo genere, quod ad disserendum valet, praetermissum est? Nummus in Croesi divitiis obscuratur, pars est tamen divitiarum.
Ergo, si semel tristior effectus est, hilara vita amissa est? Si quicquam extra virtutem habeatur in bonis. Non risu potius quam oratione eiciendum? Animi enim quoque dolores percipiet omnibus partibus maiores quam corporis. Quis enim confidit semper sibi illud stabile et firmum permansurum, quod fragile et caducum sit? Nos paucis ad haec additis finem faciamus aliquando;
Non quaeritur autem quid naturae tuae consentaneum sit, sed quid disciplinae. Quodsi ipsam honestatem undique pertectam atque absolutam. Fatebuntur Stoici haec omnia dicta esse praeclare, neque eam causam Zenoni desciscendi fuisse. Velut ego nunc moveor. Dempta enim aeternitate nihilo beatior Iuppiter quam Epicurus; Eam si varietatem diceres, intellegerem, ut etiam non dicente te intellego;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur id non ita fit? Scaevola tribunus plebis ferret ad plebem vellentne de ea re quaeri. Ita graviter et severe voluptatem secrevit a bono. Res enim se praeclare habebat, et quidem in utraque parte.
Omnes enim iucundum motum, quo sensus hilaretur. Nihil ad rem! Ne sit sane; Nummus in Croesi divitiis obscuratur, pars est tamen divitiarum. Qualem igitur hominem natura inchoavit? Primum in nostrane potestate est, quid meminerimus? Summum ením bonum exposuit vacuitatem doloris; Graecum enim hunc versum nostis omnes-: Suavis laborum est praeteritorum memoria.
Commoda autem et incommoda in eo genere sunt, quae praeposita et reiecta diximus; Habes, inquam, Cato, formam eorum, de quibus loquor, philosophorum. Claudii libidini, qui tum erat summo ne imperio, dederetur. Age nunc isti doceant, vel tu potius quis enim ista melius? Quod maxime efficit Theophrasti de beata vita liber, in quo multum admodum fortunae datur. Cum salvum esse flentes sui respondissent, rogavit essentne fusi hostes. Qui non moveatur et offensione turpitudinis et comprobatione honestatis? Sed quanta sit alias, nunc tantum possitne esse tanta. Non prorsus, inquit, omnisque, qui sine dolore sint, in voluptate, et ea quidem summa, esse dico.
Neque solum ea communia, verum etiam paria esse dixerunt. An, partus ancillae sitne in fructu habendus, disseretur inter principes civitatis, P. Quam si explicavisset, non tam haesitaret. Duo Reges: constructio interrete. Estne, quaeso, inquam, sitienti in bibendo voluptas? Sed fac ista esse non inportuna; Sed ne, dum huic obsequor, vobis molestus sim. Itaque hic ipse iam pridem est reiectus;
3 :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praeclare hoc quidem. Unum nescio, quo modo possit, si luxuriosus sit, finitas cupiditates habere. Et ego: Piso, inquam, si est quisquam, qui acute in causis videre soleat quae res agatur. Duo Reges: constructio interrete.
An eiusdem modi? Nihil minus, contraque illa hereditate dives ob eamque rem laetus. Quid de Platone aut de Democrito loquar? Scaevola tribunus plebis ferret ad plebem vellentne de ea re quaeri. Quid ergo aliud intellegetur nisi uti ne quae pars naturae neglegatur?
Quae quo sunt excelsiores, eo dant clariora indicia naturae. Quae qui non vident, nihil umquam magnum ac cognitione dignum amaverunt. Atque hoc loco similitudines eas, quibus illi uti solent, dissimillimas proferebas. Aliter autem vobis placet. Istam voluptatem, inquit, Epicurus ignorat? Omnis enim est natura diligens sui. Nonne videmus quanta perturbatio rerum omnium consequatur, quanta confusio? Multa sunt dicta ab antiquis de contemnendis ac despiciendis rebus humanis; Idemne, quod iucunde?
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 un parent du sélecteur CSS - de créer la règle CSS avec l'option 'base-css=.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, ...
css-head: 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}
➠ 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
addcsshead: code CSS. ATTENTION [ ] à la place des {}
➠ 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}
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
style: style inline appliqué au bloc
class: classe(s) appliquée(s) au bloc
css-before: style de l'élément avant l'animation
css-after: style de l'élément après l'animation
➠ 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}
poster: fichier image affiché avant chargement vidéo
mobile: image ou css si un appareil mobile est détecté
bg-selector = body: bloc portant le slideshow
bg-position = 50% 50%: 50% 50% = position poster et video
bg-ratio = 16/9: proportion de la video
bg-overlay: calque superposé à l'image de fond (png, opacité, RGBA, CSS)
bg-color: couleur de fond sous la vidéo lors chargement
page-selector: bloc sur contenu
page-overlay: background de page-selector (png, opacité, RGBA, CSS)
center: style et classe pour centrage vertical du contenu entre shortcodes
style: classes et style inline pour bloc créé
class: classes pour bloc créé (deprecated)
base-css: règles CSS définies par le webmaster (ajout dans le head)
➠ box : affiche un titre et du texte dans une boite ➠ DEMO
Cette action n'est pas finalisée et devrait etre rémaniée en profondeur ! syntaxe: {up box=titre}contenu HTML{/up box}
author LOMART update 2017-07-15 version v1.0 licenseGNU/GPLv3
box: titre de la box
model: [danger, info] classe prédéfinie
box-class: class user
box-style: style inline
title-class: class user pour titre
title-style: style inline pour titre
content-class: class user pour contenu
content-style: style inline pour contenu
css-head: style CSS inséré dans le HEAD
➠ 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
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 = white: couleur du texte
bgcolor = red: 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
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
width (l,largeur,w) = 0: largeur minimal (par défaut en pixels)
mono = 1: force la police en monospace
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. HTML autorisé
suffix: texte après compteur. HTML 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}
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
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}
title-tag = h4: pour utiliser une autre balise pour les titres
title-class: classe pour le titre (onglet)
title-style: style inline pour le titre
title-icon: TODO
content-class: classe pour le contenu
content-style: style inline pour le contenu
➠ 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 date 2017-12-04 version 1.0 licenseGNU/GPLv3
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_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
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
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é
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
➠ 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 1.0 - juillet 2017 licenseGNU/GPLv3
flexauto = 3: nombre de colonnes sur grand écran
tablet = 2: nombre de colonnes sur moyen écran
mobile = 1: nombre de colonnes sur petit écran
class: classe(s) ajoutée(s) au bloc parent
style: style inline ajouté au bloc parent
➠ 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 : col=4-8 ou col=33-66 pour 2 colonnes (équivalent: span4 et span8)
hr: nom icone, code unicode, chemin image ou nom dans prefs.ini + color, size
hr-border-top = 3px double #666: style du trait supérieur
hr-border-bottom: style du trait inférieur
hr-width = 100%: largeur du trait
hr-height: hauteur pour bg
hr-bg: argument pour background : couleur, dégradé, image
hr-align = center: position de la ligne : left, center, right
hr-style: style inline pour la ligne
hr-class: classe pour la ligne
icon: icon. admet raccourci icon, size, color
icon-text: texte en remplacement ou après l'icone
icon-size = 24px: taille icone en px, rem (px par defaut) - coté du carré dans lequel est inscrit l'image
icon-color: couleur pour icon et texte
icon-bg = #fff: couleur de fond
icon-space = 4px: espace entre icon et trait
icon-h-offset: décalage horizontal en px ou rem négatif pour aller vers la gauche
icon-v-offset = 0: décalage vertical dans la même unité que icon-size. Par défaut moitié de icon-size
icon-style: style inline pour l'icône ou le texte
icon-class: classe pour l'icône ou le texte IMPOSSIBLE
fontname = icomoon: pour icomoon ou FontAwesome ou autres (a mettre dans pref.ini)
prefset: nom d'un jeu d'options dans prefs.ini
➠ html : permet de créer une entité HTML (balise) avec classe(s), style et attribut sans passer en mode code ➠ DEMO
exemples : {up html=div | class=foo | id=x123}contenu{/up html} --> < div id="x123" class="foo">contenu< /div> {up html=img | class=foo | src=images/img.jpg} --> < img class="foo" src="/images/img.jpg" > note: toutes les options sont considérées comme des attributs de la balise
➠ 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}
➠ 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
prefset: jeu d'options défini par le webmaster dans prefs.ini
template: modèle de mise en page. Si vide le modèle est le contenu
main-tag = div: balise pour le bloc englobant tous les articles. 0 pour aucun
main-style: classes et styles inline pour bloc principal
main-class: classe(s) pour bloc principal (obsoléte)
item-tag = div: balise pour le bloc englobant tous les articles. 0 pour aucun
item-style: classes et styles inline pour bloc principal
item-class: classe(s) pour bloc principal (obsoléte)
image-src: lorempixel.com/150/150', // image par défaut
image-alt = news: image, texte alternatif par défaut
date-format = %e %B %Y: format pour les dates
date-locale: format 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-rouge">nouveau</span>: code HTML pour badge NEW
tags-list-prefix: texte avant les autres eventuels tags
tags-list-style: classe ou style pour les autres mots-clés
no-content-html = <p>aucune catégorie pour ce mot-clé</p>: retour si aucune catégorie trouvée
css-head:
➠ 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-link## ##image-src## ##image-alt## ##date-crea## ##date-modif## ##date-publish## ##author## ##note## ##cat## ##new## ##featured## ##hits## ##tags-list##
prefset: jeu d'options défini par le webmaster dans prefs.ini
template: modèle de mise en page. Si vide le modèle est le contenu
main-tag = div: balise pour le bloc englobant tous les articles. 0 pour aucun
main-style: classes et styles inline pour bloc principal
main-class: classe(s) pour bloc principal (obsoléte)
item-tag = div: balise pour le bloc englobant tous les articles. 0 pour aucun
item-style: classes et styles inline pour bloc principal
item-class: classe(s) pour bloc principal (obsoléte)
image-src: lorempixel.com/150/150', // image par défaut
image-alt = news: image, texte alternatif par défaut
date-format = %e %B %Y: format pour les dates
date-locale: format 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-rouge">nouveau</span>: code HTML pour badge NEW
tags-list-prefix: texte avant les autres eventuels tags
tags-list-style: classe ou style pour les autres mots-clés
no-content-html = aucune catégorie pour ce mot-clé: retour si aucune catégorie trouvée
css-head:
➠ jcontent_in_content : Affiche le contenu d'un article dans un autre ➠ DEMO
syntaxe : {up jcontent-in-content=id_article} 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-link## ##image-src## ##image-alt## ##date-crea## ##date-modif## ##date-publish## ##author## ##cat## ##featured## ##hits## ##tags-list##
no_published = 1: Liste aussi les articles non publiés
prefset: jeu d'options défini par le webmaster dans prefs.ini
template = ##content##: modèle de mise en page. Si vide le modèle est le contenu
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: format pour les dates. Par défaut, celle du navigateur client.
css-head: 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 article-category}
. 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é.
author Lomart version 1.0 - 07/2017 licenseGNU/GPLv3
lorem: nombre de paragraphe
class: classe(s) pour bloc (sans effet, si tag=0)
style: style inline pour bloc (sans effet, si tag=0)
tag = div: (v1.6) tag du bloc contenant le texte en retour ou tag=0 pour aucun.
max-char: nombre maxima de caractères
max-word: nombre maxima de mots
➠ 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%
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 = false: true = label sur une ligne
direction = left: right, up, down
loop = -1: nombre d'affichage, -1 : infini
scrolldelay = 0: delai en millisecondes
scrollamount = 50: vitesse
circular = true: mode carousel. si contenu plus large que .str_wrap
drag = true: deplacement msg avec souris
runshort = true: scroll si texte court (visible sans scroll)
hoverstop = true: pause lors survol
inverthover = false: scroll uniquement lors survol
➠ 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 v1.0 du 30-09-2017 licenseGNU/GPLv3
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_youtube (youtube) : affiche une video Youtube qui s'inscrit au maxima dans son bloc parent ➠ DEMO
{up media-youtube=ID} ID : il s'agit du code figurant à la fin de l'URL de la vidéo.
author LOMART version v1.0 du 01-07-2017 licenseGNU/GPLv3
media_youtube (youtube): code de la video (à la fin de l'url youtube)
width (l,largeur,w): largeur de la video en px ou %
class: classe pour bloc externe
style: code css libre pour bloc externe
➠ 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 popup=//youtu.be/H9fa9aWFbLM} - image unique si {up popup=images/xx.jpg} ou png, ... - bloc inline si id de bloc {up popup=#bloc} - iframe si url {up popup=//lomart.fr} ou {up popup=doc/xx.pdf} ou {up popup=?index/...} on peut forcer le type par type=inline, iframe, image, video, ajax
author LOMART version 1.0 licenseGNU/GPLv3credit https://www.jqueryscript.net/lightbox/Lightbox-Popup-Plugin-Flashy.html
modal: contenu ou type de contenu
type: pour forcer le type : inline, iframe, image, video, ajax
class: classe(s) pour bloc label
style: style inline pour bloc label
label: texte du lien pour afficher le popup
close-left = 0: croix de fermeture en haut à gauche. haut-droite par défaut
zoom-suffix = -mini: suffixe pour les versions vignettes des images
base-css: règles CSS definies par le webmaster (ajout dans le head)
base-js-params: règles JS definies par le webmaster (ajout dans init JS)
overlayClose = 0: 1 pour fermer la fenêtre modale en cliquant sur la zone grisée autour du contenu
videoAutoPlay = 0: 1 pour demarrer la video a l'ouverture du popup
gallery = 1: 0 pour traiter les images individuellement
title (titre) = 1: afficher le titre
width (l,largeur,w): largeur avec unite. Ex: 80%, 500px, ...
height (h,hauteur): hauteur avec unite. Ex: 80%, 500px, ...
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
➠ 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 1.0 - 07/2017 licenseGNU/GPLv3credit script de Matt
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 1.0 - 07/2017 licenseGNU/GPLv3credit un vieux script de mes archives
sameheight: inutilisé
class:
style:
css-head: code css libre dans le head. attention: ] au lieu de }
➠ scroller : Défilement vertical d'une liste d'éléments ➠ DEMO
paginationNumbers = 0: Affiche numéros à l'intérieur des boutons de pagination
goToFirst = 1: Retour sur premier élément si lecture automatique à la fin
goToFirstSpeed = 1000: vitesse de l'option goToFirst en millisecondes
navigation = false: Affichage boutons "next" et "prev"
navigationText = ["prev", "next"]: boutons sans texte: "navigationText: false"
responsive = true:
items = 1: Nombre maxi d'éléments affichés en meme temps sur la plus grande largeur de navigateur
itemsDesktop = [1199, 4]: Cela vous permet de prédéfinir le nombre de diapositives visibles avec une largeur de navigateur particulière. Le format est [x, y] où x = largeur du navigateur et y = nombre de diapositives affichées. Par exemple, [1199,4] signifie que si (window <= 1199) {affiche 4 diapositives par page} Vous pouvez également utiliser "itemsDesktop: false" pour ignorer ces paramètres. Pour bien comprendre comment cela fonctionne, consultez ma démo personnalisée
itemsDesktopSmall = [979, 3]: voir ci-dessus
itemsTablet = [768, 2]: voir ci-dessus
itemsMobile = [479, 1]: voir ci-dessus
➠ 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}
evenement = onmouseenter: ou onclick, onmouseover...
tag = div: balise pour le bloc. span pour un bloc inline
➠ 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
title-tag = h4: balise utilisée pour les titres onglets
style: classe(s) et style(s) bloc principal
title-style: classe(s) et style inline onglets
content-style: classe(s) et style inline contenu
class: classe(s) bloc principal (obsolète)
title-class: classe(s) onglets (obsolète)
content-class: classe(s) contenu (obsolète)
auto: delai en millisecondes pour changement automatique d'onglet
espace-vertical = 1: 0, 1 ou 2 : niveau des éléments à répartir
css-head: 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
model = up-stacktable: nom d'un fichier CSS prévu par le webmaster pour toutes les tables de la page
style: style inline pour balise table
class: classe(s) pour balise table (obsolète)
max-height: max-height pour la table
key-width = 35%: pour bloquer le header en haut
title-style: style pour la ligne titre en vue responsive
➠ 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 1.0 - 07/2017 licenseGNU/GPLv3creditcodefog
table_by_rows (table_par_lignes): rien
breakpoint = 720px: bascule en vue responsive
style: style inline pour balise table
class: classe(s) pour balise table (obsolète)
max-height: max-height pour la table
merge: fusion de colonnes. 1:[2,3],5:[6] = 2&3 avec 1 et 6 avec 5
move: deplacement colonne. 1:0,6:1 = 1 au debut et 6 en 2eme
skip: non visible. [3,5] = col 3 et 5 non visible
span: [2,4] = valeur sans libellé (eq: colspan)
➠ 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 1.0beta - 07/2017 licenseGNU/GPLv3creditlai32290
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}
➠ upactionslist : INTERNE - 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
upactionslist: liste des actions à récupérer. toutes par défaut
style:
class: (obsolète)
demo = 1: afficher le lien vers la demo
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
md = 0: enregistre la documentation au format markdown dans plugins/content/up/doc-actions.md
➠ upscsscompiler : INTERNE - 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 1.0 licenseGNU/GPLv3credit https://github.com/leafo/scssphp
upscsscompiler: liste des actions à recompiler. toutes par défaut
