Avis aux experts de Prestashop : les images qui sont modifiables et celles qui ne le sont pas

[Reflecteed]

- Version 1.6.0.11 -

 

Avez-vous remarqué que les dimensions de certaines images sont modifiables et d’autres pas ?

Lorsque l’on augmente (avant d’uploader les photos des produits) la taille des images (via le menu Préférences – Images) certaines images sont ensuite affichées avec les nouvelles dimensions tandis que d’autres conservent les dimensions d’origine.

 

A l’origine les images ont les tailles suivantes :

cart_default                    80 x 80 px

small_default                  98 x 98 px

medium_default             125 x 125 px

home_default                 250 x 250 px

large_default                  458 x 458 px

thickbox_default             800 x 800 px

category_default             870 x 217 px

scene_default                 870 x 270 px

m_scene_default            161 x 52 px

 

Maintenant, si l’on modifie les dimensions des 5 premières images (cart, small, medium, home, large) pour les paramétrer à 800 x 800 px (j’ai volontairement choisi ce format pour bien voir la différence) que va-t-il se passer du côté du front-office une fois que nous aurons uploadé nos photos sur le serveur ?

 

Certaines images seront bien affichées en 800 x 800 px tandis que d’autres seront affichées a leurs dimensions d’origine alors qu’elles ont bien été redimensionnées en 800 x 800 par Prestashop (et que l'on peut retrouver dans le dossier : img p ).  

 

Par exemple, l’image cart_default est à la fois utilisée dans le panier mais également dans la page produit pour les vignettes qui se trouvent en dessous de l’image principale du produit. Or ces vignettes ne seront pas affichées en 800 x 800 alors que l’image dans le panier elle sera bien affichée en 800 x 800 px.

 

En regardant le code source des vignettes on peut voir qu'une hauteur (height) et une largeur (width) sont fixées à 80 pixels :

<img class="img-responsive" id="thumb_16" src="http://localhost/prestashop/img/p/1/6/16-cart_default.jpg" alt="Robe d'été imprimée" title="Robe d'été imprimée" itemprop="image" height="80" width="80">

Edited March 13, 2015 by Reflecteed (see edit history)

[Reflecteed]

Je continue à développer ici mes recherches en espérant que certains contributeurs actifs de ce forum puissent nous faire partager leur avis, expérience, piste, etc ...

 

Toujours en consultant le code source (qui est le résultat de la combinaison des fichiers .tpl et .php), on peut voir que l'image qui apparait dans le panier n'a pas de dimensions "contraintes" (contrairement aux vignettes qui ont une hauteur et une largeur fixées à 80px) :

<img src="http://localhost/prestashop/img/p/1/6/16-cart_default.jpg" alt="Robe d'été imprimée">

Maintenant que nous avons vu le code source, il ne nous reste plus qu'à retrouver les fichiers .tpl .php et peut-être .css qui créent ce code source.

 

Dans le fichier blockcart.tpl qui se trouve dans le dossier MODULES du thème (pas dans le dossier Modules à la racine de Prestashop) :

<a class="cart-images" href="{$link->getProductLink($product.id_product, $product.link_rewrite, $product.category)|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'cart_default')}" alt="{$product.name|escape:'html':'UTF-8'}" /></a>

Que l'on peut comparer (pour essayer de comprendre) avec le contenu que l'on trouve dans le fichier product.tpl du thème :

<img class="img-responsive" id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'cart_default')|escape:'html':'UTF-8'}" alt="{$imageTitle}" title="{$imageTitle}" height="{$cartSize.height}" width="{$cartSize.width}" itemprop="image" />

Edited March 13, 2015 by Reflecteed (see edit history)