[Résolu] Afficher des images par boucle PHP

Bonjour à tous,

J'ai actuellement une banque d'image dans un dossier pour mon site étant donner que je n'ai pour l'instant pas d'information sur l'utilisation ou non d'une base de donnée mes images sont stockées brut dans un dossier j'aimerais savoir si pour les afficher comme j'en ai une petite vingtaine je ne pourrais pas:

-Renommer toutes mes images en image_1, image_2 etc...
- Faire un compteur PHP dans une boucle
- Et afficher les images comme ça

 <img src href="image_ <!--le compteur-->.jpeg"

Je ne suis pas sur de la possibilité et du sémantiquement correct de ma démarche
Modifié par Tryno (06 Jun 2018 - 08:32)

Bonjour,
C'est une mauvaise idée en terme SEO, où le titre du fichier image est une indication forte !

ton site tourne avec un CMS ou tu montes un truc indépendant ?

Bonjour,

De prime abord il peut-être tentant de vouloir automatiser la génération de lien image en Php. C'est tout à fait faisable et même facile à implémenter surtout si les noms de fichier sont linéarisés.

Toutefois vous devrez vous heurter à une difficulté qui n'est pas insurmontable mais demande de bien penser le truc avant de se lancer tête baissée dans le codage de la boucle.

En effet, je suppose que chaque image devra au minima être accompagnée d'un contenu à insérer dans l'attribut ALT de chacune d'elle voire peut-être même d'un TITLE en sus.

C'est vrai que via une base de donnée ce serait idéal à gérer mais vous pouvez vous en sortir même si vous n'utilisez que des fichiers.

Vous pouvez par exemple utiliser un fichier JSON qui contiendra pour chaque image ces attributs. Un fichier INI ferait aussi très bien le travail et un XML serait un must mais compliquerait, à mon sens, la tâche.

Je verrais bien un truc dans le genre:
{'image_01'} : {'alt':'contenu du ALT 01', 'title':'contenu du TITLE 01'},
{'image_02'} : {'alt':'contenu du ALT 02', 'title':'contenu du TITLE 02'}...

Je vous vois venir avec vos gros sabots, et comptez probablement vous baser sur la position des données pour les rattacher aux images (datas en position 0 pour image 0, datas en position 1 pour image 1 etc). Et c'est là que serait votre erreur !
Que se passera-t-il à l'image 100 ? Et si vous en supprimiez une, devrez-vous tout réindexer ? Un joyeux bordel !

Non, gardez des nom de fichiers en rapport avec ce qu'elles représentent afin de faciliter leur référencement auprès des banques d'images et dans votre fichier de donnée partez plutôt sur une structure ainsi:
{'cheval-noir'}:{'alt':'cheval noir d\'amérique du nord', 'title':'une bête de course taillée pour la compétition'},
{'tigre-bengal'}:{'alt':'tigre du Bengal', 'title': 'ce carnivore est la terreur des populations locales'}...
Ceci pour cheval-noir.jpeg et tigre-bengal.jpeg

Côté php, votre boucle sera tout aussi facile à paramétrer. Vous allez récupérer dans un array le contenu de votre fichier JSON. Une boucle sur cet array vous permettra de générer de beau et zolis liens image.


Aller, à vous de jouer !
Modifié par Greg_Lumiere (04 Jun 2018 - 14:33)

CAMEO172 a écrit :
Bonjour,
C'est une mauvaise idée en terme SEO, où le titre du fichier image est une indication forte !

ton site tourne avec un CMS ou tu montes un truc indépendant ?

Il tourne seul aucun cms en vue

@Greg_Lumiere


Pour résumé ,

Je créer un ficher JSON avec les noms et attribut des différentes images

Fais une boucle array en liant titre d'image avec l'image qui devra s'afficher

C'est ça ou j'ai louper une étape en lisant ?

J'ai l'impression que vous voyez le principe.

Au minimum, ça donnerait:

$directory = '/images/';
$data = json_decode($directory.'index.json');

foreach ($data as $key => $values) {
  echo '<img src="'.$directory.$key.'.jpeg" alt="'.$values['alt'].'" title="'.$values['title'].'">;
}

