Livre blanc sur les fichiers des photos des produits dans PrestaShop

Ou trouver les photos des produits de PrestaShop ?

Prenons un produit quelconque dont l'identifiant est le numéro 68.

Supposons que vous lui associez deux photos, C’est MYSQL qui va incrémenter un compteur automatique (un identifiant automatique) de la table ps_image (en prenant l'hypothèse que le préfix choisi pour cette base de données est la valeur ps_ par défaut. A adpater à votre cas de figure), donnant deux identifiants (ID) d’images, par exemple 513 et 514.

Dans cette table ps_image de la base sont donc ajoutées deux lignes contenant l’id du produit (88) et l’id des images (513 et 514). C’est grâce à cette info que PrestaShop peut savoir quelles sont les fichiers à aller chercher dans le dossier /img/p pour chaque produit.

Cette table contiendra deux autres infos :

-laquelle des deux photos est la photo de couverture (en principe la 1re ajoutée, donc la 513), qui aura un 1 dans la colonne "cover" de cette table

-L'ordre d'affichage des photos sur le site, grâce aux valeurs dans la colonne "position". 0 ou 1 pour la 1re, 1 ou 2 pour la seconde selon la version de PrestaShop.

Exemple ci dessous : Le produit d'ID 7 possède dans cette base 4 photos, les numéros 20, 21, 22, 23. Sa photo principale (de couverture) est la 20. Ses photos seront affichées dans cet ordre : 23, 21, 22, 24 (ordre croissant des valeurs de "position")

Rem: le produit 8 n'est pas conforme, il a deux photos mais aucune des deux n'est déclarée comme photo de couverture. Bug assez courant de PrestaShop que vous pouvez corriger soit manuellement via PHPMyAdmin soit de manière automatique grâce à Merlin Backoffice.

Ensuite, PrestaShop créé les vignettes de ces deux images et les range dans des dossiers construits à partir de l’ID des images :
/img/p/5/1/3   pour la 513
et
/img/p/5/1/4  pour la 514

Les fichiers eux mêmes portent comme nom le numéro de l’image, par exemple :
513.jpg
513-small.jpg
513-small_default.jpg
etc…

Dans ces dossiers on ne trouve donc aucune info permettant de dire à quel produit elles appartiennent.

D’ailleurs, même si c’est un autre débat, avec une légère modification de la structure de la base, on peut détourner ce système pour permettre qu’un même jeu de vignettes (un même sous-dossier) soit utilisé par plusieurs produits. Je l’ai fait une fois pour un très gros site qui voulait avoir la même photo (un logo) associée à tous leur produits, sans pour autant exploser la taille consommée par les photos sur le disque.

small indique la taille de la vignette. Il en existe plusieurs (medium, large etc...). Ces tailles sont personnalisables dans les paramètres de PrestaShop.

Si vous les modifiez, il faut penser à "re-générer" les vignettes grâce à un bouton présent dans la même page.

Quand il y a trop d'images, le re-génération peut échouer (time out). Il faut alors acheter et utilser un module dédié à cette tache.

La page "Préférences/images" de PrestaShop (ici en 1.6), permettant de définir la taille des vignettes, le format des fichiers (png ou jpg), le mode légacy (voir plus bas), de re-générer les fichiers, etc :

Le fichier nommé avec juste le numéro de l'image (ex 513.jpg) contient une copie de l'image dans sa plus grande taille. C'est ce fichier que Merlin BackOffice pointe quand vous lui demandez d'exporter la liste des images des produits, pour par exemple les envoyer sur une place de marché ou les migrer vers une autre boutique PrestaShop.

Quelle résolution de fichier optimum envoyer vers PrestaShop ?

La réponse est simple, la même que celle que vous avez choisie pour la taille "checkbox", car PrestaShop n'affichera jamais les photos dans une taille supérieure. On choisi souvent 800x800 pixels mais les sites très "graphique" (vente de bijoux par exemple) pourront choisir une résolution plus élevée.

Si vous envoyez des images de plus petite taille que "checkbox", la création de la vignette checkbox va dégrader l'image (effet de pixelisation ou d'impression de flou, de manque de détail).

Et inutile d'envoyer des images de plus grande taille que "checkbox", car elles seront réduites lors du processus. Vous aurez donc inutilement augmenté le temps de transfert.

_default ? quesaquo ?

