Tuto : Ajouter une image aux catégories de YourPHPAnnuaire
Posté : mercredi, 14 février 2007, 19:26
Voici un tutoriel qui va vous permettre de modifier l'image par défaut des catégories mères de YourPHPAnnuaire pour qui nous avons déjà modifié la taille du champ description. Ce script sert à fabriquer des annuaires de sites Internet et est un addon du script Categorizator.
C'est ce script et son addon qui nous a permis de réaliser notre annuaire : Les Pages du Keroinsite.
La manipulation consistant à ajouter une image différente par catégorie mère est très simple, une seule ligne du script est à modifier dans le fichier index.php. La difficulté est plutôt située au niveau de l'identification de l'id de chacune de ces catégories mère que nous verrons donc plus longuement.
Pour résumer la manipulation, par défaut le script affiche la même icône (un dossier
) pour les catégories mères (celles qui apparaissent sur la page d'accueil) et les sous catégories (dans les pages internes quand on sélectionne une catégorie mère).
La manipulation suivante ne va concerner que les catégories mères mais il faut savoir que la même technique peut être appliquée au sous catégories.
1. La recherche des icônes :
La première étape est de sélectionner les icônes (ou images) que vous souhaitez obtenir à côté du nom de vos catégories mères comme sur l'image ci dessous :
Ces icônes ou images doivent être de la même taille et surtout, elles doivent être au format .gif.
Si vous devez convertir une image en .bmp, .jpg ou .png, vous pouvez utiliser n'importe quel éditeur d'image (nous vous recommandons photofiltre qui est gratuit et très simple à prendre en mains)
Plusieurs milliers d'icônes gratuites sont disponibles sur le site http://www.famfamfam.com/.
Une fois que vous disposez d'une image au format .gif pour chacune de vos catégories mères, l'étape suivante va être de déterminer l'id de chacune des catégories mères dans la base de données.
2. Identification des catégories mères dans la base de données :
Le principe de la modification du script que nous effectuons est le suivant, il nous faut déterminer à quel identifiant est raccordé chacune des catégories mères dans la base de données pour ensuite demander au script une requête du genre "affichage de telle catégorie mère = affichage de l'image dont le nom est l'id de cette catégorie mère).
Il nous faut donc nommer chacune des images comme l'identifiant de chacune des catégories.
EX : catégorie "enfants et adolescents" pour laquelle je souhaite que l'image
apparaisse.
=> je vais nommer l'image avec l'id de la catégorie qui est ici 114 donc mon image se nommera 114.gif.
Pour identifier l'id de chacune des catégories il va donc nous falloir les consulter dans la base de données.
Pour cela, ouvrez votre base données avec votre console d'administration de base de données, pour notre exemple, nous utilisons l'interface de Phpmyadmin.
Sélectionnez la table categories_annuaire :
Affichez ensuite le contenu de cette table :
Faites ensuite le tri par catégories mères plutôt que par id ce qui nous permettra d'identifier plus facilement les id des catégories mères.
Pour éviter d'avoir à afficher plusieurs pages, vous pouvez sélectionner l'affichage sur une seule page en mettant une valeur dépassant le nombre de catégories et sous-catégories disponibles dans votre annuaire comme ci-dessous :
Voilà, désormais les informations dont nous avons besoin sont affichées à l'écran.
Par exemple, comme vu plus haut, nous souhaitons que la rubrique "Enfants et adolescents" dispose de cette icône :.
Il faut déterminer dans la table à quelle id cette catégorie mère correspond dans la colonne "id_cat_mere".
Nous voyons ci-dessous que toutes les sous catégories de notre catégorie "Enfants et adolescents" disposent de la même id dans la colonne "id_cat_mere" qui est le 114.
Nous allons donc appeler notre image 114.gif.
Une fois que nous avons bien une image par catégorie mère de la même taille, au format .gif, et qu'elles sont toutes renommées en fonction de l'id de chaque catégorie mère, il faut uploader toutes ces images sur votre ftp dans le dossier "/img" déjà présent.
Une fois toutes les images uploadées, il ne reste plus qu'à activer la fonction en modifiant le script.
3. La modification du script :
Il n'y a qu'un seul fichier à modifier, il s'agit du fichier index.php
Aux alentours de la ligne 102, rechercher :
et remplacer par la ligne suivante :
Voilà c'est terminé, il ne vous reste plus qu'à faire F5 (en ayant vidé le cache de votre navigateur Internet) et toutes vos icônes vont apparaitre sur votre page d'accueil.
Si vous souhaitez commenter ou poser des questions sur ce tutoriel, vous pouvez le faire sur cette page.
C'est ce script et son addon qui nous a permis de réaliser notre annuaire : Les Pages du Keroinsite.
La manipulation consistant à ajouter une image différente par catégorie mère est très simple, une seule ligne du script est à modifier dans le fichier index.php. La difficulté est plutôt située au niveau de l'identification de l'id de chacune de ces catégories mère que nous verrons donc plus longuement.
Pour résumer la manipulation, par défaut le script affiche la même icône (un dossier
) pour les catégories mères (celles qui apparaissent sur la page d'accueil) et les sous catégories (dans les pages internes quand on sélectionne une catégorie mère).La manipulation suivante ne va concerner que les catégories mères mais il faut savoir que la même technique peut être appliquée au sous catégories.
1. La recherche des icônes :
La première étape est de sélectionner les icônes (ou images) que vous souhaitez obtenir à côté du nom de vos catégories mères comme sur l'image ci dessous :
Ces icônes ou images doivent être de la même taille et surtout, elles doivent être au format .gif.
Si vous devez convertir une image en .bmp, .jpg ou .png, vous pouvez utiliser n'importe quel éditeur d'image (nous vous recommandons photofiltre qui est gratuit et très simple à prendre en mains)
Plusieurs milliers d'icônes gratuites sont disponibles sur le site http://www.famfamfam.com/.
Une fois que vous disposez d'une image au format .gif pour chacune de vos catégories mères, l'étape suivante va être de déterminer l'id de chacune des catégories mères dans la base de données.
2. Identification des catégories mères dans la base de données :
Le principe de la modification du script que nous effectuons est le suivant, il nous faut déterminer à quel identifiant est raccordé chacune des catégories mères dans la base de données pour ensuite demander au script une requête du genre "affichage de telle catégorie mère = affichage de l'image dont le nom est l'id de cette catégorie mère).
Il nous faut donc nommer chacune des images comme l'identifiant de chacune des catégories.
EX : catégorie "enfants et adolescents" pour laquelle je souhaite que l'image
apparaisse.=> je vais nommer l'image avec l'id de la catégorie qui est ici 114 donc mon image se nommera 114.gif.
Pour identifier l'id de chacune des catégories il va donc nous falloir les consulter dans la base de données.
Pour cela, ouvrez votre base données avec votre console d'administration de base de données, pour notre exemple, nous utilisons l'interface de Phpmyadmin.
Sélectionnez la table categories_annuaire :
Affichez ensuite le contenu de cette table :
Faites ensuite le tri par catégories mères plutôt que par id ce qui nous permettra d'identifier plus facilement les id des catégories mères.
Pour éviter d'avoir à afficher plusieurs pages, vous pouvez sélectionner l'affichage sur une seule page en mettant une valeur dépassant le nombre de catégories et sous-catégories disponibles dans votre annuaire comme ci-dessous :
Voilà, désormais les informations dont nous avons besoin sont affichées à l'écran.
Par exemple, comme vu plus haut, nous souhaitons que la rubrique "Enfants et adolescents" dispose de cette icône :
.Il faut déterminer dans la table à quelle id cette catégorie mère correspond dans la colonne "id_cat_mere".
Nous voyons ci-dessous que toutes les sous catégories de notre catégorie "Enfants et adolescents" disposent de la même id dans la colonne "id_cat_mere" qui est le 114.
Nous allons donc appeler notre image 114.gif.
Une fois que nous avons bien une image par catégorie mère de la même taille, au format .gif, et qu'elles sont toutes renommées en fonction de l'id de chaque catégorie mère, il faut uploader toutes ces images sur votre ftp dans le dossier "/img" déjà présent.
Une fois toutes les images uploadées, il ne reste plus qu'à activer la fonction en modifiant le script.
3. La modification du script :
Il n'y a qu'un seul fichier à modifier, il s'agit du fichier index.php
Aux alentours de la ligne 102, rechercher :
Code : Tout sélectionner
<img src="img/dossier.gif" border=0>Code : Tout sélectionner
<img src="img/<?php echo $une_categorie['id']; ?>.gif" border="0" alt=""/>Si vous souhaitez commenter ou poser des questions sur ce tutoriel, vous pouvez le faire sur cette page.