[résolu] Format des images de couverture de catégorie

[cyril_fr903]

J'avais une question à vous poser par rapport au passage à Prestashop 8 concernant les images de couverture de catégorie.


Sur mon site ancienne version (Pretashop 1.7), j'ai modifié le format d'affichage des images de catégorie dans le css, de façon à ce qu'elles apparaissent en format 1070x370px. A savoir toute la largeur de mon template (classic). Ensuite j'ai fait apparaitre la description et le nom de la catégorie par dessus en position absolute.
Ça me permet ainsi d'avoir une vrai bannière de catégorie au lieu d'un gros texte avec une image minuscule dans le coin à droite. Ce qui est le cas de base dans Prestashop avec le template classic.


Donc j'en vient à mon problème. Sur Prestashop 1.7, les photos de catégories s'upload dans le dossier  img/c/  comme suit.
Exemple pour ma catégorie ID-18 ==>  https://prnt.sc/rjUetR8PHocg
Concrètement il y a 3 photos par upload.
- La photo d'origine renommé en "18".
- La photo d'origine renommé en "18-nom-perso"
- La photo redimensionné automatiquement renommé en : "18-small-default"

Dans la category-header. ==> themes/classic/template/catalog/_partial/category-header.tpl

Prestashop 1.7 affiche ça : {$category.image.large.url}
Le format "large" qui correspond à "18-nom-perso". A savoir la photo d'origine non redimensionné.

____________________

Sur Prestashop 1.8, les photos de catégorie s'upload dans le dossier  img/c/  comme suit.
Exemple pour ma catégorie ID-3 ==>  https://prnt.sc/HmtDgreP-9eO
- La photo d'origine renommé en "3".
- La photo redimensionné automatiquement renommé en : "3-category_default"
- La photo redimensionné automatiquement renommé en : "3-small-default"

Dans la category-header. ==> themes/classic/template/catalog/_partial/category-header.tpl

Prestashop 8 affiche ça : {$category.image.large.url}
Le format "large" qui correspond à "18-category_default". A savoir la photo redimensionné (contrairement au Prestashop 1.7).

Du coup, je me retrouve avec une miniature étirée à mort avec deux grosses bandes blanches en haut et en bas dans ma catégorie.


____________________


Ma question est donc la suivante
Que dois je écrire dans le code à la place de ça  "{$category.image.large.url}"  pour faire afficher la photo d'origine?

Edited May 1, 2023 by cyril_fr903 (see edit history)

[cyril_fr903]

Je viens de me rappeler de la solution, je remet ça ici.
Il suffit d'aller dans l'admin>>apparence>>image. De là, vous pouvez choisir le format auquel vous souhaitez sur les images soit importer dans le fichier "img" du site.
Problème résolu !

[SbdZ]

Bonjour Cyril,

J'essaie de faire la même chose, exactement ! mais me heurte systématiquement à :

- une image déformée qui ne prend pas toute la largeur de la balise, et reste désespérément dans le coin droit (en miniature).

- un texte qui ne vient pas par-dessus l'image.

Aurais-tu l'amabilité de décrire les différentes étapes pour y parvenir ?

D'avance, merci.

[cyril_fr903]

Sur Prestashop 8.1, thème Classic. J'ai fait ça:

Dans le fichier : /www/themes/classic/assets/css/theme.css
Remplacer ça: .block-category .block-category-inner .category-cover img{width:141px;height:180px}
Par ça: .block-category .block-category-inner .category-cover img{width:1070px;height:370px}
 

Puis dans l'admin >> apparence >> images
sur la ligne category_default  mettre 1070 x 370 px à la place de 141 x 180 px

[SbdZ]

Merci ! L'image s'affiche bien correctement en modifiant ces 2 paramètres.

Mais...la description ne se met pas sur l'image (ni le titre d'ailleurs, mais ça, c'est une autre histoire).

Dans l'idéal, j'aurais souhaité que le titre de la catégorie et sa description se mettent sur l'image, ce qui était, je crois, la valeur par défaut dans les versions précédentes de prestashop (?)

J'imagine qu'en modifiant la feuille css, on doit pouvoir retrouver ce comportement, mais je n'y parviens pas.

 

[cyril_fr903]

Pour le titre de la catégorie.

J'ai fait 2 modifications.

