Général

{up markdown=plugins/content/up/history.md}

Le contenu de cette page provient du fichier history.md qui est mis à jour automatiquement lors de la mise à jour du plugin UP
le shortcode pour afficher le texte est :

{up markdown=plugins/content/up/history.md}

Cette liste d'actions est la documentation générée automatiquement par le plugin à partir des informations récupérés dans le code source de l'action.

{up filter | guest} {up upactionslist} {=======}

Consolidation du fichier dico.json effectuée

{up upactionslist | make-dico} {/up filter}

Un shortcode est composé de :

  • {up l'identifiant du plugin pour la recherche du shortcode dans les articles et modules.
  • une suite d'option=argument séparés par des caractères pipes (AltGr+6).
  • la première option est le nom de l'action
  • une option sans argument est considérée comme égal à vrai ou 1. (0=faux)
  • le shortcode peut être sur plusieurs lignes pour faciliter la lecture
  • on peut saisir le nom des options sans se soucier de la case, ils sont évalués en minuscules.
    De même les tirets du 6 seront remplacés par les underscores du 8
  • le programmeur de l'action peut définir des alternatives pour le nom de l'action et des options.
    Par exemple: saisir table-par-lignes renvoie vers le nom 'technique': table_by_rows
  • } pour indiquer la fin du shortcode.

Le shortcode peut être en 2 parties entourant un contenu.

Exemple {up table-par-lignes} <table> ...</table> {/up table-par-lignes}

Il peut y avoir des shortcodes à l'intérieur du contenu pour indiquer des alternatives.

{if filter | admin} je suis un admin {=====} je ne suis pas un admin {/if filter}

Cela permet une saisie entièrement en wysiwyg

Les copier-coller des exemples de shortcodes sur ce site peuvent ne pas fonctionner. Dans ce cas, copier uniquement le contenu sans les accolades {}.

UP, un plugin à tout faire

les nouveautés

{up slider-owl | items=3 | autoplay=4000}

marknote

Afficher le contenu Markdow d'un fichier ou saisi dans l'éditeur

A découvrir

photo
imagemap

Comment créer facilement une image clicable et responsive

En savoir plus

video media-plyr

Une action écrite par Daneel pour afficher des vidéos hébergées sur Youtube, Viméo ou sur votre serveur.
Un lecteur audio est disponible

A découvrir

photo
slideshow-billboard

Un diaporama pour présenter des images légendées
dans un article ou un module.

En savoir plus

videosound

Pour jouer un son lors d'un événement Javascript (survol, clic, ...)

A écouter

html slider-owl

Des blocs HTML responsives, touch-sensitive qui défilent pour présenter des informations.

a voir ici

video

Prise en charge du SCSS pour uniformiser les styles CSS

voir compilation SCSS
{/up slider-owl}
UP, le couteau suisse de Joomla!

UP, pour Universal Plugin,
permet de réaliser plein d'actions dans vos articles et modules personnalisés.

UP permet d'insérer des éléments comme une vidéo ou des prévisions météo, de modifier le comportement d'une table pour la rendre responsive, d'ajouter du code CSS/JS sans risque de suppression par les éditeurs wysiwyg.

Mais ceci n'est que quelques exemples de ses possibilités, la liste complète est disponible sur la page documentation des actions

A l'image du couteau suisse qu'il est toujours pratique d'avoir à portée de main, UP très discret si on n'a pas besoin de lui (zéro octet sur la page), servira de chef d'orchestre pour lancer l'action demandée. Seuls les fichiers nécessaires à cette action seront chargés par le navigateur client.

L'idée m'est venue à la lecture d'un post sur forum.joomla.fr,
la personne recherchait un plugin pour afficher la météo.

J'aurais pu le créer classiquement, mais cela me posait plusieurs problèmes et interrogations.

  • il fallait créer plusieurs fichiers et dossiers (xml, php, tmpl, language)
  • il fallait créer le code pour isoler le shortcode dans l'article puis le traiter
  • il fallait ensuite installer le plugin
  • et surtout, Joomla! va l'appeler pour tous les articles et modules qui utilisent les plugins de contenu

Je me suis dit qu’en dehors de l'étape traitement, le reste est commun à tous les plugins de contenu. Voilà l'explication pour universal

UP, l'origine
UP, le concept

Un petit exemple très simple pour expliquer le concept

le but, afficher un texte en gras et en rouge.

Dans l'article, on saisit : {up grasrouge}le texte en gras et rouge{/up grasrouge}

Pour traiter la demande, il suffit de :

  • créer un sous-dossier "grasrouge" dans le dossier actions du plugin
  • dupliquer le script _exemple_simple en "grasrouge.php"
  • le modifier pour indiquer que la classe s'appelle grasrouge
  • dans la fonction run, modifier la valeur de la variable $out avec le code suivant :
    $out = '<strong style="color:red">' . $this->content . '</strong>';

{up box | model=info | box-class=mt3}

Bien que minimaliste, cet exemple montre bien le fonctionnement de UP:

  • Joomla! n'appelle qu'un seul plugin qui va se charger d'appeler les différentes actions
  • on peut répondre à un besoin spécifique très rapidement
  • le code est limité au minimum. Des modèles sont fournis
  • il est inutile de passer en mode code, Les éditeurs wysiwyg sont utilisables
  • une saisie manuelle du shortcode est nécessaire, mais cela évite la gestion d'un plugin editors-xtd.
    La liste des options, créé automatiquement, est disponible sur demande.

{/up box}

