JoomlaDay FR

UP, un plugin à tout faire

les nouveautés

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

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

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

{up gmap=1 rue de la paix, paris}

Une vidéo Youtube, un simple shortcode:

{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

➠ lorem : affiche du texte aléatoire (enrichissement possible) DEMO
Syntaxe : {up lorem=liste des arguments ci-dessous }
- (integer) - The number of paragraphs to generate.
- short, medium, medium, verylong - The average length of a paragraph.
- decorate - Add bold, italic and marked text.
- link - Add links.
- ul - Add unordered lists.
- ol - Add numbered lists.
- dl - Add description lists.
- bq - Add blockquotes.
- code - Add code samples.
- headers - Add headers.
- allcaps - Use ALL CAPS.
- prude - Prude version.
- plaintext - Return plain text, no HTML.
exemple appel : http://loripsum.net/api/2/code/decorate
author Lomart version 1.0 - 07/2017 license GNU/GPLv3
  • lorem: nombre de paragraphe
  • class: classe(s) pour bloc
  • style: style inline pour bloc
  • max-char: nombre maxima de caractères
  • max-word: nombre maxima de mots
    ➠ lorempixel : affiche une image aleatoire DEMO
    Syntaxe : {up lorempixel=type | width=xx | height=xx }
    -- type = abstract, animals, business, cats, city, food, nightlife, fashion, people nature, sports, technics, transport
    Note : width & height sont les dimensions de l'image retournée par lorempixel. Pour l'afficher en remplissant le bloc parent, il faut ajouter style=width:100%
    author Lomart version 07/2017 license GNU/GPLv3
    • lorempixel=cats: type d'image: abstract, animals, business, cats, city, food, nightlife, fashion, people nature, sports, technics, transport
    • align: alignement horizontal : left, center, right
    • height (h,hauteur)=200: hauteur image téléchargée
    • width (chamallow,l,largeur,w)=200: largeur image téléchargée
    • class: classe(s)
    • style: style inline

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

      et bientôt les vôtres ...

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