Agrandir le visuel de ma liste de catégories

gaya_102 · October 23, 2018

Bonjour

Je trouve que quand mes clients vont sur mon site, ils voient mes catégories trop petites. Images trop petites et textes sont trop courts.

Voici un lien pour vous donner une idée

http://www.lemondedegaya.fr/boutique/455-par-format

Qu'en pensez vous? Comment puis je les agrandir pour les rendre plus lisibles?

Merci par avance de votre aide

Sandrine

Eolia · October 23, 2018

Il faut commencer par charger des images catégories à la même dimension que celle utilisée pour ce format (718 x 240)

Ensuite, il faut modifier le category.tpl du thème pour:

- Ne mettre que 3 sous-catégories par ligne

- Modifier la valeur du truncate (coupe le texte à X caractères) et modifier la hauteur de la div qui contient le nom.

Actuellement la hauteur est fixée à 16px:

#subcategories .cat_name {

display: block;
height: 16px;
font-weight: 700;
margin-top: 5px;
overflow: hidden;

}

gaya_102 · October 23, 2018

Merci pour ta réponse je vais tester se soir tranquillement.

gaya_102 · October 25, 2018

Bonjour

Je suis désolée mais je suis vraiment pas douée en prog.

J'ai quelques questions. Quand tu dis?

"Il faut commencer par charger des images catégories à la même dimension que celle utilisée pour ce format (718 x 240)"

C'est déjà le cas, je dois changer quelques choses?

Après tu me demandes de chercher et de modifier le fichier category.tpl

Je l'ai trouvé mais j'ai pas trouver la partie que tu me parles. J'ai çà

{* ----------------------------------------
Template Prestashop RosePassion
Copyright Prestacrea
Author: Prestacrea
Website: http://www.prestacrea.com
---------------------------------------- *}

{include file="$tpl_dir./breadcrumb.tpl"}
{include file="$tpl_dir./errors.tpl"}

{if isset($category)}
   {if $category->id AND $category->active}
       <h1>
           {strip}
               {$category->name|escape:'htmlall':'UTF-8'}
               {if isset($categoryNameComplement)}
                   {$categoryNameComplement|escape:'htmlall':'UTF-8'}
               {/if}
               <span class="category-product-count">
                   {include file="$tpl_dir./category-count.tpl"}
               </span>
           {/strip}
       </h1>

       {if $scenes || $category->description || $category->id_image}
       <div class="content_scene_cat">
           {if $scenes}
               
               {include file="$tpl_dir./scenes.tpl" scenes=$scenes}
           {else}
               
               {if $category->id_image}
               <div class="cat_img">
                   <img src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category')}" alt="{$category->name|escape:'htmlall':'UTF-8'}" title="{$category->name|escape:'htmlall':'UTF-8'}" id="categoryImage" />
               </div>
               {/if}
           {/if}

{if $category->description}
               <div class="cat_desc">
                   <p>{$category->description}</p>
               </div>
           {/if}
       </div>
       {/if}
       {if isset($subcategories)}
       
       <div id="subcategories">
           {assign var='nbItemsPerLine' value=4}
           <ul class="inline_list">
           {foreach from=$subcategories item=subcategory name=subcategory}
               <li class="{if $smarty.foreach.subcategory.iteration%$nbItemsPerLine == 1}first_item_of_line {/if}span3">
                   <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$subcategory.name|escape:'htmlall':'UTF-8'}" class="img">
                       <img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'category')}" alt="{$subcategory.name|escape:'htmlall':'UTF-8'}" />
                   </a>
                   <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" class="cat_name" title="{$subcategory.name|escape:'htmlall':'UTF-8'}">{$subcategory.name|truncate:20:'...'|escape:'htmlall':'UTF-8'}</a>
                   {*{if $subcategory.description}
                       <p class="cat_desc">{$subcategory.description|strip_tags:'UTF-8'|truncate:120:'...'|escape:'htmlall':'UTF-8'}</p>
                   {/if}*}
               </li>
           {/foreach}
           </ul>
       </div>
       {/if}

       {if $products}
           <div class="content_sortPagiBar">
               <div class="sortPagiBar">
                   {include file="$tpl_dir./product-compare.tpl"}
                   {include file="$tpl_dir./nbr-product-page.tpl"}
                   {include file="$tpl_dir./product-sort.tpl"}
               </div>
           </div>

           {include file="$tpl_dir./product-list.tpl" products=$products}

           <div class="content_sortPagiBar">
               <div class="sortPagiBar">
                   {include file="$tpl_dir./product-compare.tpl"}
                   {include file="$tpl_dir./pagination.tpl"}
               </div>
           </div>
       {/if}
   {elseif $category->id}
       <p class="warning">{l s='This category is currently unavailable.'}</p>
   {/if}
{/if}

