frendeitpt

Box - modèles

Cette page présente tous les modèles fournis avec l'action BOX. (voir la démonstration).

Pour voir les différents rendus en fonction des informations fournies, chaque modèle est présenté avec les 3 shortcodes ci-dessous. Seule l'image a pu être adaptée au type de box.

Tous les éléments

{up box=note
 | title=Le titre
 | subtitle=Le sous titre
 | image=images/up-lego.png
 | action=En savoir +
 | link=#
}
Lorem ipsum dolor sit amet, ...
{/up box}

Sans image

{up box=note
 | title=Le titre
 | subtitle=Le sous titre
 | action=En savoir +
 | link=#
}
Lorem ipsum dolor sit amet, ...
{/up box}

Uniquement titre et contenu sans lien

{up box=note
 | title=Le titre
}
Lorem ipsum dolor sit amet, ...
{/up box}

+ un exemple de personnalisation du style par le rédacteur dans le shortcode ou par la création d'un jeu d'options dérivé.

Au-dessous des exemples, le template utilisé permet de connaitre les informations attendues ainsi que les classes et styles modifiables.

Badge

Le titre

Le sous titre
Up lego

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titre

Le sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

  • class=bd-rouge bg-jauneClair
  • title-class=bg-rouge
template="##title-link## ##subtitle## ##image## ##content## ##action-link##"

Citation

Lomart

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titre

Le sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titre

Le sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titre

  • body-class=t-brun
  • title-style=border-top:2px tan dotted
template = ##image## ##body## ##content## ##/body## ##title-link## ##subtitle##

Chip

Un tout petit modèle, mais très utile sur le principe.

{up box=chip
 | title=Lomart
 | image=images/lomart.jpg
 | link=//lomart.fr
 | link-target}
{up box=lomart-chip}

lomart-chip étant une section de prefs.ini

[lomart-chip]
box="chip"
title="Lomart"
image="images/lomart.jpg"
link="//lomart.fr"
link-target="_blank"
title-link-class=t-blanc t-hover-jaune
class=bg-brun t-blanc
image-class=bd-blanc bd2 bd-hover-jaune
template = ##image-link## ##title-link##

Crazy

Up lego

Le titreLe sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titreLe sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

head-class=bg-rouge t-jaune
body-class=bg-vert
template = ##head## ##image## ##title-subtitle## ##/head## ##body## ##content## ##action-link## ##/body##

Cutout

Dynastie : Maison de Bourbon
Nom de naissance : Henri de Bourbon
Date de naissance : 13 décembre 1553
Date de décès : 14 mai 1610 (à 56 ans)

Dynastie : Maison de Bourbon
Nom de naissance : Henri de Bourbon
Date de naissance : 13 décembre 1553
Date de décès : 14 mai 1610 (à 56 ans)

{up box=cutout
| title=Henri IV | subtitle=Roi de France[br][small]2 août 1589 – 14 mai 1610 [/small] | image=images/actions-demo/box/henri-4.jpg
| link=//fr.wikipedia.org/wiki/Henri_IV_(roi_de_France) | link-target
| title-style=background:#fb9d;font-size:4vw;mix-blend-mode:hard-light;color:#660
}
Dynastie ...
{/up box}

Le motclé ##image-css-head## insère l'image comme fond du bloc head.

Le titre et le sous-titre sont dans le bloc titre.
La couleur de fond en hexadécimal équivaut à rgba(255,187,153,0.81)
Le texte reste sur une seule ligne (sauf BR). Pour être responsif, la taille de la police est exprimée en vw. A vous de l'adapter au contexte de votre site.
mix-blend-mode est le mode de fusion du texte avec l'image. normal pour aucune.

template = ##image-css-head##  ##head## ##title-subtitle-link## ##/head## ##content## ##action-link##

Danger

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

head-class=bg-rouge t-blanc
class=bd-rouge
template = ##head## ##image## ##title-subtitle-link## ##/head## ##body## ##content## ##/body## ##action-link##

Image

Un moyen simple pour avoir une image flottante à gauche

Lomart

Le titreLe sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Lomart

Le titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Lomart

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Lomart

Le titreLe sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Lomart

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le même modèle avec l'image à droite.

Il a suffi d'ajouter cette option :

image-style=float:right;margin:0 0 0 10px

Vous pouvez créer un jeu d'option "image-droite" pour simplifier l'utilisation.

template : ##image## ##title-subtitle-link## ##body## ##content## ##/body## ##action-link##

Info

Le titreLe sous titre

Up lego

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titreLe sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