_default vient du nom du thème. Si vous utilisez un autre thème que le thème par défaut ou le renommez, il est possible (c'est pas toujours le cas et c'est un truc qui reste un peu mystérieux encore pour moi) que le nom des vignettes l'indique.

A noter que dans les réglages "Affichage" de Merlin, vous pouvez justement lui indiquer si le nom des fichiers contient ou pas le nom du thème et quel est ce nom. Une erreur à ce niveau est souvent la 1re cause de non affichage des photos dans Merlin.

Comment éviter les doublons ?

Vous aurez compris également que le nom du fichier original de l'image, fourni à PrestaShop, n'est pas conservé par PrestaShop. Il n'y a donc pas moyen de savoir si telle ou telle photo a déjà été associée à un produit. Aucune gestion des doublons n'est donc possible quand on ajoute des photos en utilisant l'admin PrestaShop.

C'est pourquoi, je vous encourage à toujours utiliser l'outil d'ajout d'images de Merlin Backoffice, car il prend soin de conserver l'image d'origine dans le dossier /img/p (dans /p directement, pas dans un sous dossier).

Ainsi dans Merlin Backoffice on a pu mettre en place un système automatique d'évitement des doublons d'images. 

Mise à jour (29/04/2019) : Merlin Backoffice V1.4 intègre à présent une table mémorisant toutes les associations d'images et permettant une gestion d'évitement des doublons, mais aussi de mise à jour en masse des photos

Le legacy modele de stockage des images de PrestaShop :

A noter que ce modèle de rangement dans des sous-dossiers a été introduit à partir de PS 1.4, mais qu’il encore aujourd’hui possible d’utiliser l’ancien modèle, appelé “Legacy modèle” .

Dans l’ancien modèle, il n’y a pas de sous-dossier dans img/p, toutes les vignettes y sont rangées en vrac à la racine de p. Le gros défaut :  on peut atteindre la limite autorisée du nombre de fichiers par dossier.
Le nom des fichiers est également différent, il contient à la fois l’ID du produit et l’ID de l’image, ce qui avait un coté plus pratique, par exemple  :
68-513-small.jpg  (image d'ID 513 du produit d'ID 68).

Autre différence, le nom du thème n'était jamais inclus dans le nom des fichiers.

Exemple pris sur un vieux PrestaShop 1.3, les images des produits sont en vrac dans img/p. Le produit N° 1 a deux photos, les N°37 et 38 :

Merlin Backoffice est bien sûr compatible avec les deux modèles et s’adapte tout seul en fonction de la configuration de votre PrestaShop.

Le dossier img/tmp/ et les problèmes de synchronisation.

Pour être complet sur le sujet, il est utile d'indiquer qu'il existe un autre dossier contenant aussi une copie des images des produits, en toute petite taille, c'est le dossier img/tmp.

Ces mini vignettes sont utilisées uniquement par le back office de PrestaShop et ne sont pas toujours mises à jour quand on remplace la photo d'un produit (c'est une histoire de hook et de cache, trop long à détailler ici) .

Donc si vous notez des différences entre les photos des produits affichées sur le site ou dans Merlin Backoffice et celles de l'administration de PrestaShop, videz simplement le dossier /tmp, il sera automatiquement re-construit par PrestaShop. Alternativement pour pouvez demander à Merlin d'exécuter les hooks en sortie de session.

Et ou sont stockées les légendes des images (balises ALT) ?

Elles sont stockées dans la base, dans la table ps_image_lang. Juste trois colonnes, une indiquant l'ID de la langue, l'autre l'ID de l'image et la dernère la légende elle même.

Oui il est important de les remplir, elles contribuent pour une part non négligeable au bon référencement de vos pages produits.

Petit rappel : dans Merlin Backoffice, le menu "Legende" du bouton "Actions groupées" de la table des images permet de remplir automatiquement sur un ensemble de produits et d'images au choix, dans toutes les langues aux choix, les balises ALT à partir des noms traduits des produits. Encore des heures de travail d'économisées.

Mise à jour (29/04/2019) : Merlin Backoffice V1.4 intègre à présent une extension SEO gratuite permettant de remplir les légendes de manière intelligente et paramétrée, avec par exemple les attributs des déclinaisons associées aux photos.

Cas du multi boutiques ?

En effet, à partir de PS 1.5 la table ps_image a été dédoublée avec l'ajout de la table ps_image_shop, qui en gros permet de dire si telle ou telle image est ou non utilisable dans telle ou telle boutique d'une configuration multi boutiques.

