Templates
- Détails
- Catégorie : Templates
Aujourd'hui nous allons aborder comment, dans Joomla 3, il est possible dans les résultats de la recherche classique, d'intégrer l'image associée à article que vous avez créé.
Comme nous ne voulons pas modifier les fichiers d'origine fournies par Joomla, dans un premier temps, faisons un héritage du composant com_search via l'outil des templates de Joomla.
Lorsque votre héritage est fait, il se retrouve dans un sous dossier de votre template, portant le même nom, com_search, mais cette fois-ci dans le répertoire de votre template par défaut. Vous retrouverez donc dans ce répertoire l'ensemble des fichiers qui sont d'origine fournies avec le composant de recherche.
Avec votre éditeur de texte favoris, ouvrez le fichier default_results.php et rendez-vous autour de la ligne 20. Vous retrouverez à cet endroit une ligne <a href=....
Placez-vous sous cette ligne, et intégrer le code indiqué lignes 27 à 35 de ma copie d'écran, qui va récupérer dans un premier temps l'article courant au travers de l'objet $article.
Cet article est en stocké dans un objet éponyme ligne 27, vous pourrez ensuite récupérer l'identifiant de cet article, ainsi que son slug afin de pouvoir en extraire l'ensemble des images qui lui sont associés.
Ces images sont récupérées dans un tableau images (ligne 28), au travers de la fonction Json_decode dans le but est de convertir une chaîne de caractère du format JSON en objet.
Dans cet objet, vous allez pouvoir extraire l'ensemble des images au travers de la propriété $article->images qui va vous retourner un objet. Dans cet objet, nous avons extraire l'image d'introduction (d'où $images->image_intro), image dans laquelle vous allez pouvoir placer, au moment de l'édition de vos articles, une image liée à votre article. Cette propriété est une propriété de base de Joomla (voir ma première capture d'écran).
Afin d'afficher votre image, puisque nous sommes dans le fichier de présentation, vous n'avez plus qu'à "entourer" cette propriété du tag HTML vous permettant d'afficher une image.
echo '<img src="'.$images->image_intro.'">';
Et voilà le résultat est déjà terminé. Je n'ai pas ici appliqué de class CSS pour la mise en forme des résultats de recherche mais je ne peux que vous encourager à le faire. Sous Protostar, vous pouvez stocker le style dans le fichier custom.css de votre template
Mais nous n'allons pas en rester là, car peut être voudriez vous récupérer d'autres informations. Comme vous pouve le voir en commentaires verts sur ma copie d'écran, vous pouvez retourner dans un but de debugg, l'ensemble de l'objet image via un print_r car peu être êtes-vous interessé pour travailler avec l'une au l'autre des propriétés retournées suivantes :
-
stdClass Object ( [image_intro] => images/tortue/matortue.jpg [float_intro] => [image_intro_alt] => [image_intro_caption] => [image_fulltext] => [float_fulltext] => [image_fulltext_alt] => [image_fulltext_caption] => )
Il ne vous reste plus qu'à retoucher la mise en page comme bon vous semble.
Add a comment- Détails
- Catégorie : Templates
Toujours dans le cadre de mon projet professionnel sur Joomla, je suis amené à créer de nouvelles positions dans la template protostar, car je n'en ai pas assez !
J'entends d'ici les mauvaises langues me disant que je vais trop loin sur le nombre de positions sous Protostar, mais j'avoue que je suis un tout petit peu limité par certaines positions dans protostar, mais aussi (et surtout ! ) dans la template que vous avez sous les yeux sur laquelle est basé ce présent site que vous êtes en train de lire : Helium C'est la raison pour laquelle, à l'aide de personnes d'un groupe local de ma région Joomla sur Facebook, je me suis mis en quête de la création de nouvelles positions dans une template.
Cependant, n'ayant que protostar sous la main sur mon serveur web local de développement personnel, j'ai fait cette manipulation sous protostar.
C'est quoi une idée ?
Dans cet article, vous allez apprendre comment éditer les bons fichiers de Protostar pour créer de nouvelles positions dans une template. Je ne sais jamais si template est masculin ou féminin... alors pordonnez moi si je change régulièrement de déterminant.
Alors comment faut-il faire ?
Comme l'idée de cet article est bel et bien d'en faire un tutoriel, nous n'allons pas tout recréer d'un coup mais simplement rajouter une position à une template existante.
La démarche est relativement simple, une fois que l'on sait comment cela fonctionne. Il faut déjà voir et comprendre comment un modèle (une template) de présentation est constitué(e).
Avant de faire toutes vos modifications, bien entendu, faites une sauvegarde des fichiers que vous allez modifier.
- Dans un premier temps, rendez-vous dans votre répertoire du modèle protostar, et éviter le fichier index.php. Nous allons désormais ajouter une position. Si vous parcourez le fichier que vous êtes en train d'éditer, vous trouverez des balise jdoc:include. Ainsi, sélectionnez une ligne contenant cette balise, dupliquez-la ou copier collez là à l'endroit où vous souhaitez une nouvelle position. C'est dans ce fichier que l'on décrit où placer ses (nouvelles) positions.
- Dans le code que vous avez collé, il faut impérativement renommer la propriété name par un nom unique qui permettra à l'utilisateur dans l'interface d'administration de Joomla, de trouver de manière unique et sans ambiguïté, la nouvelle position. Vous devriez donc avoir ainsi un code de ce type :
<jdoc:include type ="module" name="manouvelleposition" style="none" />
Veuillez remarquer au passage que comme nous sommes bien en XML, il faut bien penser à fermer les balises à l'aide du /> en fin de ligne. Enregistrez désormais ce fichier. - Dans un deuxième temps, édité le fichier templateDetails.xml. dans ce fichier, rajoutez la description des positions que vous avez créées pour lmes retrouver dans la liste déroulanet dans la console d'admin de Joomla. Vous pouvez donc rajouter ces informations sous la forme de la ligne suivante :
<position>position-102</position>
Vous aurez je l'espère compris, le chiffre derrière le tiret correspond à un identifiant. J'ai mis 102 car j'ai cherché à m'éloigner des informations déjà créées sans regarder la dernière position créée, ce qui m'a facilité la tache dans la console d'admin de Joomla pour trouver cette position facilement., Mais je vous assure qu'il vaut mieux regarder le dernier index existant afin de l'incrémenter d'une position. L'idée est bien d'avoir un nom unique de la position.
Enfin, et c'est là que j'ai actuellement un doute, j'ai créé sous cette position une div afin de pouvoir spécifier une classe et/ou un id pour pouvoir appliquer une feuille de style spécifique à ce module. Je le dis haut et fort, ce n'est peut-être pas la meilleure méthode (d'encapsuler ça dans un div) mais elle a le mérite de fonctionner et permet surtout de spécifier une classe CSS ! Cependant, il existe peut êre une possibilité de spécifier une classe directement dans le fichier XML mais je n'ai rien trouvé à ce propos pour le moment.
Ainsi, je peux désormais appliquer un style à la DIV de ma template que je viens de créer. Voici donc un exemple de ce que j'ai créé pour avoir une nouvelle position dans ma template protostar :
<div id="position-100" class="ma-positionperso">
<jdoc:include type ="modules" name="position-100" style="none" />
</div>
<jdoc:include type ="modules" name="position-100" style="none" />
</div>
Désormais, en éditant un module dans l'interface d'administration de Joomla, vous allez retrouver cette nouvelle position dans la liste déroulante position du module
En voila encore un mystère Joomlesque levé !
Add a comment
Mon Github
slhuilli1's GitHub repositories
-
titrearticle
Remplace affiche le titre de l'article.
-
provisoire
Lister des documents marqués comme "provisioires"
-
cssmodal
Plugin Joomla pour lancer une fenetre modale
-
modalpdf
No description
-
demandeajoutdoc
This pligin add a mailto: link info Regular Labs Tabs (for intranet whithout spam)
-
natif
Ce plugin prend en compte ou pas l'affichage des fichiers natifs (word/excel) en sus de liens vers des PDF
-
nouveau
Un plugin joomla qui affiche une mention "nouveau" sur un lien hypertext avannt une date butoire - A Joomla plugin that displays a “new” mention on a hyperlink before a deadline
-
lastdocsupdates
Plugin d'affichage des derniers fichiers modifiés dans un répertoire donné
-
noteitv2
No description
-
NoCache
No description
-
addIdToHn
Ce plugin ajoute automatiquement un id calculé (compté) aux balises Hn
-
ReadFirefoxBookmarks
reading Firefox bookmak with PHP using SQLite library
-
externalcssandlib
Add external CSS and javascript libraries in your projets
-
qr
Ce plugins affiche une liste de questions reponses - This plugin for Joomla show a list of questions, when clicked, the answer is showed
-
dataarchives
Joomla plugin - Ajour une class sur un lien si ce lien possede data-archives="oui" - Add a class on a link if this link has data-archives="oui"
-
attachments
No description
-
mod_vacances
Ce module Joomla affiche les congés français. Basé sur des OpenDatas du minitère de l'éducation nationale
-
noteit
Ce plugin permet l'ajout de Post it (format graphique) dans un article
-
nbonlineusers
No description
-
removehtmlcomment
Delete all html comment in a joomla article
-
rechercheget
Recherche en GET dans Joomla Content
-
formatfichier
Synrthese of articles' Joomla content
-
workflow_steps
A simple HTML/CSS code to show where the step of workflow is
-
mod_entjca
Module listants les entreprises créées dans le département de votre choix.
-
definitions
Ce plugin permet l'affichage de termes et leurs définition
-
mod_javascript
Module d'intégration de bibliothèque javascript dans Joomla