style=border-color:red
title-style=background:red
template : ##title-subtitle-link## ##body## ##image## ##content## ##/body## ##action-link##

Note

Le titre

Le sous titre
Up lego

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titre

Le sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

class=rotate-3 mt1 mb2
title-class=t-vertFonce head-style=border-color:greenYellow
template (défaut) = ##head## ##title-link## ##subtitle## ##image## ##/head## ##content## ##action-link##

OnImage

Le titre

Le sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titre

Le sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

style=background:url(/images/up-bg.png) center center
head-class=bd-blanc
template = ##image-css## ##head## ##title-link## ##subtitle## ##/head## ##body## ##content## ##/body## ##action-link##

Paper

Le titre

Le sous titre
Up lego

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titre

Le sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

class=rotate3 bd0
style=clip-path: polygon(0% 0%, 1% 12%, 0% 23%, 1% 36%, 1% 48%, 0% 58%, 3% 75%, 0% 90%, 0% 100%, 17% 98%, 29% 99%, 43% 99%, 53% 95%, 66% 96%, 77% 95%, 90% 93%, 99% 90%, 100% 84%, 99% 71%, 100% 67%, 99% 55%, 100% 42%, 98% 29%, 100% 19%, 99% 10%, 100% 1%, 99% 0%, 90% 0%, 85% 2%, 71% 0%, 62% 0%, 50% 0%, 43% 0%, 36% 1%, 26% 0%, 16% 1%, 11% 0%, 6% 0%)
template (défaut) = ##head## ##title-link## ##subtitle## ##image## ##/head## ##content## ##action-link##

Pricelist

Engrenage

Le titre

Le sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titre

Le sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

class=bg-beige bd-brun bd2
title-class=bg-brun t-beige
template = ##head## ##image## ##title## ##subtitle## ##/head## ##content## ##action-link##

Profile

Henri 4

Henri IV

Roi de France
2 août 1589 – 14 mai 1610

Dynastie : Maison de Bourbon
Nom de naissance : Henri de Bourbon
Date de naissance : 13 décembre 1553
Date de décès : 14 mai 1610 (à 56 ans)

{up box=profile
 | title=Henri IV
 | subtitle=Roi de France[br][small]2 août 1589 – 14 mai 1610[/small]
 | image=images/actions-demo/box/henri-4.jpg
 | action=En savoir +
 | link=//fr.wikipedia.org/wiki/Henri_IV_(roi_de_France)
 | link-target
}
Dynastie : Maison de Bourbon
Nom de naissance : Henri de Bourbon
Date de naissance : 13 décembre 1553
Date de décès : 14 mai 1610 (à 56 ans)
{/up box}

Les options en plus pour le résultat de droite

class=bd-brun bg-beige
style=box-shadow:none
title-class=t-brun
subtitle-class=t-brun
action-class=bg-brun
Henri 4

Henri IV

Roi de France
2 août 1589 – 14 mai 1610

Dynastie : Maison de Bourbon
Nom de naissance : Henri de Bourbon
Date de naissance : 13 décembre 1553
Date de décès : 14 mai 1610 (à 56 ans)

template = ##image## ##body## ##title## ##subtitle## ##/body## ##content## ##action-link##

Rainbow

Le titre

Le sous titre
Up lego

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titre

Le sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

class=rotate3 bd-rougeFonce
style=bg-rougeFonce t-blanc
template (défaut) = ##head## ##title-link## ##subtitle## ##image## ##/head## ##content## ##action-link##

Trombi

Lomart

Le titreLe sous titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Lomart

Le titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

Le titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

title-class=tr
##image## ##title-tag## ##link## ##title-text## ##subtitle## ##/link## ##/title-tag## 
##body## [div]##content##[/div] ##action-link## ##/body##

 

mapael - exemples

Sommaire :

Le monde

Alternative content for the map


Les fichiers utilisés



Les drapeaux sont à télécharger sur www.drapeauxdespays.fr


Le shortcode