C'est bien sûr un minima car ces points méritent attention:
- il faut tester si effectivement l'image existe
- si vous souhaitez ajouter une légende, englober vos images dans un conteneur (picture par ex.)
- traiter les cas où il manquerait une donnée au JSON (pas de ALT ou de TITLE ou autre)
- prévoir un formulaire pour ajouter/supprimer/modifier facilement une image et/ou ses caractéristiques


Bref, constatez comme il n'existe pas d'idée simple ; toutes méritent réflexion.
Modifié par Greg_Lumiere (04 Jun 2018 - 14:48)

Au passage, pensez à bien définir votre convention de nommage pour les noms de fichier, ça aide !

Pour la convention de nommage c'est bon j'ai pris le pli de pas mettre de majuscule et pour chaque espace le remplacer par "_"

Pour l'étape la j'hésite car en cours pour gérer notre base de donnée on créer directement une solution logiciel cependant on travailler sur une base de donnée et sur le site il n'y a pas de système de connexion.
Modifié par Tryno (04 Jun 2018 - 14:55)

En quoi un fichier au format XML serait un must par rapport à JSON

C'est une antiquité verbeuse

Une meilleure alternative est de coller les descriptions des images dans un fichier .htaccess.
Cela permet d'afficher la description quand on affiche directement le contenu du dossier d'images

Plutôt que de parcourir la liste des descriptions, autant utiliser glob :
https://gist.github.com/bazooka07/026e98499e196ca727ca6602276be66f

Démo online :
https://kazimentou.fr/divers/gallery/
Modifié par bazooka07 (04 Jun 2018 - 16:59)

bazooka07 a écrit :
En quoi un fichier au format XML serait un must par rapport à JSON

J'ai en tête une "fiche d'identité" de l'image en XML dans laquelle on piocherait les informations nécessaires à l'élaboration des liens images par exemple. L'idée étant de rendre extensible la "fonction".

bazooka07 a écrit :
C'est une antiquité verbeuse

Ce qui résume de mon aversion pour ce langage
Néanmoins il faut l'avouer, c'est beaucoup moins rigide que le JSON. Combien en voit-ont dont le JSON foire à cause d'une erreur de syntaxe ?!

bazooka07 a écrit :
Une meilleure alternative est de coller les descriptions des images dans un fichier .htaccess.

Il me paraît fort dangereux de trop manipuler les fichiers de configuration serveur. Un problème de caractère ou de syntaxe et bam, c'est la catastrophe !

bazooka07 a écrit :
Démo online :
https://kazimentou.fr/divers/gallery/[/url

Et vous gérez comment si votre texte alternatif et votre légende doivent-être différents, votre title ou toute autre adjonction ?

bazooka07 a écrit :
Plutôt que de parcourir la liste des descriptions, autant utiliser glob

Au moins on est sûr de travailler sur des fichiers qui existent vraiment mais...


Loin de moi l'idée de vouloir discréditer la méthode de Bazooka mais ne suis pas convaincu et à titre personnel je ne m'aventurerais pas vers cette voie. A vous, Tryno, de voir ce qui vous séduit le plus et correspond le plus à votre besoin.


Intéressante cette conversation qui affiche des axes bien différents à une problématique posée. J'ai hâte d'en lire plus.


@Bazooka07: par curiosité et histoire d'être moins bête ce soir que je ne l'étais ce matin, comment faites-vous pour associer un fichier et sa description via un htaccess ?
Modifié par Greg_Lumiere (04 Jun 2018 - 18:25)

Il s'agit de fichier .htaccess situé dans un dossier du site Web. Il n'altère en rien la configuration et ne compromet een rien le serveur Apache.
La directive "AddDescription" permet de rattacher une description à un fichier. C'est écrit dans le manuel :
https://httpd.apache.org/docs/2.4/fr/mod/mod_autoindex.html#adddescription
Il y a d'autres directives à découvrir comme le choix du charset, l'entête et le pied de page, une feuille de style personnalisée....
S'il y a une erreur de syntaxe, le fichier ne sera pas pris en compte. Il faudra alors consulter les logs ou Madame Irma et sa boule de cristal
Le fichier .htaccess utilisé est sur Github.

