Vous venez de découvrir UP et vous êtes un peu effrayé par les codes à saisir.
C'est normal, à l'image d'un jeu de construction, on peut faire simple, mais aussi beaucoup plus élaboré.
Imaginons que vous deviez créer une page "informations" d'un site comme ci-dessous.
Nos horaires
- Jours Horaires
- Lundi, mardi9h-18h
- Mercredi9h-20h
- Jeudi,vendredi, samedi9h-18h
- Dimanche9h-12h
Aux alentours
Etape 1 : ajouter une carte
L'action OSMap convient parfaitement pour ce besoin. Sur la page de cette action, outre la démonstration, en cliquant sur la barre bleue au début vous accédez à un mode d'emploi synthétique. Nous voyons que l'action attend comme arguments la longitude et la latitude de l'endroit. Nous récupérons ces informations sur le site //coordonnees-gps.fr.
{up osmap=48.40236, 2.6982}Pour écrire le shortcode d'une action, comme ci-dessus, on commence toujours par une accolade ouvrante (AltGr+4 sur un PC), suivi du mot up et d'un espace. Vient ensuite le nom de l'action. osmap dans notre cas. Comme l'action a besoin de la latitude et la longitude, on ajoute le signe égal et les arguments. Pour terminer, on ajoute une accolade fermante.
Il suffit de se rendre sur le site pour voir le résultat. Ce n'est pas mal, mais la carte gagnerait à être plus détaillée. En regardant les options de l'action (la petite barre bleue), nous voyons que l'option zoom doit satisfaire ce besoin. Nous l'ajoutons avant l'accolade fermante en la séparant avec un caractère pipe (AltGr+6 sur PC). A l'aide de test, nous déterminons la bonne valeur.
{up osmap=48.40236, 2.6982 | zoom=14}Jusque là, vous ne pouvez pas dire que c'est insurmontable !
Procédez par tests successifs, aucun risque de casser le site. Ce n'est pas bon, on teste une autre solution. Vous avez toutes les données sous les yeux, c'est un des gros avantages de UP !
Etape 2 : les 3 blocs d'informations
Au-dessous de la carte, nous voulons afficher les horaires, la météo et les sites aux alentours. Notez que pour cette démo, j'utilise des données totalement fantaisistes.
Les horaires
Pour faire plus joli et faciliter les mises à jour ultérieures, vous pouvez utiliser l'action csv2list
{up csv2list | leaders | header}
Jours; Horaires
Lundi, mardi; 9h-18h
Mercredi; 9h-20h
Jeudi,vendredi, samedi; 9h-18h
Dimanche; 9h-12h
{/up csv2list}
Comme pour le shortcode précédent, nous commençons par {up, suivi du nom de l'action et de 2 options pour indiquer que la première ligne est un titre (header) et que l'on désire des points de conduite entre les jours et les horaires (leaders).
L'étape suivante est la saisie des informations en séparant les groupes de données par un point-virgule (comme l'exige le format csv). Vous pouvez ajouter des espaces pour faciliter la lecture, ils seront ignorés par UP pour la mise en forme.
Pour indiquer la fin du contenu, on ajoute un autre shortcode identique à celui de début, sauf l'ajout d'une barre oblique après l'accolade ouvrante. Si vous connaissez le HTML, cela doit vous être familier. Il est inutile de reprendre les options, le nom de l'action suffit.
La météo
Suivre les informations sur la page démo de l'action meteo-france. Nous utilisons l'alternative booked.net
{up div=tc}
{up html=a
| target=_blank
| href=https://hotelmix.fr/weather/fontainebleau-12927
}
{up html=img
| src=https://w.bookcdn.com/weather/picture/3_12927_1_3_137AE9_160_ffffff_333333_08488D_1_ffffff_333333_0_6.png?scode=124&domid=581&anc_id=48018
| alt=booked.net}
{up html}
{up html}
{/up div}Le premier shortcode permet de centrer le bloc météo.
Les 2 shortcode HTML conitiennent le code récupéré sur le site de booked
Aux alentours
Pour la démo, j'utilise les données du site comme exemple. Imaginez simplement que les articles sur les caractères Unicode sont des pages qui vantent les richesses de votre belle région.
Donc, pour avoir la liste "dynamique" de ces articles, nous utilisons l'action "jcontent_by_categories" ou "jnews" pour son petit nom. Vous verrez que UP dispose d'un glossaire qui permet de renommer les actions et les options. Cela est commode pour les noms longs ou pour l'utiliser dans une autre langue.
{up jnews=13 | maxi=5}##title##{/up jnews}L'argument de l'action est l'ID de la catégorie. Vous trouverez facilement cette information dans la liste des catégories dans l'administration du site. Pour limiter le nombre de lignes, nous ajoutons l'option maxi=5 pour avoir uniquement les 5 derniers articles. Par défaut, les résultats sont classés par date de création, le plus récent devant. Vous pouvez demander un autre tri avec les options.
Le contenu ##title## peut vous surprendre, mais c'est juste le modèle que UP doit utiliser pour le rendu. Si vous vouliez avoir le titre et la date en petit, il faut saisir "##title## ##date-crea##". Je sais que c'est du HTML, mais du HTML facile 😊
Et comme à chaque fois qu'une action a du contenu, nous ajoutons le shortcode de fermeture.
Les 3 blocs
C'est bien joli, mais nos 3 blocs sont l'un en dessous de l'autre !
Là encore, une action de UP va nous aider. Il s'agit de flexbox
Elle permet d'organiser du contenu de façon visuelle avec un éditeur comme TinyMCE ou JCE. Chaque bloc de données est séparé du précédent par un shortcode spécial composé d'une accolade ouvrante, d'au moins 3 signes égal, d'un texte informatif optionnel et d'une accolade fermante.
Les options définissent le nombre et la largeur des colonnes en vue ordinateur et smartphone.
class ajoute une marge entre les blocs (fg-gap), répartit verticalement le contenu (fg-vcenter-between) et supprime les marges inutiles en haut et en bas (m-child-raz-1).
class-* permet d'entourer les blocs enfants avec une bordure grise et d'ajouter un espace intérieur horizontal.
En CSS, cela donnerait : border:1px solid #333;padding-left:10px;padding-right:10px;
Vous admettrez, que même si cela demande une petite habitude, bd-gris ph1 est plus rapide à saisir et à mémoriser. UP ne vous oblige à rien, vous pouvez saisir le CSS si vous préférez.
Les titres sont ajoutés directement dans les sections concernées.
Pour vous montrer l'utilisation, je mets le code complet de l'exemple sous 2 formes : saisie avec TinyMCE et saisie au format HTML
Pour plus de clarté, j'ai surligné les codes pour flexbox
Vue de la saisie avec TinyMCE
Saisie en HTML avec Rokpad
{up osmap=48.40236, 2.6982 | zoom=14}
{up flexbox=4-4-4 | mobile=12 | class=fg-gap fg-vcenter-between-1 m-child-raz-1 | class-*= bd-gris ph1}
<h3>Nos horaires</h3>
{up csv2list | leaders | header}
Jours; Horaires
Lundi, mardi; 9h-18h
Mercredi; 9h-20h
Jeudi,vendredi, samedi; 9h-18h
Dimanche; 9h-12h
{/up csv2list}
{======= LA METEO }
<h3>La météo</h3>
{up meteo-france=771860 | orientation=h | class=tc}
{======= LES ALENTOURS }
<h3>Aux alentours</h3>
{up jnews=13 | maxi=5}##title##{/up jnews}
{/up flexbox}Conclusion
J'espère que cette découverte vous aura rassurée sur la facilité d'utilisation de UP. Expérimentez, expérimentez encore est la clé du succès !
Toutes les informations et tous paramétres sont contenus dans et entre les shortcodes. Cela facilite grandement les tests.
Pas besoin de naviguer entre un article et les multiples possibilités de réglages de Joomla et ses extensions
Juste un petit truc ! si vous avez besoin d'aide, ajoutez un point d'interrogation comme option du shorcode et vous aurez une documentation au début de l'article sur le site.
Dans cet article, nous avons abordé uniquement le côté récupération et mise en forme de contenu.
UP, c'est beaucoup plus que cela. Il vous permet de faire des choses impossibles (ou très compliquées) avec le Joomla de base.
Pour exemple : changer l'image de fond pour l'article en cours, ajouter des règles CSS ou des Javascripts spécifiques à un article, saisir du code HTML dans un éditeur WYSIWYG sans risque d'effacement, ...