Description
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)
- les lignes débutant par un point-virgule sont des commentaires NOUVEAU
Installation
Le module existe en 2 versions: frontend et backend. Vous téléchargez et installez les versions dont vous avez besoin.
Par défaut, les modules utilisent le premier éditeur trouvé dans cette liste : 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="none|codemirror"
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.
Note : toutes les copies d'écran sont réalisées sous Joomla avec la version site du module
Module (Conditions d'affichage)
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.
- Groupe utilisateurs : permets de limiter facilement l'affichage du module aux personnes d'un groupe (version 2).
- Utilisateur(s) : permets de limiter facilement l'affichage à une ou plusieurs personnes (version 2 admin).
- 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.
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?>
- Plugin de contenu : l'activer si vous utilisez des plugins dans le contenu, tel que
{loadposition meteo}
. - Div autour contenu : par défaut, le contenu est dans une balise div qui permet d'ajouter le 'Suffixe de classe CSS' des 'paramètres avancés'.
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>
Onglet Javascript
- Fichiers JS HEAD : 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 HEAD : code Javascript à insérer dans le HEAD.
note: saisir uniquement le code sans les balises <script> - Fichiers JS BODY : le ou les fichiers JS à charger dans le BODY 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 BODY : code Javascript à insérer dans le BODY.
note: saisir uniquement le code sans les balises <script>
Onglet Code version site uniquement
- Code HEAD : 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 - Code BODY : code à insérer à la position du module dans le BODY.
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;}
il est aussi possible de gérer totalement les polices sans avoir à les assigner à 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
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
- mod_lmcustom-site_v5.0.1.zip (16.92 ko) téléchargé 29 fois
- mod_lmcustom-site_v2.7.5.zip (20.07 ko) téléchargé 50 fois
Support
Pour partager vos questions et suggestions, c'est par là :