Et ce que tu peux me guider car je comprend pas trop. Merci par avance de ton aide

Sandrine

Manu-41 · October 25, 2018

Test avec ceci: span4 au lieu de span3

gaya_102 · October 25, 2018

Je suis désolée mais c'est ou que je dois modifier ca?

Merci pour ton aide

Cordialement

Manu-41 · October 25, 2018

dans ton fichier category.tpl de ton thème, sélectionner tout, recherche: span3

certainement après ceci: id="subcategories"

Eolia · October 25, 2018

il y a 43 minutes, gaya_102 a dit :

"Il faut commencer par charger des images catégories à la même dimension que celle utilisée pour ce format (718 x 240)"

C'est déjà le cas, je dois changer quelques choses?

Oui c'est le format défini et qui est rectangle, mais la plupart de tes images sont carrées donc Prestashop rajoute du blanc à droite et à gauche.

Commence donc par recharger des images aux bonnes dimensions/ format.

Ensuite, dans le code du tpl ci-dessus, c'est cette ligne qui décide le nombre d'images par lignes:

{assign var='nbItemsPerLine' value=4}

Donc mettre 3 à la place de 4

Et pour la longueur des noms de produits, ils sont coupés ici:

{$subcategory.name|truncate:20:'...'|escape:'htmlall':'UTF-8'}

Donc remplacer 20 (le nombre de caractères affichés) par un plus grand (Faire des tests avec 100 ou 150) et ensuite ajuster la hauteur du bloc en css comme je te l'avais dit dans mon 1er post.

gaya_102 · October 25, 2018

J'ai modifié mais rien ne change

Manu-41 · October 25, 2018

ta vidé ton cache? tu à modifié dans le bon thème?

gaya_102 · October 25, 2018

Effectivement y avait le cache

Alors j'ai modifié le nombre de caractère à 5 et ca marche. Je met 100 et non ca reste à 25 max.

J'ai voulu changer le nombre de colonne et la non plus ca marche pas.

Voici mon code modifié

{* ----------------------------------------
Template Prestashop RosePassion
Copyright Prestacrea
Author: Prestacrea
Website: http://www.prestacrea.com
---------------------------------------- *}

{include file="$tpl_dir./breadcrumb.tpl"}
{include file="$tpl_dir./errors.tpl"}

{if isset($category)}
   {if $category->id AND $category->active}
       <h1>
           {strip}
               {$category->name|escape:'htmlall':'UTF-8'}
               {if isset($categoryNameComplement)}
                   {$categoryNameComplement|escape:'htmlall':'UTF-8'}
               {/if}
               <span class="category-product-count">
                   {include file="$tpl_dir./category-count.tpl"}
               </span>
           {/strip}
       </h1>

       {if $scenes || $category->description || $category->id_image}
       <div class="content_scene_cat">
           {if $scenes}
               
               {include file="$tpl_dir./scenes.tpl" scenes=$scenes}
           {else}
               
               {if $category->id_image}
               <div class="cat_img">
                   <img src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category')}" alt="{$category->name|escape:'htmlall':'UTF-8'}" title="{$category->name|escape:'htmlall':'UTF-8'}" id="categoryImage" />
               </div>
               {/if}
           {/if}

