Jump to content

Image de couverture de la catégorie déformée

Tristars25
 Share

Recommended Posts

Tristars25 Rookie

Tristars25

Posted
Posted (edited)

Bonjour,

Je suis sous Prestashop 8.2 sur Debian 12 et PHP 8.2

Lorsque j'ajoute une image de couverture sur une catégorie, elle apparait toute compressée en bas à gauche :

image.thumb.png.2e221b1e6458e3a8301623f273676cf8.png

 

Dans le back-office j'ai ajouté une image de 785 x 180 pixels :

 

image.thumb.png.1c80164a457dac9db5aa35159053666b.png

 

J'ai également modifier la taille des images de couverture des catégories par défaut à 785 x 180 pixels (couverture_categorie_TGN) :

image.thumb.png.4dafd5f3f97f0a8c651eaea9f58a57d4.png

 

Je ne comprends pas d'où viens le problème .. 

Quelle est la taille attendue et comment faire en sorte que mon image entre parfaitement dans la zone ?

Merci d'avance pour votre aide précieuse !

image.png

Edited by Tristars25 (see edit history)
Link to comment
Share on other sites
Knowband Plugins Mentor

Knowband Plugins

Posted
Posted

Consultez ce fil de discussion. 

C'est également le cas avec le thème Prestashop, car la même taille de vignette est générée par Prestashop pour l'image de couverture et la vignette de catégorie, ce qui est incorrect. 

La vignette de catégorie sera toujours carrée, tandis que l'image de couverture sera de grande largeur.

Link to comment
Share on other sites
Tristars25 Rookie

Tristars25

Posted
  • Author
Posted
56 minutes ago, Knowband Plugins said:

Consultez ce fil de discussion. 

C'est également le cas avec le thème Prestashop, car la même taille de vignette est générée par Prestashop pour l'image de couverture et la vignette de catégorie, ce qui est incorrect. 

La vignette de catégorie sera toujours carrée, tandis que l'image de couverture sera de grande largeur.

Désolé mais je ne trouve pas la réponse à mon problème dans ce post .. Pouvez-vous m'éclairer ?

10 hours ago, Eolia said:

Que dit la règle css concernant cette image en Front Office ?

En Front-Office je vois que l'image est redimensionnée en 141 x 180 px , ce qui correspond à "category_default" et non à ma nouvelle catégorie "couverture_categorie_TGN" :

image.thumb.png.57e113e5a0695f2432ddde4d00e15bf8.png

