Affichage vignettes produit à la mauvaise taille ?

[algrand001]

Bonjour à tous, voilà mon problème.
Je réalise un site qui comprend une partie site classique joomla avec des articles, une galerie photo, une page contact et une partie boutique en ligne avec une quinzaine de catégorie de produits et quelques sous-catégories.
Je travail en local avec :
. Wampserver 2.2.e 64bits
. Apache 2.2.22
. Php 5.3.13
. My sql 5.5.24
. Virtuemart 2.0.18a
. Joomla 2.5.9 stable full package-fr

. Le template responsive Ja-Elastica

J'ai un soucis avec la taille de mes vignettes produits.
Dans la configuration générale, j'ai réglé la taille de la création automatique de vignettes à 160/160 px.
Quand je crais une catégorie ou une sous-catégorie de produits, les vignettes créées automatiquement font bien 160/160. Jusqu'à là, pas de problème.
Par contre quand je crais un nouveau produit, la vignette générés fait bien 160/160 si l'on vérifie dans la fichier recize ou elle est stockée, mais par contre sur le frontend du site elle fait genre 60/60 px ?
Je suis sur un template responsive la vignette est en plus redimensionnée en fonction du support (mobile, tablette, ordi.). Par défaut, je travail à taille ordinateur de bureau. Dans ce cas là, la vignette fait 60/60 et si je passe un fenêtre genre mobile, je me retrouve avec l'équivalent d'un Favicon du genre 16/16px ?
Bref ça ne me convient pas et je ne comprend pas pourquoi il n'y a qu'au niveau des vignettes produits que ce problème apparaît ?
Quelqu'un a-t'il déjà été confronté à cela ?
Existe une solution pour que ma vignette produit s'affiche bien en 160/160px quand je suis sur une fenêtre de taille ordinateur de bureau et qu'elle fasse 60/60px quand je suis sur un téléphone mobile en mode portrait à la rigueur ?


D'avance merci, pour le moment, je suis un peu coincé ...

[XdiZ]

Re : Affichage vignettes produit à la mauvaise taille ?

Pourquoi avez vous créé 2 discussions identiques celle ci et celle là ?

[SimonG]

Re : Affichage vignettes produit à la mauvaise taille ?

[Modo]Inutile en effet de poster en double. Doublon supprimé.[/Modo]

[algrand001]

Re : Affichage vignettes produit à la mauvaise taille ?

[Modo]Inutile en effet de poster en double. Doublon supprimé.[/Modo]

Je ne savais pas dans laquelle des 2 rubriques mettre ma demande puisqu'elle correspond au 2.
Et si non, il y a quelqu'un qui a une réponse ?

[algrand001]

Re : Affichage vignettes produit à la mauvaise taille ?

Euhhhh ?

Y-a quelqu'un ?
Personne n'a une petite idée pour régler mon problème ?

[lomart]

Re : Affichage vignettes produit à la mauvaise taille ?

il faut analyser l'imbrication des classes avec firebug pour créer une règle css qui evite aux images de VM d'être à 100% comme c'est le cas en responsive

[algrand001]

Re : Affichage vignettes produit à la mauvaise taille ?

Oups, ça se complique !
Tout d'abord il semble que les vignettes de catégories de produits et les vignettes de produits ne soient pas gérées de la même manière, soit au niveau du template Ja-elastica, soit au niveau de virtuemart. pourtant au niveau du backend virtuemart il n'y a qu'un seul réglage pour la création automatique des vignettes, celui ou l'on spécifie la largeur et la hauteur des vignettes à créer lorsque l'on rentre les images des produits.
Ce réglage se trouvant dans la partie template de la configuration générale de la boutique virtuemart.

Il y a ici un dilemme ?

Concernant firebug, je l'ai installé mais ne sait pas trop m'en servir.
Pour le moment je suis aller sur l'image d'un produit que j'avais rentré dans ma boutique, j'ai fait : "inspect element with firebug"
et concernant la classe de l'image, je peux lire l'imbrication de classes suivante dans le script indiqué en dessous :

<div class="row">
<div class="product floatleft width33 vertical-separator">
<div class="spacer">
<div class="width30 floatleft center">
<a href="/lamemoiredelartisan/index.php/boutique/teintures-et-pigments/pigments-vegetaux/brou-de-noix-veritable-detail" rel="vm-additional-images" title="/lamemoiredelartisan/index.php/boutique/teintures-et-pigments/pigments-vegetaux/brou-de-noix-veritable-detail">
<img class="browseProductImage" alt="brou_de_noix_veritable" src="/lamemoiredelartisan/images/stories/virtuemart/product/resized/brou_de_noix_veritable_160x160.png">
</a>
<span class="contentpagetitle">Note moyenne des clients:</span>
<br>
</div>
<div class="width70 floatright">
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="vm-pagination">
</div>
</div>
</div>


Si dans firebug dans la ligne suivante :

<div class="width30 floatleft center">

je modifie le width et je le passe à 100 par exemple, c'est tout de suite mieux, j'obtiens la bonne taille de vignette de 160/160 au lieu d'une vignette qui fait 53/53px.

Je pense qu'il s'agit de la taille du container de l'image. il semble réglé sur 30% ? Si je le passe sur 100%, on est bon.

Merci de me confirmer qu'il s'agit bien de cela et si oui, merci de me dire quel est le chemin du fichier a aller modifier pour que cette modification soit durable et pas temporaire comme quand on modifie directement dans firebug et surtout que cette modification, s'applique à tout les futurs produits rentrés dans la boutique ?

Et encore merci Lomart de te soucier de mon sort. J'avoue qu'en se moment je suis assez heureux que tu sois dans le coin.

[lomart]

Re : Affichage vignettes produit à la mauvaise taille ?

il faut ajouter en fin de ton template une règle du style:
.product .width30 {width: 100%}
enfin les propriétés telles que modifiées dans firebug
Il faudra également ajouter une média-querie correspondant au contexte mobile. recherche dans tes css @media

[algrand001]

Re : Affichage vignettes produit à la mauvaise taille ?

J'ai ajouté cette règle dans mon template CSS et cela fonctionne nickel.
.product .width30 {width: 100%}
J'ai rajouté le même script dans les 2 fichiers css concernant les mobiles et portables, et cela à l'air de bien fonctionner pour le moment. Les vignettes ont l'air d'être redimensionnées de façon cohérente.

Reste à voir les tailles de polices de caractères qui me paraissent bonne en mode wide ou extra-wide mais qui grossissent quand je passe en mode tablette ou mobile.
Bizarre la logique voudrai que ce soit l'inverse ?
Je me mettrai sur cette partie là un peu plus tard.

Tu m'as a nouveau sauvé des eaux Lomart alors un nouveau grand merci et bravo à toi.