La première dans le fichier: /www/themes/classic/templates/catalog/_partials/category-header.tpl
 

<div id="js-product-list-header">
    {if $listing.pagination.items_shown_from == 1}
        <div class="block-category card card-block">
        
                
            <div class="block-category-inner">
            
        {*Modification de Cyril*}
         <h1 class="h1"><span class="categorienom">{$category.name}</span></h1>
            
            
                {if $category.description}
                    <div id="category-description" class="text-muted">{$category.description nofilter}</div>
                {/if}
                {if !empty($category.image.large.url)}
                    <div class="category-cover">
                        <picture>
                            {if !empty($category.image.large.sources.avif)}<source srcset="{$category.image.large.sources.avif}" type="image/avif">{/if}
                            {if !empty($category.image.large.sources.webp)}<source srcset="{$category.image.large.sources.webp}" type="image/webp">{/if}
                            <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">
                        </picture>
                    </div>
                {/if}
            </div>
        </div>
    {/if}
</div>

En gros j'ai mis ce bout de code là : <h1 class="h1">{$category.name}</h1>  à l’intérieur du div : <div class="block-category-inner">
et j'y ai ajouté une class  pour pouvoir modifié la mise en forme.



Ensuite dans dans mon fichier /www/themes/classic/assets/css/custom.css
j'ai mis ça pour ma class:

.categorienom{
	display: block;
	color:#e6e6e6; 
	font-size:30px; 
	text-transform: none;
	font-weight: 300;	
	position:absolute;
	width:450px; 
	height:40px;
	margin-left: 20px;
	margin-top: 20px;
}

Je ne sais pas si c'est parfaitement rédiger mais ça fonctionne.

Edited October 28, 2023 by cyril_fr903 (see edit history)

[cyril_fr903]

Pour la description de catégorie.

J'ai modifié le fichier: /www/themes/classic/assets/css/theme.css

Remplacer ça:
.page-content.page-cms .block-category .block-category-inner #category-description ul{font-weight:300;margin-bottom:0;color:#232323;word-break:break-word}

Par ça :
.page-content.page-cms .block-category .block-category-inner #category-description ul{font-weight:400;margin-bottom:0;color:#e6e6e6;word-break:break-word;position:absolute;width:400px;height:300px;margin-top:80px;margin-left: 20px;font-size:14px}

Puis
Remplacer ça:  .card-block{padding:1.25rem 1.25rem .5rem}
Par ça:  .card-block{padding:1.25rem 1.25rem 1.25rem}

[Mediacom87]

Bonjour,

vous ne devez jamais modifier le fichier theme.css mais mettre les modifications dans un fichier custom.css dans le même répertoire que theme.css.

De plus, vous ne devez pas travailler sur le thème par défaut de PrestaShop mais dans un thème enfant pour pouvoir faciliter les mises à jour de PrestaShop et conserver vos personnalisations.

[SbdZ]

Bonjour,

désolé pour le temps de réponse.

Merci à vous deux pour toutes ces infos !

Je m'y attaque tout bientôt 😉

[cyril_fr903]

Merci pour tes précisions Mediacom87. Je ne savais pas mais c'est vrai que c’a parait logique.

Cependant, j'ai une question qui peut paraitre idiote.
Mais du coup comment on fait pour mettre les modifications dans custom.css sans modifier theme.css?
Ce que je veux dire, c'est :comment le site c'est quelle fichier css il doit prioriser? Puisque la du coup je vais avoir theme.css qui va dire fait moi un rendu : "A"
et custom.css qui va dire fait moi un rendu : "B"

Ça m’intéresse de savoir car je n'ai pas beaucoup modifier le fichier theme.css donc je peux facilement "refaire mes modifications" dans mon fichier custom.css afin de pouvoir remettre le fichier theme.css d'origine. Ce qui effectivement facilitera de potentiel futur MAJ. Mais pour ça il faut que je comprenne comment prioriser.


Autre question, j'ai également faire quelques modification dans des fichiers de template. En cas de MAJ ça posera problème aussi? Il y a des solutions pour palier à ça?

[Mediacom87]

La magie du CSS, Casacading Style Sheet, en gros en fonction de l'ordre, on prend tel ou tel élément et là, custom passera toujours par-dessus ce que fait theme.css.