{up mapael=world_countries | zoom=12
  | class=bg-bleuPale
| css-head=#id .mapTooltip[opacity:.95 !important]#id .mapTooltip img[width:50%]
| csv-areas=/files/mapael/world_countries.csv | csv-areas-model=/files/mapael/world_countries.model
} {default-Area | bg=#D2B48C | bg-hover=#CD853F | bd-color=grey | bd-width=1 | tooltip-overflow-bottom} {/up mapael}

Le shortcode commenté :

  1. on définit la carte utilisée (sans chemin, elle est recherchée dans le dossier maps de l'action) et le niveau de zoom maxi
  2. une classe pour ajouter un fond bleu clair
  3. des règles CSS pour contrôler l'opacité des infobulles et la taille des drapeaux. Notez l'utilisation de #id pour limiter la portée de ces règles à cette instance.
  4. le fichier CSV pour définir les informations de chaque pays
  5. le fichier modèle pour le CSV
  6. fin du shortcode principal
  7. un shortcode secondaire pour définir les attributs des capitales

* je ne précise pas les noms des fichiers model pour les CSV puisqu'ils sont de même nom avec une extension .model

Le fichier european_union_2021_pays.model

"%id%":{attrs:{fill:"%color%"},href:"#",tooltip:{content:"<img src='/images/flags/%id%.png'><br><b>nom : %nom%</b> (%id%)"}}

Le fichier CSV définit 3 colonnes :

  • id :utilisé comme identifiant de la zone, mais également comme nom du fichier PNG pour le drapeau et dans le texte de la bulle
  • nom : le nom du pays
  • color : la couleur du pays, blue ou grey selon l'appartenance du pays à l'UE

Le fichier european_union_2021_capitales.model

"%ville%":{longitude:%longitude%,latitude:%latitude%,text:{content:"%ville%",position:"%position%"}}

Le fichier CSV définit 5 colonnes :

  • ville : le nom de la capitale
  • latitude & longitude : pour situer la ville sur la carte
  • pays : nom repris, juste pour faciliter la relecture du CSV
  • position : right, left, top ou bottom pour indiquer la position du texte et éviter les chevauchements disgracieux

L'Union Européenne

Alternative content for the map

Les fichiers utilisés

Les drapeaux sont à télécharger sur www.drapeauxdespays.fr

Le shortcode

{up mapael=european_union_2021.js | zoom=12
  | class=w9 mcenter bg-bleuPale
  | css-head=#id .mapTooltip[opacity:.95 !important].mapTooltip img[width:50%]
  | csv-areas=european_union_2021_pays.csv
  | csv-plots=european_union_2021_capitales.csv
}
  {default-Plot | circle=5,yellow | options=text:[attrs:[fill:"orangered","font-size":12]]}
{/up mapael}

Le shortcode commenté :

  1. on définit la carte utilisée (sans chemin, elle est recherchée dans le dossier maps de l'action) et le niveau de zoom maxi
  2. quelques classes pour limiter la largeur de la carte, la centrer et ajouter un fond bleu clair
  3. des règles CSS pour contrôler l'opacité des infobulles et la taille des drapeaux. Notez l'utilisation de #id pour limiter la portée de ces règles à cette instance.
  4. le fichier CSV pour définir le nom des pays *
  5. le fichier CSV pour définir le nom des capitales de l'Union Européenne *
  6. fin du shortcode principal
  7. un shortcode secondaire pour définir les attributs des capitales

* je ne précise pas les noms des fichiers model pour les CSV puisqu'ils sont de même nom avec une extension .model

Le fichier european_union_2021_pays.model

"%id%":{attrs:{fill:"%color%"},href:"#",tooltip:{content:"<img src='/images/flags/%id%.png'><br><b>nom : %nom%</b> (%id%)"}}

Le fichier CSV définit 3 colonnes :

  • id :utilisé comme identifiant de la zone, mais également comme nom du fichier PNG pour le drapeau et dans le texte de la bulle
  • nom : le nom du pays
  • color : la couleur du pays, blue ou grey selon l'appartenance du pays à l'UE

Le fichier european_union_2021_capitales.model

"%ville%":{longitude:%longitude%,latitude:%latitude%,text:{content:"%ville%",position:"%position%"}}

Le fichier CSV définit 5 colonnes :

  • ville : le nom de la capitale
  • latitude & longitude : pour situer la ville sur la carte
  • pays : nom repris, juste pour faciliter la relecture du CSV
  • position : right, left, top ou bottom pour indiquer la position du texte et éviter les chevauchements disgracieux

 

Les départements français

Alternative content for the map
Alternative content for the legend

Les fichiers utilisés

Le shortcode

{up mapael=/files/mapael/france_departments_domtom.js | zoom=12
  | csv-areas=/files/mapael/france_departments_domtom.csv
  | class=w6 ws12 mcenter bg-bleuPale
}
  {legend-area=Population en 2018}
  {legend-slice=moins de 500 000 habitants | max=500000 | bg-color=lightsalmon}
  {legend-slice=entre 500 000 et 1 million | min=500001 | max=1000000 | bg-color=salmon}
  {legend-slice=entre 1 et 2 millions | min=1000001 | max=2000000 | bg-color=indianRed}
  {legend-slice=plus de 2 millions | min=2000001 | bg-color=firebrick}
{/up mapael}

Le shortcode commenté :

  1. on définit la carte utilisée (sans chemin, elle est recherchée dans le dossier maps de l'action) et le niveau de zoom maxi
  2. le fichier CSV pour définir le nom des départements et population *
  3. des classes pour limiter la largeur de la carte, la centrer et ajouter un fond bleu clair
  4. fin du shortcode principal
  5. un shortcode secondaire pour ajouter une légende par zones
  6. les différentes tranches de population. bg-color est utilisées pour colorer le département en fonction de sa population

Le fichier france_departments_domtom.model

"%id%":{value:"%population%",href:"#",tooltip:{content:"<b>%label%</b><br>Population: %population%"}}

Le fichier CSV définit 3 colonnes :

  • id : l'identifiant du département : exemple : department-01 pour l'Ain
  • population : le nombre d'habitants
  • label : le nom et code du département

 

OSMap ~ liste des modèles

Pour éviter une surcharge des serveurs et permettre un chargement rapide, les modèles de carte affichés ci-après sont des images.

Pour modifier le rendu d'une carte, il suffit d'insérer le paramètre tile avec comme argument le nom du fichier de définition. Exemple : tile=mapbox.pencil

Pour utiliser d'autres fonds de carte (tuiles), UP propose 2 méthodes :

  1. indiquer dans le shortcode l'URL du serveur de tuile (tile-url) et ses options (tile-options)
  2. créer un fichier JSON dans le sous-dossier tiles de l'action. Inspirez-vous des fichiers existants pour concevoir le vôtre.

Classiques

osm-mapnik-fr défaut

osm-mapnik

osm-mapnik-de

osm-humanitarian

opentomap

mapbox.streets clé necéssaire

mapbox.emerald clé necéssaire

mapbox.outdoors clé necéssaire

stamen-terrain

mapbox.run-bike-hike clé necéssaire

Satellite

mapbox.streets-satellite clé necéssaire

Noir et blanc

osm-mapnik-bw

mapbox.light clé necéssaire

mapbox.dark clé necéssaire

mapbox.high-contrast clé necéssaire

stamen-toner

stamen-toner-lite

Fantaisie

mapbox.comic clé necéssaire

mapbox.wheatpaste clé necéssaire

mapbox.pirates clé necéssaire

mapbox.pencil clé necéssaire

stamen-watercolor

Sans texte

mapbox.satellite clé necéssaire

osm-mapnikno-labels

stamen-terrain-background

page-search simple

Cette page montre l'utilisation de page-search sans aucun argument

{up page-search}
{up lorem}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed emolumenta communia esse dicuntur, recte autem facta et peccata non habentur communia. Negat enim summo bono afferre incrementum diem. Hoc est dicere: Non reprehenderem asotos, si non essent asoti. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Qua tu etiam inprudens utebare non numquam. Scientiam pollicentur, quam non erat mirum sapientiae cupido patria esse cariorem. Hi curatione adhibita levantur in dies, valet alter plus cotidie, alter videt. Duo Reges: constructio interrete.

Tu enim ista lenius, hic Stoicorum more nos vexat. Cur igitur, cum de re conveniat, non malumus usitate loqui? Summus dolor plures dies manere non potest? Addidisti ad extremum etiam indoctum fuisse. Graecum enim hunc versum nostis omnes-: Suavis laborum est praeteritorum memoria. Qui non moveatur et offensione turpitudinis et comprobatione honestatis? Quid ergo attinet dicere: Nihil haberem, quod reprehenderem, si finitas cupiditates haberent?

Re mihi non aeque satisfacit, et quidem locis pluribus. Non minor, inquit, voluptas percipitur ex vilissimis rebus quam ex pretiosissimis. Huic mori optimum esse propter desperationem sapientiae, illi propter spem vivere. In contemplatione et cognitione posita rerum, quae quia deorum erat vitae simillima, sapiente visa est dignissima.

Tubulum fuisse, qua illum, cuius is condemnatus est rogatione, P. Cenasti in vita numquam bene, cum omnia in ista Consumis squilla atque acupensere cum decimano. Quamvis enim depravatae non sint, pravae tamen esse possunt. Omnia peccata paria dicitis. Qui-vere falsone, quaerere mittimus-dicitur oculis se privasse; Si enim ad populum me vocas, eum. Hoc mihi cum tuo fratre convenit. Cum id fugiunt, re eadem defendunt, quae Peripatetici, verba. Teneo, inquit, finem illi videri nihil dolere.