Module Compatible Joomla 3.x Administration Français Anglais

Description

LM-Custom - module custom avancé

LM-Custom est un petit module bien pratique que j'utilise en frontend, pour charger les fichiers JS et CSS pour LM-PRISM et en backend pour des ajouter des règles CSS pour l'éditeur Emmet, ainsi que des petites fonctionnalités que je présente dans la section 'Trucs et astuces'.

Les modules admin et site LM-CUSTOM (anciennement LM-EmbedCode)
ajoutent des fonctionnalités aux modules MOD_CUSTOM fournis par Joomla!

  • saisie du contenu avec un éditeur de code (éditeurs WYSIWYG interdits)
  • possibilité de code PHP dans le contenu
  • insertion fichier(s) JS/CSS dans le HEAD de la page
  • insertion code JS/CSS dans le HEAD de la page
  • insertion de code libre dans le HEAD de la page (version site)
  • prise en charge possible de 3 polices Google Fonts (version site)
  • insertion du module sous conditions très souples (version site)

Ne pas pouvoir utiliser un éditeur WYSIWYG est l'assurance qu'un script copié dans le contenu ne sera jamais nettoyé d'une partie de ses balises. Ni aujourd'hui, ni demain, ni pas vous, ni par un autre rédacteur !

Une solution pérenne plus simple que la configuration 'délicate' des éditeurs TinyMCE et JCE ou les permutations incessantes.

Installation

Vous pouvez, au choix, installer :

  • un package qui comprend les modules site et admin
  • chaque module séparément

Par défaut, les modules utilisent le premier éditeur trouvé dans cette liste : Rokpad, Emmet, CodeMirror, None.

Si vous voulez modifier l'ordre ou ajouter le votre, il faut modifier les fichiers 'mod_lmcustom.xml' des dossiers '/modules/mod_lmcustom.xml' et '/administrator/modules/mod_lmcustom.xml'

<field name="content" 
  type="editor"
  editor="rokpad|emmet|codemirror|none"
  filter="raw"

Indiquer pour editor, dans l'ordre désiré, le nom des éditeurs trouvé dans colonne 'Elément' de la liste des plugins.

Cette opération sera à refaire lors d'une mise à jour de LM-CUSTOM. Je suis désolé, mais je n'ai pas trouvé d'autres solutions...

Utilisation

Comme tous les modules, il faut le publier à la position désirée. Vous pouvez utiliser la position 'debug' dans le cas où aucun contenu n'est affiché.

Pour le module site, il ne faut pas oublier d'indiquer les pages sur lesquels il sera actif.

Module version site uniquement

Cet onglet permet d'indiquer des conditions pour lequel le module ne sera pas du tout inséré dans le code de la page.
Alors que si vous indiquez une condition en PHP dans l'onglet HTML/PHP, les éventuels titre, css, js seront quand même insérés.

  • Page d'accueil : cette option permet d'afficher/masquer le module uniquement sur la page d'accueil du site. Le module fait la distinction entre la vue "blog" et ses vues "article"
  • Catégories : indiquer la ou les catégories du contenu principal pour lesquelles le module sera affiché ou non affiché en fonction du choix indiqué au-dessous.
  • Vues : indiquer le ou les types de vues du contenu principal pour lesquelles le module sera ou ne sera pas affiché selon le choix indiqué au-dessous. Utiliser la fonction debug pour connaître le type de vue d'une page.
  • Affichage mobile : afficher/masquer le module les mobiles. Une redimension d'écran n'est pas considéré comme une vue sur mobile.
  • Niveau d'accès : permets de limiter facilement l'affichage du module aux personnes identifiées ou non identifiées.
  • Test personnalisé (PHP) vous pouvez saisir dans cette zone, un code PHP pour tester une condition. Il doit retourner un 'echo FALSE' pour interdire l'affichage du module.
    Exemple pour afficher uniquement sur Internet Explorer :
    echo (
       strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== FALSE 
       || strpos($_SERVER['HTTP_USER_AGENT'], 'Trident') !== FALSE
    );
  • Debug affiche en frontend un message contenant des informations facilitant la résolution d'une erreur, mais également de connaitre le contexte d'une page pour saisir les paramètres exacts. Pour permettre une utilisation sur un site en production, il est possible de limiter l'affichage aux seuls superadmin. Voir ci-après information debug.
LM-Custom : Module

Onglet HTML/PHP

Cet onglet permet de saisir les données à afficher sur le site.

  • Code HTML/PHP : le contenu qui sera affiché à la position du module. Vous pouvez saisir du code PHP en l'entourant des habituels tags <?php et ?>
    Note: l'éditeur (ici rokpad) dépend des éditeurs en mode code disponibles sur votre installation de Joomla!
  • Plugin de contenu : l'activer si vous utiliser des plugins dans le contenu, tel que {loadposition meteo}.
LM-Custom : HTML/PHP

Attention: toutes les variables sont locales au bloc <?php ... ?>