Pou rappel, mon image fait bien 785 x 180 px (comme ce que j'ai paramétré dans ma catégorie "couverture_categorie_TGN").

Merci beaucoup

Link to comment
Share on other sites
Tristars25 Rookie

Tristars25

Posted
  • Author
Posted
7 hours ago, Prestashop Addict said:

Si vous créez une nouvelle entrée dans les formats d'images il faut modifier le template.

Ok dans ce cas je ne créé aucune nouvelle entrée, je modifie le format dans la catégorie par défaut "category_default" à 785 x 180 px. Le problème reste le même.

image.thumb.png.96afbbc27405cca0af173f8323be3460.png

 

image.thumb.png.9a5e0279489fd82d4dea39a97fe847f3.png

 

Avez-vous une autre piste ?

 

Merci beaucoup

Link to comment
Share on other sites
Tristars25 Rookie

Tristars25

Posted
  • Author
Posted
32 minutes ago, Prestashop Addict said:

Il faut régénérer les images quand vous changez les paramètres.

image.png.6182702ceee7849a8fe0c4c177063110.png

Oui bien sûr je le fais à chaque fois mais cela ne corrige pas le problème..

Une autre idée ?

Link to comment
Share on other sites
Prestashop Addict Grand Master

Prestashop Addict

Posted
Posted

Si vous utilisez le thème classic c'est en dur dans le template 😞 Il faut modifier le fichier themes/classic/templates/catalog/_partials/category-header.tpl 

<img src="{$category.image.large.url}" alt="{if !empty($category.image.legend)}{$category.image.legend}{else}{$category.name}{/if}" loading="lazy" width="141" height="180">

Soit vous supprimez les attributs width et height (pas recommandé en SEO) soit vous mettez les valeurs de l'objet 

<img src="{$category.image.large.url}" alt="{if !empty($category.image.legend)}{$category.image.legend}{else}{$category.name}{/if}" loading="lazy" width="{$category.image.large.width}" height="{$category.image.large.height}">

 

Link to comment
Share on other sites
Tristars25 Rookie

Tristars25

Posted
  • Author
Posted
3 hours ago, Prestashop Addict said:

Si vous utilisez le thème classic c'est en dur dans le template 😞 Il faut modifier le fichier themes/classic/templates/catalog/_partials/category-header.tpl 

<img src="{$category.image.large.url}" alt="{if !empty($category.image.legend)}{$category.image.legend}{else}{$category.name}{/if}" loading="lazy" width="141" height="180">

Soit vous supprimez les attributs width et height (pas recommandé en SEO) soit vous mettez les valeurs de l'objet 

<img src="{$category.image.large.url}" alt="{if !empty($category.image.legend)}{$category.image.legend}{else}{$category.name}{/if}" loading="lazy" width="{$category.image.large.width}" height="{$category.image.large.height}">

 

Très bonne idée !

J'ai changé le fichier category-header.tpl :
 

image.thumb.png.52d0b7a17d365bf3f9316c58d3568180.png


Mais cela ne fonctionne toujours pas, aucun changement sur l'image.


Pour info j'ai bien désactivé le cache :

image.thumb.png.d85af6bd3dfc75fe769b0a0da957601e.png

Link to comment
Share on other sites
Prestashop Addict Grand Master

Prestashop Addict

Posted
Posted

Dans theme.css la taille est en dur aussi 😞 

.block-category .block-category-inner .category-cover img {
  width: 141px;
  height: 180px;
}

remplacer par : 

.block-category .block-category-inner .category-cover img {
  width: auto;
  max-width:100%;
  height: auto;
}

Et il y a un bug dans l'affectation de la variable image.large, changez le template en 

<img src="{$category.image.bySize.category_default.url}" alt="{if !empty($category.image.legend)}{$category.image.legend}{else}{$category.name}{/if}" loading="lazy" width="{$category.image.bySize.category_default.width}" height="{$category.image.bySize.category_default.height}">

 

Link to comment
Share on other sites
Tristars25 Rookie

Tristars25

Posted
  • Author
Posted

Merci beaucoup cela fonctionne bien à présent !

Nous avons donc modifié les fichiers natifs category-header.tpl & theme.css, une future MAJ de Prestashop et je perdrais tout ?

Dois-je plutôt refaire ces modif via un thème enfant ?

Link to comment
Share on other sites
Mediacom87 Grand Master

Mediacom87

Posted
Posted

Bonjour,

il y a 33 minutes, Tristars25 a dit :

Nous avons donc modifié les fichiers natifs category-header.tpl & theme.css, une future MAJ de Prestashop et je perdrais tout ?

1- si vous souhaitez personnaliser un thème, il faut le faire sur la base d'un thème enfant, comme cela lors des mises à jour du thème celui-ci n'est pas affecté.

2- on ne touche jamais au fichier theme.css, si on souhaite personnaliser un thème, enfant ou non, on enregistre les modifications dans custom.css, si ce fichier n'existe pas, on va le créer, ce fichier est souvent absent pour la simple raison que s'il existe et que l'on met à jour le thème cela va l'écraser et on va perdre les personnalisations.

  • Like 1
Link to comment
Share on other sites
Prestashop Addict Grand Master

Prestashop Addict

Posted
Posted
à l’instant, Mediacom87 a dit :

Bonjour,

1- si vous souhaitez personnaliser un thème, il faut le faire sur la base d'un thème enfant, comme cela lors des mises à jour du thème celui-ci n'est pas affecté.

2- on ne touche jamais au fichier theme.css, si on souhaite personnaliser un thème, enfant ou non, on enregistre les modifications dans custom.css, si ce fichier n'existe pas, on va le créer, ce fichier est souvent absent pour la simple raison que s'il existe et que l'on met à jour le thème cela va l'écraser et on va perdre les personnalisations.

Oui voici un tuto pour faire un thème enfant

Link to comment
Share on other sites
Tristars25 Rookie

Tristars25

Posted
  • Author
Posted
5 minutes ago, Prestashop Addict said:

N'oubliez pas de mettre [RESOLU] dans le titre et un Thanks est apprécié sur la bonne solution pour aider les autres utilisateurs.

Merci, pour le thème enfant cela fera l'objet d'un autre topic si j'ai des difficultés :)

Mais j'ai encore quelques questions.

Les images dans les sous-catégories sont toutes petites, savez-vous comment les agrandir ?

image.thumb.png.11ade14d347a3b9f0297cd60650591bb.png

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...