Mais même si vous n'avez jamais activé le mode multi boutiques, cette table est tout de même remplie avec une ligne par image et avec par défaut la valeur 1 pour le numéro de la boutique.

La structure de cette table a évolué en fonction des mises à jour de PrestaShop (ajout de la colonne "cover" à partir de PS 1.5.1 puis de "id_product" à parti de 1.6.1, modification des index uniques,...), avec souvent des incohérences et un manque de rigueur évident. Encore aujourd'hui je dois régulièrement dépanner à la main des PrestaShop dans lesquels cette table a mal été upgradée par "Migration en 1 clic", ce qui génère des messages d'erreurs SQL dans Merlin Backoffice lorsque l'on veut ajouter une photo.

A noter que Merlin Backoffice permet de voir ces liaisons et en un clic d'associer ou dé-associer un ensemble de photos aux diverses boutiques :

Je lui donne des .PNG, demande des .PNG et ne trouve que des .JPG dans les dossiers, pourquoi ?

En fait, bien que les vignettes produites portent toujours l'extension .jpg, même quand les fichiers originaux sont des .png, le format des vignettes est bien le png, avec conservation de la transparence, mais dont le suffix a simplement été renommé .jpg pour des raisons purement techniques. C'est pas un bug, juste une incohérence de plus de PrestaShop.

J'ai supprimé ma base, refais mes produits et les photos affichées en boutique ne correspondent pas aux bons produits, que faire ?

Cas très classique qui a fait grossir les ventes de paracétamol.

Pour commencer, videz tous les caches, celui de PrestaShop (Smarty), du navigateur et de tout autre module de cache. Même si probablement cela ne suffira pas, car :

Lorsque l'on demande à PrestaShop de recommencer tout à partir d'une nouvelle base, le compteur des ID des images recommence à 1. Logique.

Mais si vous avez oublié (faute pardonnable, car pas ou mal documentée par PrestaShop) de supprimer les sous-dossiers présents dans img/p, il s'y trouve déjà des photos correspondantes aux ID de 1 à xx (xx= le nombre d'images ajoutées avant de vider la base).

Dans ce cas de figure, quand vous ajoutez une photo à un produit, PrestaShop va se contenter de lui donner la photo déjà présente sur le disque, portant le même ID (tant que l'on n'a pas atteint le nombre XX). Il n'y a pas remplacement, mais ré-utilisation des fichiers déjà stockés.

Pour résumer, quand vous voulez recommencer un site vierge, pensez à supprimer les sous-dossiers de img/p (et le contenu de img/c, et img/tmp, ça fait de mal à personne).

Attention cependant de ne pas supprimer les fichiers "modeles" qui se trouvent par défaut à la racine de /img/p/. Ce sont eux qui permettent d'afficher un point d'interrogation ou une vignette "Ce produit n'a pas de photo" sur les produits sans image.

Même soucis, mais c'est dans Merlin que les photos qui apparaissent semblent être les anciennes. comment les rafraichir ?

C'est que Merlin Backoffice a aussi son propre cache local, qui évite de devoir re-télécharger les images à chaque fois qu'il doit afficher un produit, une déclinaison ou une catégorie.

Après suppression/remplacement de toutes les photos d'un site, il est donc nécessaire de vider aussi ce cache. C'est simple est rapide à faire, un clic sur "Actions groupées" de cette table (onglet "Declinaisons et images" puis sous onglet "Images", en bas à droite) et choisir "Cache", vous pourrez alors vider le cache en entier ou uniquement la partie concernant les images sélectionées. :

Ou se trouvent ces images de cache si on veux les supprimer manuelllement ?

Sur votre disque C: dans le dossier MPR_Comon_Data/cache_img. Un sous dossier pour chaque site :

Mise en garde : ne considérez pas ce cache comme une archive ou une sauvegarde de vos photos, vous seriez déçu, car il s'agit uniquement de vignettes de petites tailles, inutilisables pour refaire un site.

Et ou sont les photos des déclinaisons ? :

Il n'y a pas de fichier dédié aux déclinaisons, elles utilisent toujours les images et donc les fichiers de leur produit parent.

C'est pour cela par exemple que pour associer une photo en particulier à une déclinaison avec Merlin Backoffice, il faut d'abord associer cette photo au produit de cette déclinaison.