{if $category->description}
               <div class="cat_desc">
                   <p>{$category->description}</p>
               </div>
           {/if}
       </div>
       {/if}
       {if isset($subcategories)}
       
       <div id="subcategories">
           {assign var='nbItemsPerLine' value=2}
           <ul class="inline_list">
           {foreach from=$subcategories item=subcategory name=subcategory}
               <li class="{if $smarty.foreach.subcategory.iteration%$nbItemsPerLine == 1}first_item_of_line {/if}span3">
                   <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$subcategory.name|escape:'htmlall':'UTF-8'}" class="img">
                       <img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'category')}" alt="{$subcategory.name|escape:'htmlall':'UTF-8'}" />
                   </a>
                   <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" class="cat_name" title="{$subcategory.name|escape:'htmlall':'UTF-8'}">{$subcategory.name|truncate:100:'...'|escape:'htmlall':'UTF-8'}</a>
                   {*{if $subcategory.description}
                       <p class="cat_desc">{$subcategory.description|strip_tags:'UTF-8'|truncate:120:'...'|escape:'htmlall':'UTF-8'}</p>
                   {/if}*}
               </li>
           {/foreach}
           </ul>
       </div>
       {/if}

       {if $products}
           <div class="content_sortPagiBar">
               <div class="sortPagiBar">
                   {include file="$tpl_dir./product-compare.tpl"}
                   {include file="$tpl_dir./nbr-product-page.tpl"}
                   {include file="$tpl_dir./product-sort.tpl"}
               </div>
           </div>

           {include file="$tpl_dir./product-list.tpl" products=$products}

           <div class="content_sortPagiBar">
               <div class="sortPagiBar">
                   {include file="$tpl_dir./product-compare.tpl"}
                   {include file="$tpl_dir./pagination.tpl"}
               </div>
           </div>
       {/if}
   {elseif $category->id}
       <p class="warning">{l s='This category is currently unavailable.'}</p>
   {/if}
{/if}

Manu-41 · October 25, 2018

as tu essayé comme je te l'ai dit

devien

car avec l'inspecteur firefox ca fonctionne

gaya_102 · October 26, 2018

Ca marche merci. C'est trop bien.

Maintenant je vais voir pour agrandir les photos.

Merci en tout cas de votre aide.

gaya_102 · October 26, 2018

Juste une dernière question

Je sais que l'on peut changer la taille des photos dans la partie admin. Mais les photos des catégories, elles s'appellent comment?

Eolia · October 26, 2018

Evitez de toucher aux format de ces images c'est lié avec le css de votre thème.

Vous avez juste à recharger de nouvelles images pour vos catégories à cette taille: 718 x 240

Et pour info, si vous ne mettez plus que 2 catégories par ligne, c'est span6 qu'il faut mettre^^

gaya_102 · October 26, 2018

CA me va quand même comme ça.

J'ai changé en span6

Je suis déjà très contente du résultat.

Merci vraiment de votre aide.

Eolia · October 26, 2018

Si je vous donne l'info c'est pour que votre site ait un aspect plus pro et moins bricolé, mais vous en faites ce que vous voulez.

gaya_102 · October 26, 2018

Oui oui et j'ai apprécié. J'ai suivi votre conseil et modifié comme vous me l'avez conseillé.

Je vous remercie

Manu-41 · October 26, 2018

tu peut aussi penser à élargir un peut ton site.

Le mien est au format 1200px (taille normal de presta 1.6)

le tien est à 940px. Si tu le change, il faudra aussi redonner un peut les dimensions de certain blocks, mais ton visuel sera mieux

A+

gaya_102 · October 28, 2018

Je peux avoir le lien de ton site afin de voir le rendu.

Ca m’intéresse mais comme tu peux le voir je ne suis vraiment pas doué en prog. Pourras tu m'aider?

Merci d'avance

Agrandir le visuel de ma liste de catégories

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in