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.

{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}

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

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

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

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

En savoir +

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.

En savoir +

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

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.

Lomart

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

Lomart

{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

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.

En savoir +

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.

En savoir +

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

{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}

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

Danger

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.

En savoir +

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.

En savoir +

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-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

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.

En savoir +

Le titre

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

En savoir +

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

en savoir +

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.

En savoir +

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

en savoir +

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

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

En savoir +

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.

En savoir +

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

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

En savoir +

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.

En savoir +

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

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

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

En savoir +

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.

En savoir +

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

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.

En savoir +

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.

En savoir +

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 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)

En savoir +

{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 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)

En savoir +

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

Rainbow

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.

En savoir +

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.

En savoir +

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

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.

En savoir +

Le titre

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

En savoir +

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##

Détails

Création : 16 mai 2020

Mis à jour : 20 janvier 2025

• Layout-static

Informations communes aux 3 actions data...

Une option non disponible est signalée par un badge rouge contenant le nom de l'action.

Les fichiers de données admis

Les actions file-info, file2list et file2table supportent 3 formats de données : JSON, XML et CSV

Plus d'informations sur la structure des données et leur prise en charge par les actions UP

Dans mes explications pour les démos, j'utilise ces termes qui peuvent convenir pour les 2 types de données

option principale

l'URL ou le chemin du fichier de données.

En cas de doute sur la conformité du fichier, vous pouvez le valider à l'aide de ces sites : Données XML / Données JSON.
Pour consulter l'intégralité du contenu, utilisez l'action data2list avec uniquement le chemin vers les données.
Ce n'est pas forcément très joli, mais vous verrez l'intégralité des données ainsi que sa structure.

datatype

UP sait reconnaitre le type de données, mais vous pouvez le forcer en indiquant : json, xml ou csv)

encoding

L'action prend en charge les fichiers avec un encodage UTF-8. Si vos données sont dans un autre format, il suffit de l'indiquer avec cette option. Exemple : ISO-8859-1

Spécifique aux données CSV

csv-header

uniquement pour les fichiers CSV, cette option permet d'indiquer si la première ligne du fichier contient les titres des colonnes (0=non, 1=oui). Oui par défaut

csv-header-title

uniquement pour les fichiers CSV, vous pouvez indiquer les titres des colonnes séparés par le caractère spécifié dans l'option csv-separator.

Ce contenu remplacera les titres du fichier, un moyen rapide de renommer les colonnes.
Si aucun titre n'est fourni, les colonnes seront nommées col-1, col-2, ....

csv-separator

le caractère utilisé pour séparer les colonnes dans le fichier CSV

Spécifique aux données XML

xml-attributes

Le format XML permet de mettre des informations (label:valeur) dans la balise ouvrante d'une ligne. 
Exemple: 

<trkpt lat="48.404950" lon="2.720740">
   <ele>78.1</ele>
</trkpt>

0= les informations sont considérées comme des colonnes de la ligne (par défaut)
Pour y accéder, il faut spécifier le chemin : trkpt/lat

1 = les informations sont mises comme contenu d'un sous-tableau "@attributes".
Pour y accéder, il faut spécifier le chemin : trkpt/@attributes/lat

Gestion du cache interne

Pour limiter les appels à un site externe, UP peut en conserver une copie durant un certain temps.

cache-delay

durée du cache en minutes. 0 pas de cache, Par défaut: 30

La sélection des lignes

lign-root

Les fichiers JSON et XML pouvant contenir différents groupes d'informations, il est nécessaire de définir quelle partie nous intéresse.
Il faut mettre comme argument la liste des labels de colonnes séparée par des barres de division (slash).

Cette option est utile lorsque la source de données contient plusieurs groupes d'informations. Ce qui est le cas des fichiers gpx qui utilisent le format XML.

Exemple pour cibler uniquement la partie points d'intérêts

lign-root=trk/trkseg/trkpt

lign-select

L'option lign-select propose 2 méthodes pour sélectionner une ou plusieurs lignes.

❶ Afficher les lignes contenant la valeur recherchée pour un ou plusieurs champs.

L'argument de lign-select est une liste de champ:valeur séparée par des virgules. lign-select=key:value, ... ,keyN:valueN
Toutes les lignes qui répondent à tous les critères (opérateur AND) seront sélectionnées.
Plusieurs valeurs séparées par un point-virgule sont considérées comme des alternatives (opérateur OR)
La recherche est sensible aux minuscules/majuscules pour les clés, mais pas pour les valeurs.