Autre intérêt , on n'a pas recours aux librairies JSON et XML. Elles ne sont pas compilées par défaut avec Apache.

AMHA, il y a plus de risque à rédiger un fichier XML mal ficelé qu'avec JSON, compte-tenu de son verbillage. Rappelons que XML sorti avant que Nescape ne publie Javascript et qu'avec lui on a plus de chance de parler JSON que XML

Que la nuit vous soit fructeuse après lecture de la documentation

bazooka07 a écrit :
En quoi un fichier au format XML serait un must par rapport à JSON
C'est une antiquité verbeuse
Une meilleure alternative est de coller les descriptions des images dans un fichier .htaccess.
Cela permet d'afficher la description quand on affiche directement le contenu du dossier d'images
Plutôt que de parcourir la liste des descriptions, autant utiliser glob :
https://gist.github.com/bazooka07/026e98499e196ca727ca6602276be66f
Démo online :
https://kazimentou.fr/divers/gallery/

JSon = structure de données
XML = langage (et ses capacités de vérification / validation de type XST, formatage XLS / XSLT, recherche XPath, etc.)
Comparer les deux est un non sens car ils ne s'utilisent pas pour satisfaire les mêmes besoins.
En milieu professionnel ce sera plutôt JSon pour récupérer un résultat Rest et XML pour paramétrer un environnement.
L'utilisation d'un flux XML pour décrire les images est pertinent en ce sens qu'on aura peut-être à s'assurer que le flux est "bien formé" et il existe des outils pour cela. De plus, la mise en forme du code HTML produit pourra être déléguée à une feuille XSLT au lieu du PHP, ce qui rend l'ensemble réutilisable par ailleurs.
Un article intéressant sur le sujet XML vs JSON (en anglais).
Attention par ailleurs à ne pas trop déléguer vers le fichier .htaccess car celui-ci est lu systématiquement lors de l'accès aux ressources d'un répertoire et il est, à ce que j'ai pu lire jusqu'à présent, plutôt conseillé de limiter sa taille et éviter qu'il ne soit lu / analysé.
En outre, ce processus de description devient caduc si le serveur est sous nginx (ou alors prévoir les deux versions).
Modifié par sepecat (04 Jun 2018 - 21:12)

Tryno a écrit :
Pour la convention de nommage c'est bon j'ai pris le pli de pas mettre de majuscule et pour chaque espace le remplacer par "_"

Petite précision niveau SEO, il semble qu'il soit plutôt conseillé de préférer le caractère "-" par rapport au caractère "_" dans les noms de fichiers.

sepecat a écrit :

L'utilisation d'un flux XML pour décrire les images est pertinent en ce sens qu'on aura peut-être à s'assurer que le flux est "bien formé" et il existe des outils pour cela. De plus, la mise en forme du code HTML produit pourra être déléguée à une feuille XSLT au lieu du PHP, ce qui rend l'ensemble réutilisable par ailleurs.

C'est clair. Tous ceux qui ont appris à écrire le HTML avec Frontpage maitrisent à la perfection l'écriture de feuilles de transformation XSLT. Juste que le suivi des bugs de Java dans les forums d'un éditeur bien connu leur prend beaucoup de temps.
De plus, ils ont besoin d'une longue période d'inactivité sur leur PC pour que le système d'exploitation couramment employé puisse installer les mise à jour.

sepecat a écrit :

Un article intéressant sur le sujet XML vs JSON (en anglais).

Vieil article de 2015 qui suscite encore la polémique aujourd'hui après 160 commentaires.
Je le lirai quand j'aurai le temps, ce qui peut demander une éternité.

sepecat a écrit :

Attention par ailleurs à ne pas trop déléguer vers le fichier .htaccess car celui-ci est lu systématiquement lors de l'accès aux ressources d'un répertoire et il est, à ce que j'ai pu lire jusqu'à présent, plutôt conseillé de limiter sa taille et éviter qu'il ne soit lu / analysé.
En outre, ce processus de description devient caduc si le serveur est sous nginx (ou alors prévoir les deux versions).