UP existe avec uniquement le shortcode ouvrant.

C'est le cas pour le plugin sur la météo. J'ai intégré le code fourni par Daneel sur une idée de RobertG comme action.
Le shortcode pour afficher celle de Saint-Tropez est

{up meteo-france=831190}

{up meteo-france=831190 | orientation=h | style=text-align:center}

Pour afficher une carte Google, il suffit d'insérer:

{up gmap=1 rue de la paix, paris}
{up gmap=1 rue de la paix, paris | height=200px}

Une vidéo Youtube, un simple shortcode:

{up youtube=tVKWiseNGUU}

{up youtube=tVKWiseNGUU}

UP peut modifier un contenu situé entre un shortcode ouvrant et un shortcode fermant.

Pour rendre une table responsive, il suffit d'entourer la table par ces 2 shortcodes: {up table-par-ligne} et {/up table-par-ligne}

Les shortcodes peuvent être inclus. Les actions doivent être différentes pour éviter tout conflit.

aide

UP vous aide lors de la saisie des shortcodes

Vous aimeriez un rappel des options utilisables avec une action, c'est très simple, ajouter une option avec juste un point d'interrogation.

{up youtube | ?}

affiche les informations ci-contre en haut de la page en frontend. Les termes entre parenthèses sont les alternatives ou traductions autorisées pour le nom d'une action ou des options.

Si le développeur de l'action l'a prévu, un lien vers une page de démo est accessible directement.

Ca ne marche pas comme vous le voudriez, il suffit d'ajouter une option debug pour avoir les options avec leur valeur telle que comprise par le plugin UP

Exemple pour une video youtube avec ce shortcode:

{up youtube=OJb_vHfVSn4 | width=50% 
| style=border:red 2px solid | class=mcenter | debug }

L'aide affichée est lue directement dans les commentaires et les variables de votre script action.

Vous n'aurez aucune excuse, si votre script est bien documenté, l'aide utilisateur sera disponible.

Pour gérer le multilangue, il est automatiquement fait appel à des fichiers externes (si disponibles dans le dossier de l'action).

Une documentation complète et à jour disponible sur votre site

il suffit de créer un article en accès restreint aux rédacteurs avec le shortcode {up upactionslist}

Exemple pour les 2 actions lorem

{up upactionslist=lorem,lorempixel}

Un clic sur une action affiche la doc lue directement dans le script de l'action. Si disponible, le lien "DEMO" affiche une démonstration sur le site up.lomart.fr

La documentation de toutes les actions disponibles sur ce site est visible en cliquant sur ce lien

Les utilisateurs de UP

Les utilisateurs de UP
Le novice
  • UP lui propose un tas de fonctionnalités en français.
  • les recherches sur la JED et l'installation de multiples extensions sont évitées durant la phase de découverte souvent décourageante de Joomla!
  • il évite les passages en mode code et les modifications de fichiers (CSS/JS).
  • sur le forum Joomla, fournir un code sous la forme d'un shortcode UP évite les nombreux messages sur où et comment le faire!
    Il serait même possible de fournir un zip avec le dossier d'une action créée pour répondre à une demande.
Le webmaster
  • il est assez facile d'expliquer à un client comment l'utiliser.
  • il peut créer une interface de saisie qui évite à son client de saisir du HTML.
  • il évite l'installation de nombreuses extensions utilisées une seule fois
Le graphiste
  • plus besoin d'aller dans le code pour la personnalisation d'une page. Un shortcode suffit
Le programmeur
  • la phase récupération du shortcode et de ses options est inutile. Il lui suffit de coder l'action.
  • il devient possible de tester rapidement un script trouvé sur le Net.

Et pour tous, fini l'installation de multiples extensions pour une fonction rarement utilisée.

UP, c'est un seul plugin qui appelle des actions. Une action, c'est uniquement de la place sur le disque.

Pour créer de nouvelles actions

C'est très simple, suivez les exemples commentés pas à pas :

UP met à disposition des fonctions utilitaires qui permettent d'écrire les actions plus rapidement. Utilisez-les, car elles réalisent des contrôles, affichent des alertes et proposent des fonctions comme la liste des options disponibles.

consultez la section "Programmation" de ce site. Vous y trouverez en français toutes les informations pour vous aider.

Et n'oubliez jamais les grands principes de UP:

  • UP n'est pas fait pour un rédacteur qui veut uniquement cliquer
  • UP n'oblige jamais à passer en mode code dans l'éditeur
  • UP permet de créer rapidement une action
  • UP a tout les fichiers d'une action dans le sous-dossier de l'action (ou /assets pour les ressources communes)
  • Une action UP s'installe en copiant son dossier dans le dossier actions. Le supprimer désinstalle l'action
Programmer UP

Voilà pour les grandes lignes.
Parcourez les exemples de ce site pour voir ce qu'il est possible de faire...

note: la liste ci-dessous est créée automatiquement par l'action "articles-category" et stylisée avec "addCssHead".

{up addcsshead=.list-inline-none li [list-style:none;display:inline-block;padding: 5px 10px;background-color: #498DC8;border-radius: 5px;margin: 5px;box-shadow: 0 3px 2px rgba(0, 0, 0, 0.2);].list-inline-none li a[color:white].list-inline-none li a:hover[color:yellow;text-decoration:none]@media(max-width: 767px)[.list-inline-none li[width:100%]]} {up article-category=8 | class=list-inline-none tc}

et bientôt les vôtres ...

C'est parti : téléchargez et installez le plugin