Exemple pour tous les "Jean" ou les "Paul" ayant une voiture "Opel"

lign-select=prenom:Jean;Paul , voiture:Opel

❷ Afficher des lignes selon leur indice.

Il est possible d'indiquer la position de la ligne dans le fichier. La première ligne est 1.
Pour avoir les dernières lignes, il suffit d'indiquer la position en valeur négative. La dernière ligne est -1

Exemple pour la première, deuxième et dernière ligne :

lign-select=1,2,-1

lign-filter

Séléctionner des lignes selon la valeur d'un ou plusieurs champs

Cette option retourne les lignes dont la valeur est inférieure ou égale (<=), supérieure ou égale (>=), égale (==), différente (<>) ou entre 2 valeurs. (><val1-val2).

Exemple pour les personnes se nommant dupont ayant entre 20 et 40 ans :

lign-filter=nom==dupont, age><20-40

La recherche n'est pas sensible aux minuscules/majuscules.

lign-filter, à la différence de lign-select, n'accepte pas plusieurs valeurs séparées par des points-virgules. 

Pour indiquer une date postérieure à aujourd'hui, utlisez une de ces méthodes

lign-filter=date><20240101-{up php=echo date('Ymd');}
lign-filter=date><20240101-{up date | format=%Y%m%d | tag=0}

Consulter la démo des actions date et php pour plus de détails.

lign-sort

Trier les données d'une ou plusieurs colonnes

Cette option permet de trier les données selon une ou plusieurs colonnes

lign-max

Afficher uniquement les N premières lignes

Cette option retourne uniquement les premières lignes de la table.

Exemple pour trier la table selon la colonne nom dans l'ordre croissant, puis selon l'age dans l'ordre décroissant

lign-sort=nom:asc, age:desc

Le tri n'est pas sensible aux minuscules/majuscules. Les nombres sont triée selon leur valeur numérique (100 est plus grand que 50) 

La sélection des colonnes

col-include

data-info

Affiche uniquemment les colonnes dont le label est dans la liste (séparateur: virgule)
Exemple: avoir uniquement les champs nom et code

col-include=nom, code

col-exclude

data-info

N'affiche pas les colonnes spécifiées dans la liste (séparateur: virgule)
Exemple: avoir tous les champs sauf nom et code

col-exclude=nom, code

Ces options n'ont pas de raison d'exister pour l'action data-info

Mise en forme des champs

col-class

data-info

pour attribuer une ou plusieurs classes à une colonne, il suffit d'indiquer son nom, 2 points et la ou les classes

Exemple pour mettre en gras et bleu le champ "Nom" et en vert le champ "Age"

col-class=Nom:t-blue b, Age:t-green

col-label

data-info

par défaut, le nom du champ est utilisé pour l'affichage. Pour le changer, il suffit d'indiquer le nom du champ, 2 points et le nom à afficher

Exemple pour renommer codePostal en CP et departement en Dpt

col-label=codePostal:CP, departement:Dpt

col-type

cette option permet d'enrichir la valeur affichée dans un champ. Il faut indiquer le nom du champ, deux-points et une des valeurs ci-dessus.

• le mot date : affiche une date selon le format indiqué par l'option date-format
• le mot boolean : améliore l'affichage d'une valeur logique. Voir boolean-in et boolean-out
• le mot url : affiche un lien hypertext avec ouverture selon l'option url-target
• le mot image : affiche le contenu du champ comme une image. Voir image-path et image-max-size
• le mot compact : les valeurs d'un tableau seront affichés dans une chaine. les tableaux multidimensionnels sont pris en charge.
• contient un signe pourcentage est comprise comme l'argument format de la fonction php sprintf.
  exemple: si la valeur est 18,  %s ans affiche 18 ans. %04d affiche 0018. %.2f€ affiche 18.00€
  le bbcode est admis. [b class="t-blue"]%s[/b] ans affiche 18 ans
• contient ##num## qui sera remplacé par la valeur numérique formattée par milliers.Si la valeur possède des décimales, un arondi à 2 décimales sera appliqué.
  le séparateur des milliers est un espace et le séparateur décimal un point. Il n'est pas possible de les modifier.
  exemple: pour une valeur de 1234.56 et un col-type ##num## €  , on affiche 1 234.46 €
