Cette action retourne le contenu d'un champ personnalisé (Custom Field) de l'article courant.
Il est possible d'appliquer une mise en forme et de l'utiliser comme argument d'une autre action UP.
Il est beaucoup plus souple à utiliser que le plugin natif de Joomla.
{up field=id_or_name_field}
// contenu brut du champ{up field=id_or_name_field | model=value}
// contenu mis en forme du champ{up field=id_or_name_field | model=label : [b]%id_or_name_field%[/b]}
// modèle avec BBCODE- field: id ou name du champ
- model: modèle BBCODE avec id ou nom des champs entre signes %
- separator: sépare les éléments d'un tableau pour rawvalue
- tag: balise pour bloc principal
style et options secondaires
- id: identifiant
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): style ajouté dans le HEAD de la page
Petit préambule : cet article définit plusieurs custom field qui seront utilisés pour la démo
type | id | nom | contenu |
---|---|---|---|
color | 2 | couleur | #004499 |
imagelist | 3 | liste-image | 3 images : Leopard.jpg,lion.jpg,macaque.jpg |
Un exemple simple
L'argument principal de cette action est l'ID ou le nom du custom field.
{up field=2}
ou {up field=couleur}
retourne #004499
Le résultat peut être utilisé comme argument pour une autre action ou tout autre usage.
{up icon=address | color={up field=couleur} | size=3rem}
affiche
le code HTML <strong style="color: {up field=2};">Un texte bleu</strong>
affiche Un texte bleu
Si un champ n'a pas de contenu (rawvalue ou default_value) pour l'article courant, rien ne sera retourné
Choisir le contenu retourné
Par défaut, l'action retourne la valeur brute du Custom Field. Il est possible d'indiquer l'élément à récupérer avec l'option model
{up field=liste-image | model=value}
affiche les 3 images du champ liste-image
Avec une mise en forme
Leopard.jpg,lion.jpg,macaque.jpg est :
les images sont dans le dossier : images/actions-demo/field
Le résultat ci-dessus est obtenu avec ces shortcodes :
{up field=liste-image
| model=[div style="border:2px solid {up field=couleur}" class="p2 tc"]
Résultat pour %title% qui contient [br][tt]%rawvalue%[/tt] est :
[br]%value%
[br]les images sont dans le dossier : images/%fieldparams->directory%
[/div]
}
model peut contenir du bbcode avec les éléments à récupérer entre 2 signes pourcentage (%).
Si model contient uniquement un motclé, les signes % ne sont pas obligatoires.
Dans notre exemple, la div définit un style pour créer une bordure de la couleur du champ couleur. Les classes permettent de centrer et aérer le contenu.
La fin définit le contenu qui est composé du titre du champ (title), de sa valeur brute (rawvalue) et de sa valeur prête à l'usage (value).
La dernière ligne montre la possibilité de récupérer les paramètres du type de champ
Pour information, le même résultat est obtenu avec ce shortcode. L'habillage du bloc est fait avec les options tag, class et style.
{up field=liste-image
| tag=div | style=border:2px solid {up field=couleur} | class=p2 tc
| model=Résultat pour %title% qui contient
[br][tt]%rawvalue%[/tt] est :
[br]%value%
[br]les images sont dans le dossier : [tt]images/%fieldparams->directory%[/tt]
}
Je vous laisse analyser le code en vous aidant de la section "Les mots-clés utilisables"
Comme contenu d'une autre action
Le slideshow ci-contre est obtenu avec ce shortcode sur une seule ligne :
{up slider-owl | items=1 | autoplay=5000 | paginationSpeed=2000}{up field=liste-image | model=value}{/up slider-owl}
Bon, c'est juste pour la démo. Je ne crois pas que c'est la solution la plus pratique !
Les mots-clés utilisables
La version 3.1 de UP permet l'utilisation des mots clés étendus.
- Il est possible d'afficher ou non un champ en fonction de sa valeur.
- On peut enrichir l'affichage avec des style et libellés
Plus d'infos sur la page "Les mots-clés" et principalement cette section
En dehors des mots-clés qui retournent le contenu (value et rawvalue), il s'agit du nom des colonnes de la table #_fields.
Pour se repérer plus facilement, voici la correspondance entre les mots-clés et la définition d'un type en backend.
Les mots-clés en vert sont spécifiques au type de champ (ici : un type imagelist)
mot-clé | type | description |
---|---|---|
rawvalue | texte | valeur brute du champ. ex: image.jpg |
value | texte | la valeur prête pour affichage; ex: <img src='images/directory/image.jpg' class='class'> |
title | texte | le titre du champ |
label | texte | Le label du champ à afficher |
default_value | texte | la valeur affichée par défaut si aucune valeur n'est saisie dans l'onglet 'champs' de l'article |
note | texte | la note standard de Joomla! |
description | texte | la description |
Pour mémoire | ||
id | int | ID du type de champ |
name | texte | le nom du champ. Celui que l'on utilise comme argument pour cette action |
context | texte | dans notre usage, cela sera : com_content.article |
group_id | int | le groupe auquel est rattaché le champ |
type | texte | le nom du type selon Joomla |
state | 0/1 | 1 pour publier |
required | 0/1 | 1 si le champ doit toujours être saisi |
language | texte | la langue |
created_time | datetime | date et heure de création du type de champ |
created_user_id | int | id du créateur du type de champ |
modified_time | datetime | date et heure de modification du type de champ |
modified_by | int | id de la personne ayant modifié le type de champ |
Les éléments définis par le type de champ. vous pouvez récupérer les infos spécifiques à un type de champ dans la colonne 'fieldsparams' de ce type dans la BD |
||
fieldparams->directory | texte | le dossier pour les images |
fieldparams->multiple | 0/1 | 1 s'il est possible de sélectionner plusieurs éléments |
fieldparams->image_class | texte | class qui sera affecté au bloc retourné par 'value' |
Chaque type de champ apporte son lot de fieldparams.
On les retrouve dans l'élément 'fieldparams' de la table #_fields de la BD.
Une autre méthode est d'utiliser l'inspecteur de code dans la fenêtre champ (celle affichée au début de cette section). Le nom se trouve à la fin de for="jform_fieldparams_
div (3) upactionslist (1) csv2table (2) field (7) icon (1) flexbox (1) slider-owl (1) flexauto (1) modal (1) addcsshead (1) jcontent-info (1)