Cela veut dire qu'il ne faut pas saisir :
<?php $val=1+2; ?> <p>1+2=<?php echo $val; ?></p>
mais l'ensemble dans un seul bloc PHP:
<?php $val=1+2; echo( '<p>1+2=' . $val . '</p>'); ?>

Pour garantir la sécurité du site, des instructions sont interdites.
Si vous utilisez un mot proscrit, un message sera affiché en lieu et place du résultat attendu.
Exemple: ****** INVALID CODE IN PHP : file_exists ******

Onglet CSS

  • Fichiers CSS : le ou les fichiers CSS à charger dans le HEAD de la page. Indiquer le chemin relatif à la racine du site. Chaque fichier doit être sur une ligne distincte.
    Exemple: media/perso/test.css
  • Code CSS : code CSS à insérer dans le HEAD.
    Exemple: .foo{color:red;}
    note: saisir uniquement le code sans les balises <style>
LM-Custom : CSS

Onglet Javascript

  • Fichiers JS : le ou les fichiers JS à charger dans le HEAD de la page.
    Indiquer le chemin relatif à la racine du site. Chaque fichier doit être sur une ligne distincte.
    Exemple: media/perso/test.js
  • Code JS : code Javascript à insérer dans le HEAD.
    note: saisir uniquement le code sans les balises <script>
LM-Custom : Javascript

Onglet Code version site uniquement

  • le code saisi dans cette zone sera intégré dans le HEAD de la page sans aucune modification, ni ajout.
    Cela peut servir à mettre le code pour Google Analytics si l'on se réfère à cette page de Google
LM-Custom : Code libre

Onglet Polices version site uniquement

Indiquer des polices pour le module permet de différer le chargement du fichier au moment de l'utilisation.

  • Pour chacune des 3 polices possibles (à choisir sur le site GoogleFont), il faut indiquer
    • le nom de la fonte et sa graisse (ex: Roboto:400 ou Faster One:400)
    • le ou les sélecteurs CSS auxquels l'affecter (ex: h1, h2, .foo > h3)

vous pouvez compléter les propriétés CSS pour le sélecteur utilisant la police dans l'onglet CSS. Exemple: .foo > h3 {font-size:1.5; color:red;}

LM-Custom : Google Font

il est aussi possible de gérer totalement les polices sans avoir à les assignées à une balise HTML

  • charger la police dans l'onglet code en ajoutant le code fourni par Google. Exemple:
    <link href="https://fonts.googleapis.com/css?family=Vampiro+One" rel="stylesheet">
  • créer le CSS dans la zone code CSS de l'onglet CSS. Exemple :
    .vampiro{font-family: 'Vampiro One', cursive;}

Vous pouvez ensuite l'utiliser en ajoutant la classe. Exemple:

<p class="vampiro">texte en Vampiro</p>

Bien entendu, vous pouvez utiliser plusieurs fois ce module publié à diverses positions et pour toutes ou des pages spécifiques.

Informations debug version site uniquement

LM-Custom : informations debug

L'affichage des informations debug peut vous aider à comprendre pourquoi les conditions ne fonctionnent pas comme vous pourriez le souhaiter.

Il existe autant de sections que de modules avec l'option debug activée. Elles sont identifiées par le titre du module.

Pour chaque module, 4 groupes d'informations :

  • Params est la liste des paramètres que vous avez indiqué dans l'onglet Module.
  • Context affiche le contexte réel de la page. catid est l'id de la catégorie du contenu principal de la page ou 0 si aucune catégorie. view est le type de vue de la page. Pour les autres informations, 1 est vrai et 0 faux.
  • Test failed cette information vous indique la condition qui a bloqué l'affichage du module.
  • Result personal test il est toujours testé si vous avez indiqué une condition PHP même si le module n'est pas affiché pour une autre raison.

Téléchargement

  • Historique des versions
    • 25/12/2017 - version 1.7.1
      • ajout serveur update
      • suppression du pack avec les 2 modules
    • 22/06/2016 - version 1.7
      • ajout condition personnalisé en PHP
      • ajout information debug en frontend
      • les paramétres sont affichés dans l'ordre de test
      • optimisation du code
      • revision des libellés des paramétres conditions
    • 02/06/2016 - version 1.6
      • ajout paramètres conditions d'affichage
        (catégorie, enregistré, page accueil, type de page, mobile)
      • ajout insertion code libre dans le head
      • gestion Google font
    • 22/05/2016 - version 1.5
      • correction bug si plusieurs instances du modules
      • ajout rename path images pour version admin
      • parametres sur 3 onglets : HTML, CSS et JS
    • 13/05/2016 - version 1.4
      • Changement de nom.
        La principe de base est un module personnalisé qui permet de saisir du code PHP et d'inclure du CSS et JS dans le head
      • Création d'une version pour l'administration
      • possibilité de saisir du PHP dans le contenu du module
      • prise en charge plugin de contenu
      • l'éditeur est obligatoirement un éditeur de code: rokpad|emmet|codemirror|none
    • 15/04/2016
      • 1ère version sous le nom de LM-EmbedCode

Autres articles

Support

Pour partager vos questions et suggestions, c'est par là :

Vampire

Print Friendly and PDF