Suite à mon dernier article que j'ai posté cette semaine sur mon site, je me suis posé la question de savoir comment encore mieux associer Joomla avec le mapping d'image. Même si la technique, comme je le disais, reste assez ancienne, il s'avère que l'on peut faire des choses relativement sympathiques.
Dans cet article, je vais vous montrer ce que j'ai réussi à faire en associant d'une part un article Joomla Content, mais aussi le mapping d'image, le tout saupoudré de l'excellentissime composant édité par regualar lab : modal. Si vous ne connaissez pas cet outil, je rappelle qu'il sert à fabriquer de manière relativement simple et sans codage JavaScript, une fenêtre modale sur un hyperlien votre page Web. Pour plus d'explications, je ne peux que vous conseiller la lecture de son mode d'emploi et de sa présentation.
Mais revenons à notre sujet. Comme vous le voyez, je vous propose une image d'une personne, personne fictive car l'image a été générée depuis une intelligence artificielle de création de visage, et sur cette image j'ai fait pointer deux fenêtres modales sur les yeux de la personne. En cliquant sur chacun d'entre eux, vous pouvez vous rendre vers une page web que vous désirez point bien entendu, cela fonctionne très bien sur des liens internes de votre propre site web, toutefois, j'ai remarqué que sur des liens externes comme Facebook, l'éditeur Facebook interdit ce genre de lien. Ne me demandez pas pourquoi je n'en ai aucune idée.
Alors ce visage artificiel a t il de jolis yeux ? Cliquez dessus (ses yeux) pour voir
Mais alors, comment ai-je pu faire ?
Après avoir généré mon image, sur le site https://generated.photos/, j'ai obtenu le visage d'une personne. A partir de l'accueil j'ai commencé à travailler mon mapping. Ce mapping, je l'ai travaillé avec utilitaire graphique intitulé Gimp, le pendant libre de Photoshop.
- Ouvrez votre image dans GIMP
- Puis au travers du menu images sous menu web
- Choisissez images cliquable web.
- Une fenêtre s'affiche, vous pouvez au moyen des outils en bleu, définir chacune des zones que vous souhaitez mapper
- pour chacune d'entre elles stipuler une URL particulière. Simple.
Alors, comment à partir de ceci, pourquoi faut-il mettre une URL alors que je souhaite avec Joomla, afficher une fenêtre modale ? Et la réponse elle est simple, le fait de mettre une URL va simplement vous permettre, dans votre code, de retrouver vos petits quand nous passerons à la phase de la fenêtre modale. C'est simplement ca
Une fois la définition de vos zones terminées, rendez-vous dans le menu Affichage puis sélectionner le sous-menu source, vous allez avoir l'intégralité de la source du mapping de votre image.
Notez toutefois, une fois après avoir copié le code et collé dans le Joomla, que vous devez bien entendu remplacer l'attribut SRC de la balise img avec la bonne URL de votre bonne image désormais déposée sur votre serveur. En effet nous ne sommes plus en local il faut donc adapter le code.
Désormais, créons un nouvel article dans Joomla. Je ne reviens pas sur la création d'un article dans Joomla, mais si jamais vous avez activé votre éditeur dans le mode wysiwyg dans vorte CMS favoris, passez tout de suite en mode code afin de coller le code que GIMP vous a généré et enregistrez votre article.
Maintenant, nous avons la possibilité de mettre en place nos fenêtres modales par rapport au zones que nous avons défini dans GIMP en terme de mapping d'image. Je reviens rapidement sur l'utilisation de la fenêtre modale avec le composant que j'ai précité en début de cet article, une fenêtre modale, si nous analysons pas le code avec les short code. Le souci, c'est que dans notre article, il n'est pas forcément simple d'intégrer des shortcode modal avec le ou les zones de mapping de mon image. C'est la raison pour laquelle, après avoir déjà créé une image et étudié le code qui a été généré par Gimp, j'en ai ressorti les informations intéressantes. Notons notamment que pour avoir une fenêtre modale, il suffit de spécifier une classe particulière, et de donner des informations de type data dans la balise.
Je ne peux plus vous conseiller d'analyser le code afin d'en faire des copier-coller. Si vous regardez le code de mon exemple, vous trouverez une zone area avec les coordonnées spécifiées et générée par Gimp, dans cette zone nous lui disons que la forme de la zone est un cercle et nous pointons sur une URL particulière. Nous passons aussi en paramètre une classe justement pour la fenêtre modale avec des informations de type data qui permettent de spécifier des spécifications de la fenêtre.
Je ne rentre pas dans ce détail, c'est l'outil modals qui s'occupe de tout ça.
Code implémenté (commentaire sur les zone souligné en pointillés) :
<p><img src="/images/fakeface.jpg" alt="fakeface" usemap="#map" width="512" height="512" style="display: block; margin-left: auto; margin-right: auto;" /></p>
<p><map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:Sébastien LHUILLIER-->
<area
coords="189,247,53" 189,247,53
data-modal-iframe="true" data-modal-inner-width="95%" data-modal-inner-height="95%" data-modal-class-name="no_title"
/>
<area coords="321,252,47" shape="circle" href="https://sebastien-lhuillier.com/index.php/ffmpeg/ffmpeg-par-articles" /> <area coords="199,354,230,345,269,350,308,351,327,359,305,388,274,398,240,394,218,384,201,364" shape="poly" href="#bouche" /> </map></p>