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. Quid ei reliquisti, nisi te, quoquo modo loqueretur, intellegere, quid diceret? Ad corpus diceres pertinere-, sed ea, quae dixi, ad corpusne refers? An eiusdem modi? At quicum ioca seria, ut dicitur, quicum arcana, quicum occulta omnia? Recte, inquit, intellegis. Nobis aliter videtur, recte secusne, postea; Duo Reges: constructio interrete. Quis Aristidem non mortuum diligit? Fatebuntur Stoici haec omnia dicta esse praeclare, neque eam causam Zenoni desciscendi fuisse. Ergo infelix una molestia, fellx rursus, cum is ipse anulus in praecordiis piscis inventus est?

Quae ista amicitia est? Quod autem ratione actum est, id officium appellamus. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. An potest cupiditas finiri? Quo studio cum satiari non possint, omnium ceterarum rerum obliti níhil abiectum, nihil humile cogitant; Videmusne ut pueri ne verberibus quidem a contemplandis rebus perquirendisque deterreantur? Immo alio genere; Cur tantas regiones barbarorum pedibus obiit, tot maria transmisit?

Res enim fortasse verae, certe graves, non ita tractantur, ut debent, sed aliquanto minutius. Sunt enim prima elementa naturae, quibus auctis vírtutis quasi germen efficitur. Nos paucis ad haec additis finem faciamus aliquando; Ut enim consuetudo loquitur, id solum dicitur honestum, quod est populari fama gloriosum. At quicum ioca seria, ut dicitur, quicum arcana, quicum occulta omnia? Aut haec tibi, Torquate, sunt vituperanda aut patrocinium voluptatis repudiandum. Sed erat aequius Triarium aliquid de dissensione nostra iudicare. Quos quidem tibi studiose et diligenter tractandos magnopere censeo.

Itaque primos congressus copulationesque et consuetudinum instituendarum voluntates fieri propter voluptatem; Hoc loco tenere se Triarius non potuit. Te ipsum, dignissimum maioribus tuis, voluptasne induxit, ut adolescentulus eriperes P. Est enim tanti philosophi tamque nobilis audacter sua decreta defendere.