Tuto : Ajouter une image aux catégories de YourPHPAnnuaire

Trouvez de l'aide grâce à des tutoriels en image. Plusieurs thématiques liées à l'informatique sont disponibles. Vous pouvez proposer vos tutoriels à la suite de ce message.
Verrouillé
Avatar du membre
Keroin
Administrateur
Administrateur
Messages : 1786
Enregistré le : lundi, 27 mars 2006, 16:06
Configuration informatique : -
Tour :
Boitier Corsair 570X Crystal
CPU Intel Core i9-9900K
WaterCooling - Corsair H100i RGB Platinium
32 Go Corsair Vengeance RGB PRO DDR4
Asus ROG Maximus X HERO
CG : MSI Armor OC GTX1070 8 GO
Corsair k95 rgb platinum mécanique + Logitech MX master Pro (souris)
3x Samsung Syncmaster P2450H Eyefinity + 1 Dell UltraSharp U2913WM
Alimentation Corsair HX1200i

Portable :
Lenovo Thinkpad Yoga X1
Intel I7 8550U
16 Go RAM
.
NAS Synology DS415+
Configuration téléphonie : - Samsung Galaxy Note 10+
- Samsung Galaxy Note 8
- Samsung Galaxy S7 Edge
- Samsung Galaxy Note 3
- Samsung Galaxy Note 2
- HTC Sensation Z710e
- HTC Leo Touch HD 2
- HTC Blackstone Touch HD
Localisation : On the web again...What else...
Contact :

Tuto : Ajouter une image aux catégories de YourPHPAnnuaire

Message par Keroin »

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 Image) 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 :

Image

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 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 :

Image

Affichez ensuite le contenu de cette table :

Image

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.

Image

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 :

Image


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 : Image.

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.

Image

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>
et remplacer par la ligne suivante :

Code : Tout sélectionner

<img src="img/<?php echo $une_categorie['id']; ?>.gif" border="0" alt=""/>
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.
Pas de demande de support en MP ou par mail, le forum est là pour ça!
Règles du forum!
Pensez à personnaliser votre profil via le "panneau de l'utilisateur".

Verrouillé