• commence par MASK. suivi du masque d'affichage dont les signes dièse seront remplacés par les lettres et chiffres de la valeur. Attention à la conception du masque pour gérer les différents cas.
  

  Valeur dans données	avec le masque phone: (#)#-##-##-##-##
  01.02.03.04.05	phone: (0)1-02-03-04-05
  01.02	phone: (01-02
  01.02.03.04.05.06	phone: (010)2-03-04-05-06

Si la valeur n'est pas d'un type reconnu, elle sera affichée sans modification.

date-format

un champ de type date utilise ce format. Par défaut : %e %B %Y
%y: AA, %Y: AAAA, %m: 01-12, %b: mois 3 lettres, %B: nom mois, %d: 01-31, %e: 1-31, %a: joursem 3 lettres, %A: jour sem, %U: N° semaine, %l: heure (1-12) AM/PM - L min, %I: heure (01-12) AM/PM - i maj, %k: heure (0-23), %H: heure (00-23), %P: am/pm, %p: AM/PM, %M: minute (00-59)

boolean-in

les valeurs, séparées par des virgules, dans le fichier de données pour indiquer les états : vrai, faux et non défini. Par défaut : 1,0,

boolean-out

valeurs affichées pour représenter en sortie les valeurs true,false,null.
par defaut : lang[fr=oui,non,-; en=yes,no,n.a.]

Exemple : {up icon=Ux2714},[span class=t-red]non[/span], NC

Attention: L'utilisation d'une action dans le fichier custom/pref.ini n'est pas possible. Utilisez l'entité HTML, soit ✔ ✔

url-target

un champ de type url utilise cette valeur pour définir la cible où ouvrir le lien : _blank ou _self

image-path

Utilisez cette option si un champ contient le nom d'un fichier image sans définir son emplacement.
Exemple: images/  ou https://site.fr/images/

image-max-size

pour s'assurer que l'image ne sera pas trop grande, vous pouvez définir la dimension du coté du carré dans lequel elle sera inscrite. Exemple: 100px

col-empty

texte affiché pour une valeur vide ou égale à zéro pour une colonne. Exemple: prix:gratuit, quantité:en rupture.

col-empty-invisible

data2table

data-info

0: (par défaut) les champs (label+valeur) dont la valeur est vide seront affichés. 1 pour les masquer.

no-data-html

Texte retourné si le fichier ne contient aucune données après applications de lign-root, lign-select, lign-filter et lign-max. Le BBcode est admis. Les caraxtères %s seront remplacés par le nom de la source de données.

model

data2list

data-info

disponible pour l'action data2table, cette option recoit une des classes du fichier data2table.css : noborder, line, blue ou green

template

data2table

définit la présentation du champ.

• data2list : bbcode avec les mots-clés ##LABEL## et ##VALUE##
  Exemple: [i class="t-gris"]##LABEL##:[/i] ##VALUE## pour le label en italique et gris
• data-info : le label des champs est utilisé comme mot-clé.
  Exemple : [b]##prenom## ##nom##[/b] a ##age## ans

array-subtitle

data2table

data-info

cette option permet de remplacer l'indice de la ligne  d'un tableau par une ou plusieurs des valeurs de cette ligne.
Exemple : array-subtitle=root:##class##, eleves:[b]##nom## ##prenom##[/b]
Pour le premier niveau de l'arborescence (root), on affiche le contenu du champ class. Pour le sous-tableau "eleves", on affiche les nom et prénom de ceux-ci

Mise en forme générale

model

data2list

data-info

Uniquement pour data2table, une des classes "modèle" du fichier data2table.css : noborder, line, blue, green

id, class, style

ID, styles et classes pour le bloc principal

css-head

style CSS ajouté dans le HEAD de la page

Détails

Création : 18 février 2023

Mis à jour : 16 octobre 2024

Pour expliquer les différences entre les 3 formats de données gérés par les actions, je vais utiliser un fichier contenant 3 informations pour 2 entités (personnes) différentes.

Fichier original

nom; prenom; age
DIOTE; Lydie; 18
TERRIEUR; Alex; 19

{
   "classe": {
      "eleve": [
         {
            "nom": "DIOTE",
            "prenom": "Lydie",
            "age": "18"
         },
         {
            "nom": "TERRIEUR",
            "prenom": "Alex",
            "age": "19"
         }
      ]
   }
}

<?xml version="1.0" encoding="UTF-8" ?>
<root>
   <classe>
      <eleve>
         <nom>DIOTE</nom>
         <prenom>Lydie</prenom>
         <age>18</age>
      </eleve>
      <eleve>
         <nom>TERRIEUR</nom>  
         <prenom>Alex</prenom>
         <age>19</age>
      </eleve>
   </classe>
</root>

Pour simplifier les explications, je vais utiliser les termes d'une représentation sous forme d'une tableau.

data2list

Cette action permet de voir l'organisation des données
Sauf erreur dans la source de données, elle affichera toujours l'intégralité des informations contenues dans le fichier.

{up data2list=images/.../minimal.csv}

{up data2list=images/.../minimal.json}

{up data2list=images/.../minimal.xml}

Il est possible de limiter les données affichées en définissant la racine avec l'option lign-root

{up data2list=images/.../minimal.csv

{up data2list=images/.../minimal.json 
 | lign-root=classe/eleve}

{up data2list=images/.../minimal.xml
 | lign-root=classe/eleve}

data2table

Cette action présente les données sous forme de tableau.
Pour les formats JSON et XML, il est indispensable de redéfinir la racine des données avec l'option lign-root

{up data2table=images/.../minimal.csv}

{up data2table=images/.../minimal.json
 | lign-root=0/classe/eleve}

{up data2table=images/.../minimal.xml
 | lign-root=0/classe/eleve}

data-info

Cette action récupère des données d'une seule ligne pour les afficher selon le modèle que vous avez défini.

{up data-info=images/.../minimal.csv
 | lign-select=1
 | template=##prenom## ##nom##}

{up data-info=images/.../minimal.json
 | lign-root=classe/eleve
 | lign-select=1
 | template=##prenom## ##nom##}

{up data-info=images/.../minimal-attributes.xml
 | lign-root=classe/eleve
 | lign-select=1
 | template=##prenom## ##nom##}

Variante pour XML

<?xml version="1.0" encoding="UTF-8" ?>
<root>
<classe>
  <eleve nom="DIOTE"  prenom="Lydie">
    <age>18</age>
  </eleve>
  <eleve nom="TERRIEUR"  prenom="Alex">
    <age>19</age>
  </eleve>
</classe>
</root>

❶ on conserve le sous-ensemble @attributes, en le renommant si besoin.
Il faut indiquer @attributes dans le chemin. Exemple : @attributes/nom

❷ on supprime le sous-ensemble avec l'option  xml-attributes=0.
Les colonnes incluses seront remontées d'un niveau.
L'ajout de @attributes dans le chemin n'est plus nécessaire.

Un commentaire <!-- --> est noté comme comment sans le contenu. Vous pouvez le masquer avec l'option col-exclude=comment

Détails

Création : 18 février 2023

Mis à jour : 15 mai 2023

Cette page montre l'utilisation de l'option infinite-scroll de l'action image-gallery

Faites descendre la page vers le bas pour voir les images s'afficher prograssivement.

Le shortcode pour la démo est :

{up image-gallery=images/actions-demo/gallery/infinite | infinite-scroll=5}

Fin

Fin des pages

Si vous essayez de rafraîchir cette page après avoir affiché toutes les images, seules les dernières images seront affichées. C'est (malheureusement) normal

Détails

Création : 6 février 2022

Mis à jour : 12 avril 2023

Elles permettent une présentation plus souple et plus agréable que les tableaux avec le grand avantage d'être responsive.

J'ai revu complétement ces 2 actions pour la version 5.1 de UP, en uniformisant leurs options concernant la mise en forme. 

Quoi de mieux que d'utiliser ces nouvelles fonctionnalités pour vous les montrer et démontrer.

Les options concernées sont listées dans le tableau ci-dessous.
Pour rappel, une option se terminant par -, permet de donner une règle qui concerne tous les éléments. Si on remplace l'étoile par un nombre de 1 à 12, on cible un groupe d'éléments. Dans notre cas, il s'agit des colonnes. Il aurait été préférable que je les nomme col-class-* et col-style-*. Mais il est trop tard, la compatibilité ascendante l'interdit 

L'exemple utilise flexbox, mais flexauto fonctionnne exactement de la même façon.

Les explications

{up flexbox=2-10 | mobile=12
| class=fg-gap m-child-raz-1 bd-gris
| style=font-size:1rem
| bloc-style=border:1px grey solid; padding:10px
| class-*=ombreMax
| class-1=bg-rouge t-blanc
| class-2=bd-rouge
| css-head=#id .up-col-1.up-row-odd[background:var(--bleuClair) !important]
#id .up-col-2.up-row-odd[border:2px solid var(--bleuClair) !important]
}

Un peu de technique pour comprendre les règles de l'option css-head

Il aurait été possible de faire plus simple, amis on perdait le charme de la démo !

Tous les blocs enfants ont 3 classes pour permettre de les styler :

• up-col-X : le numéro de sa colonne de 1 à N
• up-row-X: le numéro de sa ligne de 1 à N
• up-row-even ou row-odd selon que la ligne est paire ou impair

Ces classes nous permettent de cibler :

• une colonne par #id .up-col-X
• une ligne par #id .up-row-X
• un bloc par ses coordonnées #id .up-row-X.up-col-X Notez bien l'absence d'espace entre les 2 classes pour indiquer qu'elles sont dans la même balise. L'espace avec #id indique qu'elles sont ses enfants. C'est beau le CSS !
• un bloc d'une colonne sur une ligne paire ou impaire. C'est le cas dans notre exemple avec #id .up-col-1.row-odd pour les blocs de la colonne 1 qui sont sur une ligne paire.

Attention à la priorité des sélecteurs CSS

Par définition, pour simplifier, une règle CSS dans une balise HTML a un poids (ou priorité) plus important qu'une règle dans un fichier CSS ou dans le head de la page. 

C'est pour cela que l'on ajoute l'attribut !important afin de le rendre prioritaire

En résumé, toutes les options sont dans le head de la page pour toutes les options (bloc-style, style- et css-head). class-* est obligatoirement dans la balise des blocs enfants.
Je ne parle pas des options class et style qui ne rentre pas en conflit avec leurs enfants

Si la facilité d'utilisation des classes n'était pas si grande, l'idéal serait de ne pas utiliser l'option class-* pour éviter les bagarres entre enfants.

L'option bloc-tag

Cette option fait son apparition dans la version 5.1 de UP.

Sa fonction est utile lorsque le contenu des blocs enfants provient d'autres actions UP situées entre des shortcodes séparateurs pour plus de lisibilité.

Les shortcodes séparateur encadrent leur contenu par une balise DIV qui peut gêner l'application de certaines règles CSS flexbox ou grid.

Je ne vais pas rentrer plus dans les explications, si vous êtes confronté à un souci CSS, pensez à ajouter une option bloc-tag=0 pour ne pas ajouter ce bloc superflu !
Une autre solution est de ne pas utiliser de shortcodes séparateurs, mais je trouve cela moins clair. A vous de choisir.
Dans les 2 cas, les classes class-* seront ajoutées à la balise des enfants directs.

{up flexbox=2-10
| class=fg-gap m-child-raz-1 bd-gris
| style=font-size:1rem
| bloc-style=border:1px grey solid; padding:10px
| class-*=ombreMax
| class-1=bg-rouge t-blanc
| class-2=bd-rouge
| css-head=#id .col-1.row-odd[background:var(--bleuClair) !important]
           #id .col-2.row-odd[border:2px solid var(--bleuClair) !important]
}

Détails

Création : 23 janvier 2025

Mis à jour : 9 mars 2025

Sommaire :

Le monde

{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
}
  {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

{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

{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

Détails

Création : 1 février 2021

Mis à jour : 11 mai 2023

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é nécessaire

mapbox.outdoors clé nécessaire

stamen-terrain

Satellite

mapbox.streets-satellite clé nécessaire

Noir et blanc

mapbox.light clé nécessaire

mapbox.dark clé nécessaire

stamen-toner

stamen-toner-lite

Fantaisie

stamen-watercolor

Sans texte

mapbox.satellite clé nécessaire

stamen-terrain-background

Détails

Création : 18 juin 2018

Mis à jour : 7 novembre 2023

• Widget

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

{up page-search}
{up lorem}

Détails

Création : 6 février 2022

Mis à jour : 6 février 2022