L'association entre la photo et la déclinaison est mémorisée dans la base, dans la table ps_product_attribute_image. Très basique, juste deux colonnes, l'ID de la déclinaison et l'ID de l'image. Vous l'aurez compris, si l'ID de l'image ne correspond pas à l'ID d'une des photos associées au produit, ca ne marchera pas.

Mise à jour (29/04/2019) : Merlin Backoffice V1.4 permet à présent de créer des déclinaisons contenant directement leurs photos de couleur correspondante.

Et les photos des catégories ? :

La c'est plus simpliste. Leur photos n'ont pas d'ID, ellles sont rangées en vrac dans le dossier img/c et portent comme nom l'ID de la catégorie elle même.

Ex, pour la catégorie portant le numéro 105, on trouvera dans le dossier img/p  un fichier 105-small.jpg par exemple, ou du style 105-small_default.jpg selon le nom du thème.

Comme pour les produits, vous pouvez redéfinir la taille de ces images via le back office et les re-générer.

Mise à jour (29/04/2019) : Merlin Backoffice V1.4 gère à présent le nouveau format "Miniatures" des catégories.

Et les scenes ? :

Les scènes, qui étaient des images de catégories avec des zones cliquables (pointant vers d'autres pages), n'ont pas rencontré un grand succes et ont disparues avec la version 1.7 de PrestaShop. Inutile donc de s'y attarder, même si Merlin continuer de proposer leur gestion pour les anciennes versions de PrestaShop....

L'utilisation de Merlin Backoffice change t'il quelque chose à l'emplacement des photos, leur taille ou format ?

Non dans les grands principes, car ce n'est jamais Merlin Backoffice qui réalise et stocke les vignettes. Il se "contente" de télécharger les images brutes dans img et utilise ensuite les scripts de PrestaShop pour créer les sous-dossiers et les vignettes. Ce qui permet de respecter les consignes de tailles et formats réglés dans PrestaShop.

Ce qui signifie par exemple que si vous vonfigurez prestaShop pour que les images recoivent un filigrane, les photos ajoutées via Merlin Backoffice auront également le même filigrane, automatiquement.

Cependant, comme déjà indiqué plus haut, il conserve une copie de chaque fichier transféré dans img/p, sous le nom d'origine. Cela évite de devoir re-télécharger une image déjà transférée et surtout cela permet d'éviter de créer des doublons d'images dans les produits.

Mais la grande différence est comme toujours le gain de temps lié à l'utilisation de Merlin Backoffice, car au lieu de devoir ajouter les images une par une et d'attendre leur téléchargement pour traiter la suivante, vous pouvez en ajouter un très grand nombre en une seule opération et sur une infinité de produits.

Les transferts se font en tâche de fond, le programme vous rend la main immédiatement pour vous permettre de continuer sans attendre à ajouter d'autres photos ou réaliser n'importe quelle autre tâche.

De plus, Merlin dispose d'une palette d'outils de recherche et d'association automatique entre les produits et un stock d'images, par exemple (mais ce n'est pas la seule méthode) en comparant le nom des fichiers avec la référence des produits. Pour faire simple, en structurant/préparant bien son travail il est possible de totalement automatiser l'ajout des photos sur des milliers de produits, en quelques minutes :

Il existe aussi la possibilité, pour les photographes d'événement sportifs ou culturels, de mariages, la possibiliité de demander à Merlin de créer automatiquement autant de nouveaux produits que vous avez d'images dans un dossier. On ne passe plus son temps alors à créer des produits puis à leur associer des photos, on prends juste son stock de photos, on les glisse dans l'outil et il vous créé 1 produit virtuel par photo (bien sûr avec cette photo associée), et si vous le souhaitez portant comme nom et url le nom du fichier, prêt à étre vendu.

Cet article vous a été utile ? faites le savoir avec un petit partage grâce aux boutons sociaux ci dessous. Merci d'avance.

Je n'ai sans doute pas été totalement complet, le sujet est vaste, mais j'aurai plaisir à completer ce petit dossier selon vos questions. N'hésitez pas.

Mise à jour (29/04/2019) : Merlin Backoffice V1.4 est à présent disponible, riche de très nombreuses nouveautés uniques concernant la gestion des images pour PrestaShop, comme par exemple la recherche automaitque des images à associer aux déclinaisons de produits. On vous invite à parcourir cet autre article détaillant les plus importantes.

Anciens articles ou discussions sur le même sujet :

Que faire si les photos des articles ne s'affichent pas ?

Comment remplir rapidement la légende des images des produits ?

Images produits ne correspondent pas