.htaccess n'est rien d'autre qu'un fichier de texte ( flat file ) au format 2sv (Space Separated Values ).
On se moque donc éperdument du serveur HTTP qu'il y a derrière.
S'il y a un indien dans l'affaire, le listing des fichiers d'un dossier sera simplement joliment imprimé (pretty print)

Modifié par bazooka07 (04 Jun 2018 - 23:58)

bazooka07 a écrit :
.htaccess n'est rien d'autre qu'un fichier de texte ( flat file ) au format 2sv (Space Separated Values ).
On se moque donc éperdument du serveur HTTP qu'il y a derrière.

Il ne s'agit pas d'un problème de format. Les fichiers .htaccess ne sont simplement pas reconnus par Nginx.

Anymah a écrit :


Il ne s'agit pas d'un problème de format. Les fichiers .htaccess ne sont simplement pas reconnus par Nginx.

J'entends bien. J'ai déjà installé et configuré Nginx sur un Odroid et un Orange Pi ( équivalents du célèbre RaspberryPi ).
Dans l'exemple de code, je ne passe pas par le serveur HTTP pour lire le fichier .htaccess. Donc Apache ou Nginx on s'en moque

P.S. Il est possible de prendre en compte les fichiers .htaccess sur Nginx, mais juste pour éviter le téléchargement de ces fichiers. Il n'y a pas de notions de fichiers de configuration situés dans l'arborescence du site Web contrairement à Apache. Ce sont juste des fichiers ordinaires.

Concernant le SEO pour l'instant c'est absolument pas ma priorité vu les demandes foireuses que l'on me fait.

Ayant déjà bien attaquer la mise en place d'un boucle et d'un fichier json je pense partir la dessus Espérons que l'excuse du fichier difficilement modifiable par un tierce de leur administration ne ressorte pas sinon je vois pas trop comment tous simplifié a part avec un logiciel externe ou des systèmes de connexion avec une base de donnée

Sinon je me cantonne au ctrl + c et ctrl + v en leur gardant un commentaire exemple

C'est moi ou je créer des polémique avec mes sujets

Pour vérifier que ton fichier JSON est correctement formé, tu peux l'ouvrir directement dans ton navigateur, si besoin en installant un plugin.

Si le fichier dot être modifié par une tierce personne, genre Mme Michu, il y a de grandes chances que tu sois obligé de créer une page d'administration pour remplir ce fichier JSON.

Si tu veux échapper à cela, il faut rester sur des fichiers de texte plat comme .htaccess. Tu peux remplacer ce dernier par un fichier au format CSV et le remplir avec un tableur. Il existe d'ailleurs des fonctions PHP pour manipuler les fichiers avec ce format.

T'inquiètes pas pour les polémiques. Certains ont l'esprit bien formatté.

@bazooka07: Merci mais tu vas rire

On m'a dit Maintenant que tu as bien bosser à la main tu vas utiliser wordpress et voila un thème préfait utiliser la db que je vais te mettre a dispo

2 semaines presque de développement dans le vent

Du coup plus qu'a prendre en main wordpress

@Bazooka07: J'ai jeté un bref coup d’œil sur le lien de la documentation qui révèle un aspect que je ne connaissais pas. C'est vrai que concernant le risque lié à la configuration du serveur celui-ci est réduit à néant dans la mesure où le fichier est compartimenté au dossier auquel il appartient. Il peut-être un bon palliatif d'utiliser ces directives dans certains cas ponctuels mais mon intime conviction est que pour une tâche de grande envergure ceci ne m'apparaît pas être des plus adéquats. J'imagine le cas, pour rester dans l'esprit du sujet de base, où un tiers demande une mini-galerie vite faite pour voir un peu ce que ça donnerait (genre 15-20 images à traiter).
Toutefois, et je n'ai vu mots dans la doc, vous n'avez pas répondu au cas où le besoin irait au delà d'une unique information liée à l'image et sur ce point ma curiosité reste entière.

