{"id":32,"date":"2008-09-01T09:47:13","date_gmt":"2008-09-01T08:47:13","guid":{"rendered":"https:\/\/www.magavenue.com\/blog\/?p=32"},"modified":"2008-09-01T09:47:13","modified_gmt":"2008-09-01T08:47:13","slug":"gestion-photos-prestashop","status":"publish","type":"post","link":"https:\/\/www.magavenue.com\/blog\/ecommerce\/gestion-photos-prestashop\/","title":{"rendered":"Gestion des photos dans Prestashop"},"content":{"rendered":"<p><span style=\"font-family: Arial;\"> Nous avons vu dans un pr\u00e9c\u00e9dent billet comment optimiser vos photos avec <a title=\"Optimisations des photos avec Xnview pour les int\u00e9grer dans votre boutique en ligne\" href=\"https:\/\/www.magavenue.com\/blog\/ecommerce\/optimisations-des-photos-avec-xnview-pour-les-integrer-dans-votre-boutique-en-ligne\" target=\"_self\" rel=\"noopener noreferrer\">XnView<\/a> ou avec <a title=\"Optimisation des photos des articles de votre boutique avec Gimp\" href=\"https:\/\/www.magavenue.com\/blog\/ecommerce\/optimisation-des-photos-avec-gimp\" target=\"_self\" rel=\"noopener noreferrer\">Gimp<\/a> pour qu&rsquo;elles s&rsquo;affichent rapidement dans votre site de e-commerce.<\/span><br id=\"j-8e\" style=\"font-family: Arial;\" \/><span style=\"font-family: Arial;\">Nous allons voir maintenant comment les int\u00e9grer dans une fiche produit de Prestashop.<\/span><\/p>\n<h2><!--more--><span style=\"font-size: 10pt; font-family: Arial;\">Int\u00e9gration des images dans les fiches produits de Prestashop <\/span><\/h2>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt; font-family: Arial;\">Il n&rsquo;est pas n\u00e9cessaire de renommer vos photos. Prestashop utilisera des noms \u00e0\u00a0 lui, compos\u00e9s de l&rsquo;id du produit, d&rsquo;un n\u00b0 d&rsquo;incr\u00e9ment et du nom d&rsquo;un des 5 types d&rsquo;images n\u00e9cessaire \u00e0\u00a0 l&rsquo;affichage du produit dans Prestashop (ce qui peut \u00eatre un petit inconv\u00e9nient pour le r\u00e9f\u00e9rencement naturel dans Google images, mais qui est bien pratique car il g\u00e8re tous seul les diff\u00e9rentes tailles et diff\u00e9rents noms des photos).<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt; font-family: Arial;\">5 types et tailles d&rsquo;images sont utilis\u00e9 en standard par Prestashop pour les photos d&rsquo;une fiche produit :<\/span><\/p>\n<ul>\n<li><span style=\"font-size: 10pt; font-family: Arial;\">Small : 45 x 45 pixels<\/span><\/li>\n<li><span style=\"font-size: 10pt; font-family: Arial;\">Medium : 80 x 80 pixels (utilis\u00e9 pour la s\u00e9lection de la photo dans la fiche produit, dans la zone nouveau produit, d\u00e9j\u00e0\u00a0 vus ou r\u00e9ductions)<\/span><\/li>\n<li><span style=\"font-size: 10pt; font-family: Arial;\">Large : 300 x 300 pixels (utilis\u00e9 pour l&rsquo;affichage en grand du produit)<\/span><\/li>\n<li><span style=\"font-size: 10pt; font-family: Arial;\">Thickbox : 600 x 600 pixels (utilis\u00e9 pour l&rsquo;affichage d\u00e9taill\u00e9 du produit)<\/span><\/li>\n<li><span style=\"font-size: 10pt; font-family: Arial;\">Home : 129 x 129 pixels (utilis\u00e9 pour afficher le d\u00e9tail d&rsquo;une cat\u00e9gorie, pour les produits phare en 1\u00e8re page de la boutique, ou pour la recherche d&rsquo;un produit)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-size: 10pt; font-family: Arial;\">L&rsquo;image avec la taille d&rsquo;origine de la photo, qu&rsquo;il recopie comme photo de r\u00e9f\u00e9rence, mais qui n&rsquo;est pas utilis\u00e9 par Prestashop.<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt; font-family: Arial;\">Lorsque vous avez saisie les informations concernant la fiche produit, cliquez sur l&rsquo;onglet Images. Remplissez les champs en fonction de votre photo :<\/span><\/p>\n<ul>\n<li><span style=\"font-size: 10pt; font-family: Arial;\">Fichier : Cliquez sur Parcourir pour choisir la photo que vous avez d\u00e9j\u00e0\u00a0 redimensionn\u00e9<br \/>\n<\/span><\/li>\n<li><span style=\"font-size: 10pt; font-family: Arial;\">L\u00e9gende : Saisissez la l\u00e9gende associ\u00e9 \u00e0\u00a0 cette photo, celle-ci est importante pour le r\u00e9f\u00e9rencement dans Google images, pensez \u00e0\u00a0 utiliser 1 ou 2 mots cl\u00e9s.<\/span><\/li>\n<li><span style=\"font-size: 10pt; font-family: Arial;\">Couverture : \u00e0\u00a0 cocher pour indiquer que cette photo sera celle qui sera affich\u00e9 en premier pour cet objet, dans votre boutique en ligne.<\/span><\/li>\n<li><span style=\"font-size: 10pt; font-family: Arial;\">M\u00e9thode de redim. des miniatures : je vous conseille de laisser automatique, ainsi Prestashop d\u00e9finira tout seul les 5 diff\u00e9rentes dimensions des photos.<\/span><\/li>\n<\/ul>\n<div class=\"centrer\"><a style=\"cursor:hand;\" rel=\"shadowbox\" href=\"https:\/\/magavenue.com\/blog\/wp-content\/uploads\/Prestashop - Ajouter image.jpg\"><img loading=\"lazy\" style=\"border: 1px solid black; vertical-align: middle; margin-top: 5px; margin-bottom: 5px;\" src=\"https:\/\/magavenue.com\/blog\/wp-content\/uploads\/Prestashop - Ajouter image.jpg\" alt=\"Prestashop - Ajouter image dans catalogue\" width=\"459\" height=\"276\" \/><\/a><\/div>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt; font-family: Arial;\">Il ne vous reste plus qu&rsquo;\u00e0\u00a0 cliquer sur le bouton Enregistrer l&rsquo;image. Prestashop va automatiquement cr\u00e9er les 6 types d&rsquo;images n\u00e9cessaires \u00e0\u00a0 son fonctionnement (que vous pouvez retrouver dans &#8230;prestashopimgp).<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt; font-family: Arial;\">Vous devez r\u00e9p\u00e9ter les \u00e9tapes pr\u00e9c\u00e9dentes pour toutes les photos que vous souhaitez ins\u00e9rer pour ce m\u00eame produit.<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt; font-family: Arial;\">Il est d&rsquo;ailleurs fortement recommand\u00e9 d&rsquo;utiliser plusieurs photos pour un m\u00eame produit (prises sous diff\u00e9rents angles, avec \u00e9ventuellement des agrandissements, des d\u00e9tails, en situation&#8230;). En effet votre client ne peut pas voir r\u00e9ellement votre produit. Donc plus il aura de photos du produit, moins il aura d&rsquo;interrogations, il sera alors plus enclin \u00e0\u00a0 vous acheter votre produit.<\/span><\/p>\n<p class=\"MsoNormal\">\n<h2><span style=\"font-size: 10pt; font-family: Arial;\">Int\u00e9gration des images dans les cat\u00e9gories des produits de Prestashop <\/span><\/h2>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt; font-family: Arial;\">Comme pour une photo d&rsquo;une fiche produit, Il n&rsquo;est pas n\u00e9cessaire de renommer vos photos, Prestashop utilisera ses noms propres.<br \/>\n<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt; font-family: Arial;\">4 types et tailles d&rsquo;images sont utilis\u00e9 en standard par Prestashop pour les cat\u00e9gories d&rsquo;une fiche produit :<\/span><\/p>\n<ul>\n<li><span style=\"font-size: 10pt; font-family: Arial;\">Small : 45 x 45 pixels<\/span><\/li>\n<li><span style=\"font-size: 10pt; font-family: Arial;\">Medium : 80 x 80 pixels <\/span><\/li>\n<li><span style=\"font-size: 10pt; font-family: Arial;\">Large : 300 x 300 pixels <\/span><\/li>\n<li><span style=\"font-size: 10pt; font-family: Arial;\">Category : 500 x 150 pixels<\/span><\/li>\n<\/ul>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt; font-family: Arial;\">L&rsquo;image avec la taille d&rsquo;origine de la photo, qu&rsquo;il recopie comme photo de r\u00e9f\u00e9rence, mais qui n&rsquo;est pas utilis\u00e9 par Prestashop. <\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt; font-family: Arial;\">Saisissez le nom et la description de la cat\u00e9gorie et cliquez sur le bouton Parcourir du champ Image, compl\u00e9tez les autres champs.<\/span><\/p>\n<p class=\"MsoNormal\">\n<div class=\"centrer\"><a style=\"cursor:hand;\" rel=\"shadowbox\" href=\"https:\/\/magavenue.com\/blog\/wp-content\/uploads\/Prestashop - Ajouter categorie.jpg\"><img style=\"border: 1px solid black; vertical-align: middle; margin-top: 5px; margin-bottom: 5px;\" src=\"https:\/\/magavenue.com\/blog\/wp-content\/uploads\/Prestashop - Ajouter categorie.jpg\" alt=\"Prestashop - Ajouter cat\u00e9gorie produit\" \/><\/a><\/div>\n<div class=\"centrer\"><span style=\"font-size: 10pt; font-family: Arial;\">Il ne vous reste plus qu&rsquo;\u00e0\u00a0 cliquer sur le bouton Enregistrer. Prestashop va automatiquement cr\u00e9er les 5 types d&rsquo;images n\u00e9cessaires \u00e0\u00a0 son fonctionnement (que vous pouvez retrouver dans &#8230;prestashopimgc).<\/span><\/div>\n<h2><span style=\"font-size: 10pt; font-family: Arial;\">Param\u00e9trage des tailles des images utilis\u00e9es par Prestashop <\/span><\/h2>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt; font-family: Arial;\">Les diff\u00e9rentes tailles des images indiqu\u00e9es ci-dessus, peuvent \u00eatre modifi\u00e9es dans l&rsquo;onglet Pr\u00e9f\u00e9rences, choix images :<\/span><\/p>\n<div class=\"centrer\"><a style=\"cursor:hand;\" rel=\"shadowbox\" href=\"https:\/\/magavenue.com\/blog\/wp-content\/uploads\/Prestashop - Tailles predefinies des images.jpg\"><img loading=\"lazy\" style=\"border: 1px solid black; vertical-align: middle;\" src=\"https:\/\/magavenue.com\/blog\/wp-content\/uploads\/Prestashop - Tailles predefinies des images.jpg\" alt=\"Prestashop - Tailles predefinies des images\" width=\"443\" height=\"350\" \/><\/a><\/div>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt; font-family: Arial;\">Si vous modifier une taille pour un ou plusieurs format, pensez bien \u00e0\u00a0 cliquer ensuite sur le bouton : R\u00e9g\u00e9n\u00e9rer des miniatures en bas de page.<\/span><\/p>\n<p class=\"MsoNormal\">\n<h2><span style=\"font-size: 10pt; font-family: Arial;\">Conclusion<\/span><\/h2>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt; font-family: Arial;\">Voil\u00e0\u00a0, ainsi s&rsquo;ach\u00e8ve notre s\u00e9rie d&rsquo;article sur l&rsquo;optimisation des photos dans Prestashop, nous vous proposerons bient\u00f4t un dossier pdf \u00e0\u00a0 t\u00e9l\u00e9charger regroupant les diff\u00e9rentes \u00e9tapes.<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt; font-family: Arial;\">L&rsquo;int\u00e9gration des photos dans Prestashop est tr\u00e8s simple, un effet lightbox (mettant en valeur les photos, en les affichant sur fond noir) est int\u00e9gr\u00e9 par d\u00e9faut avec la possibilit\u00e9 de passer en revu les diff\u00e9rentes photos ins\u00e9r\u00e9s pour un m\u00eame produit. <\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt; font-family: Arial;\">Il ne manque plus qu&rsquo;un syst\u00e8me permettant de grossir certains d\u00e9tails d&rsquo;une photo d&rsquo;un produit et la gestion des photos, dans Prestashop sera compl\u00e8te pour une petite boutique en ligne.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nous avons vu dans un pr\u00e9c\u00e9dent billet comment optimiser vos photos avec XnView ou avec Gimp pour qu&rsquo;elles s&rsquo;affichent rapidement dans votre site de e-commerce.Nous allons voir maintenant comment les int\u00e9grer dans une fiche produit de Prestashop.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6,11],"tags":[28,77,91,119,120,131,173,182],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v15.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Gestion des photos dans Prestashop - Magavenue : Le Blog du ecommerce Open-source<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.magavenue.com\/blog\/ecommerce\/gestion-photos-prestashop\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gestion des photos dans Prestashop - Magavenue : Le Blog du ecommerce Open-source\" \/>\n<meta property=\"og:description\" content=\"Nous avons vu dans un pr\u00e9c\u00e9dent billet comment optimiser vos photos avec XnView ou avec Gimp pour qu&rsquo;elles s&rsquo;affichent rapidement dans votre site de e-commerce.Nous allons voir maintenant comment les int\u00e9grer dans une fiche produit de Prestashop.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.magavenue.com\/blog\/ecommerce\/gestion-photos-prestashop\/\" \/>\n<meta property=\"og:site_name\" content=\"Magavenue : Le Blog du ecommerce Open-source\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/magavenue\/\" \/>\n<meta property=\"article:published_time\" content=\"2008-09-01T08:47:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/magavenue.com\/blog\/wp-content\/uploads\/Prestashop%20-%20Ajouter%20image.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Magavenue\" \/>\n<meta name=\"twitter:site\" content=\"@Magavenue\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture est.\">\n\t<meta name=\"twitter:data1\" content=\"4 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.magavenue.com\/blog\/#website\",\"url\":\"https:\/\/www.magavenue.com\/blog\/\",\"name\":\"Magavenue : Le Blog du ecommerce Open-source\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.magavenue.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.magavenue.com\/blog\/ecommerce\/gestion-photos-prestashop\/#primaryimage\",\"inLanguage\":\"fr-FR\",\"url\":\"https:\/\/magavenue.com\/blog\/wp-content\/uploads\/Prestashop - Ajouter image.jpg\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.magavenue.com\/blog\/ecommerce\/gestion-photos-prestashop\/#webpage\",\"url\":\"https:\/\/www.magavenue.com\/blog\/ecommerce\/gestion-photos-prestashop\/\",\"name\":\"Gestion des photos dans Prestashop - Magavenue : Le Blog du ecommerce Open-source\",\"isPartOf\":{\"@id\":\"https:\/\/www.magavenue.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.magavenue.com\/blog\/ecommerce\/gestion-photos-prestashop\/#primaryimage\"},\"datePublished\":\"2008-09-01T08:47:13+00:00\",\"dateModified\":\"2008-09-01T08:47:13+00:00\",\"author\":{\"@id\":\"https:\/\/www.magavenue.com\/blog\/#\/schema\/person\/583c008caa8ac9ecf5994ed089fffbad\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.magavenue.com\/blog\/ecommerce\/gestion-photos-prestashop\/\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.magavenue.com\/blog\/#\/schema\/person\/583c008caa8ac9ecf5994ed089fffbad\",\"name\":\"Magavenue\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.magavenue.com\/blog\/#personlogo\",\"inLanguage\":\"fr-FR\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5eaa47e1e657a76ab2fb0f045063b303?s=96&d=mm&r=g\",\"caption\":\"Magavenue\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.magavenue.com\/blog\/wp-json\/wp\/v2\/posts\/32"}],"collection":[{"href":"https:\/\/www.magavenue.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.magavenue.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.magavenue.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.magavenue.com\/blog\/wp-json\/wp\/v2\/comments?post=32"}],"version-history":[{"count":0,"href":"https:\/\/www.magavenue.com\/blog\/wp-json\/wp\/v2\/posts\/32\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.magavenue.com\/blog\/wp-json\/wp\/v2\/media?parent=32"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.magavenue.com\/blog\/wp-json\/wp\/v2\/categories?post=32"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.magavenue.com\/blog\/wp-json\/wp\/v2\/tags?post=32"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}