@Tryno à propos de la manipulation de données Json:
Il n'est pas compliqué de mettre en place un formulaire pour manipuler des données JSON. Dans les faits un formulaire vous permet de récupérer un tableau (array). Toute opération est la même quelques soit la destination de ces informations (bdd, Json, ini etc). Ensuite, vous faites faire à Php le travail d'enregistrement dans le fichier via json_encode et c'est lui qui s'occupe de correctement formater les données. Certes à la main ça reste faisable, si tant est que le niveau d'imbrication soit limité sinon c'est vite le capharnaüm.

@Tryno à propos du dernier message:
Hé ben non ! Ce ne sont pas 2 semaines dans le vent. Je pense que vous avez énormément apprit. C'est le prix du perfectionnement. Si vous saviez le nombre de fois où je pourrais me dire ça ?!
Pour la petite histoire, il y a quelques temps déjà je démarre mon week-end avec bille en tête sur un projet. En me levant le samedi je n'avais que cette idée en tête et dès huit heure je m'attela à la tâche. Papier-stylo furent mes compagnons pour quelques heures avant de me mettre à martyriser sauvagement mon clavier par l'appui successif et continu sur ses touches. Il est à savoir que je code tel un homme des cavernes. Nul assistant et nul autre outil que mon inséparable moitié: mon éditeur de texte préféré. Le seul automatisme en place n'est que la coordination entre mes membres et mes sens.
L'exercice dure jusqu'au soir, je ne m'était attribué qu'une dizaine de minute pour faire taire ma faim dont le cris strident m'était devenu insoutenable. Le soir venu, je me résigna à laisser en plan mon fidèle compagnon sur les quelques notes d'une partition inachevée prétextant une fatigue devenue impossible à contenir. J'envahis alors le monde de Morphée de mes lignes de codes ; ces signes cabalistiques occupaient mon esprit et tournoyaient dans cet univers de l'impalpable.
Au réveil, j'étais frais comme un gardon, prêt à en découdre avec ces fonctionnalités qui, à ce stade, appartenaient encore à mon imaginaire. Une lampée, puis deux de café plus tard, je me remis sur l'affaire ne lâchant plus le mors, non pas jusqu'à ce que mort s'en suive mais au moins jusqu'à ce que ce tout soit rendu opérationnel et exploitable. Un repas de sauté c'est toujours du temps de gagné ! C'est peut-être grâce à cela que le soir revenu (mais quel pot de colle le soir, à revenir ainsi tous les jours serait-il amoureux ?) ; le soir revenu je pus enfin m'exprimer d'un grand eurêka ! C'était fait ! La partie avait été jouée et eu trainé en longueur mais je pus la finir et en sortir grand vainqueur. Elle était là, elle était née, ma fonctionnalité... heu... fonctionnait.
Je me mis alors à la faire travailler comme un força, l'éprouvant de tous mes essais, même les plus malsains. La mise à l'épreuve fut douloureuse mais elle accoucha sans broncher. Le résultat était là et il ne me restait plus qu'à siroter mon breuvage au houblon, cette récompense tant méritée qui laisse le temps à l'auto-satisfaction.
Mais... Attention car ce "mais" est dangereux. Il en a poussé plus d'un et me laisserais-je prendre par son terrible dessin qu'il agite tel un couperet au dessus de ma tête ? La réponse ne tarda pas. Par une ritournelle de l'esprit, il réussi malgré moi à me convaincre que même si tout ce que j'avais fait fonctionnait, il existait probablement méthode plus adaptée, plus concise et plus performante pour un résultat similaire voire, peut-être mieux.
Le choc fut difficile à encaisser, et je finis par me résigner à supprimer d'une touche tous les efforts de ce week-end.
C'était, romancée, une tribulation réelle du pauvre fou que je suis qui, par cette expérience, a tiré grandes leçons que nul professeur n'aurait pus inculquer sans heurt, sans cris, sans larmes.
Modifié par Greg_Lumiere (05 Jun 2018 - 16:10)