Jump to content

Remove Sub Cat image on product listing page

jaimeweb

By jaimeweb
in Core developers

 Share

Recommended Posts

jaimeweb Newbie

jaimeweb

Posted
Posted

Hi Everyone.

This should be simple...but i cant work out what to remove or edit.

I want to keep the sub cat images when they are all listed....but then when you click in to a sub cat i want the top image to be removed...

What do i need to edit and how?
I have attached an image of what i want to be removed.


Thanks

36513_EuPeJDIXy0e7YF7AFmZL_t

Link to comment
Share on other sites
rocky Apprentice

rocky

Posted
Posted

Change lines 20-24 of category.tpl (in PrestaShop v1.3.5) from:

{else}
   <!-- Category image -->
   {if $category->id_image}
       <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" />
   {/if}



to:

{*{else}
   <!-- Category image -->
   {if $category->id_image}
       <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" />
   {/if}*}

  • Like 3
Link to comment
Share on other sites
rocky Apprentice

rocky

Posted
Posted

To remove the subcategory thumbnails, change lines 39-46 of category.tpl from:

<a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$subcategory.name|escape:'htmlall':'UTF-8'}">
   {if $subcategory.id_image}
       <img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium')}" alt="" />
   {else}
       <img src="{$img_cat_dir}default-medium.jpg" alt="" />
   {/if}



to:

{*<a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$subcategory.name|escape:'htmlall':'UTF-8'}">
   {if $subcategory.id_image}
       <img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium')}" alt="" />
   {else}
       <img src="{$img_cat_dir}default-medium.jpg" alt="" />
   {/if}


*}



You may also need to edit global.css to add spacing between the subcategory names.

Link to comment
Share on other sites
jay187 Newbie

jay187

Posted
Posted
You may also need to edit global.css to add spacing between the subcategory names.


Hello rocky

I have done this but was wondering if it was possible to display the subcategories in alphabetical order as it is now, but vertically instead of horizontally. Also, the subcategory text is centered, is there a way to make it so it isnt centered?

Now the other thing is, coz I have so many subcategories it stretches my homepage too much when a category is expanded. Can I make it unexpandable?

I hope this makes sense, I have included some images to show a better idea of what I mean. Sorry for so many questions and thanks again Rocky.

36772_u9d7sTqzXK4gb68xhCfA_t

36771_ho4dQUMONJh1vHXxXLFC_t

Link to comment
Share on other sites
  • 2 months later...
zoveress Newbie

zoveress

Posted
Posted

Hi,

I have a question. I have many categories and I just it to be differently displayed.
I found information on how to remove the category image so this is not in issue.

What I would like to do now is to change the 3 columns display format to just one column. So instead of this:

category1 category2 category3
category4 category5 category6

I would like to see this:

category1
category2
category3
category4
category5
category6

and also I would like to resize and recolour the link characters for the subcategory links.

Thanks in advance.

Z.

Link to comment
Share on other sites
rocky Apprentice

rocky

Posted
Posted

Change the following code in the /* category.tpl */ section of global.css:

body#category #subcategories li { margin-right: 10px }



to:

body#category #subcategories li { margin-right: 10px; clear: left }



That should put each subcategory on a separate line.

Link to comment
Share on other sites
zoveress Newbie

zoveress

Posted
Posted

Hi,

I am using a custom template and I do not seem to find this line in the tempaltes global CSS however I have a file called category.css which contains this:

/* category.tpl */
body#category #subcategories li { height: 136px; width: 108px; margin-right: 3px }
div.cat_desc { margin: 0 1em }
body#category div#subcategories .inline_list a img { display: inline }
#category img#categoryImage { margin-top: 1em }

Thanks
Z.

Link to comment
Share on other sites
  • 8 months later...
publitesa Newbie

publitesa

Posted
Posted

Hi.

I need not to show top category image and I try editing category.tpl from my theme and it doesn't run...

I think it's not the file I have to edit because I also tried deleting all <div class="cat_img"> div and I'm still viewing top category image...

I tried editing it on my theme and on default theme with no results.

I'm using 1.4.6.2 Prestashop.

 

Can anyone help me not showing category image on the top of products list?

 

Thanks a lot!

Link to comment
Share on other sites
  • 3 weeks later...
  • 2 months later...
  • 5 months later...
  • 1 month later...
Bejo Newbie

Bejo

Posted
Posted

dear

rocky's

 

 

Thank for great information. can you help me to make product not display at main category.

example :

 

*Human -

sub cate= 1. man

2. woman

 

when the people click kategory, the sub cate = man & woman appears, and the bottom of sub cat the list product is appears. how to make it not display at there? thank

 

i can not figure it how to it.thx

Link to comment
Share on other sites
  • 3 months later...
  • 5 months later...
tfrangi Newbie

tfrangi

Posted
Posted

Hi, I up this topic because @comprausa you asked exactly for the point I'm working on, it's been hours I try differents things in the category.tpl file but I didn't managed anything (I even try to put php directly in the file between {php} tags...).

 

So if anyone have the answer to do that :

 

If an image associate to a category or subcategory exits --> so display it

if NOT --> don't display the default image !

 

I really thank the one that can help me fast.

 

TF

Link to comment
Share on other sites
  • 10 months later...
djrustynko Newbie

djrustynko

Posted
Posted

Change lines 20-24 of category.tpl (in PrestaShop v1.3.5) from:

 

{else}    <!-- Category image -->    {if $category->id_image}        <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" />    {/if}

to:

 

{*{else}    <!-- Category image -->    {if $category->id_image}        <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" />    {/if}*}

 

prestashop 1.5.6.2 work ?

Link to comment
Share on other sites
  • 1 month later...
ukmatern Newbie

ukmatern

Posted
Posted

Change lines 20-24 of category.tpl (in PrestaShop v1.3.5) from:

 

{else}    <!-- Category image -->    {if $category->id_image}        <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" />    {/if}

to:

 

{*{else}    <!-- Category image -->    {if $category->id_image}        <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" />    {/if}*}

Hi I would also like to know does this work for prestashop 1.5.6.2. I have the same version and im changing it as instructed but I cant get it to work and i dont know if im doing it wrong or its just out of date. Help Please! :)

 

Regards

Link to comment
Share on other sites
  • 3 months later...
  • 3 weeks later...
shv Newbie

shv

Posted
Posted

HI,

 

I'd need the same modification (removing category pictures on listing pages) but for the PS 1.6.0.8 now. What would be the best way of doing it?

 

Many thanks,

shv

 

Change lines 20-24 of category.tpl (in PrestaShop v1.3.5) from:
 

{else}    <!-- Category image -->    {if $category->id_image}        <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" />    {/if}

to:

{*{else}    <!-- Category image -->    {if $category->id_image}        <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" />    {/if}*}
Link to comment
Share on other sites
reno123 Newbie

reno123

Posted
Posted

I 've the same issue to do :)

 

Advice from shrinidhim (disable category_deafault images) do not work.  Mayby deleting it helps, but what if after some time I would like to recover the images for categories.

 

So mayby other trick ?

HI,

 

I'd need the same modification (removing category pictures on listing pages) but for the PS 1.6.0.8 now. What would be the best way of doing it?

 

Many thanks,

shv

Link to comment
Share on other sites
shv Newbie

shv

Posted
Posted (edited)

Hi reno123,

 

I found the solution now, perhaps it helps you as well.

 

1. Category pics - just disable in PS category settings (via a simple ¨edit¨ in PS back office, as suggested above);
 
2. The same trick does not work on subcategories though if one wants to keep subcategory pics for displaying them on category listing pages (but omit displaying them on respective subcategory listing pages) - so one needs to modify the category.tpl file instead. Simple modification is just as described below, to comment part of the code:
 
 

The manipulation which worked for me from those listed in the above link (you can try it first, and if not working, go to the above link to see more possibilities) is as follows:

 

One needs to change category.tpl from:

 

<!-- Category image -->
                   <div class="content_scene_cat_bg"{if $category->id_image} style="background:url({$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}) right center no-repeat; background-size:cover; min-height:{$categorySize.height}px;"{/if}>
                        {if $category->description}
                            <div class="cat_desc">
                            <span class="category-name">
                                {strip}
                                    {$category->name|escape:'html':'UTF-8'}
                                    {if isset($categoryNameComplement)}
                                        {$categoryNameComplement|escape:'html':'UTF-8'}
                                    {/if}
                                {/strip}
                            </span>
                            {if Tools::strlen($category->description) > 350}
                                <div id="category_description_short" class="rte">{$description_short}</div>
                                <div id="category_description_full" class="unvisible rte">{$category->description}</div>
                                <a href="{$link->getCategoryLink($category->id_category, $category->link_rewrite)|escape:'html':'UTF-8'}" class="lnk_more">{l s='More'}</a>
                            {else}
                                <div class="rte">{$category->description}</div>
                            {/if}
                            </div>
                        {/if}
                     </div>
                  {/if}
            </div>
 

to: 

 

<!-- Category image -->
                   {* <div class="content_scene_cat_bg"{if $category->id_image} style="background:url({$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}) right center no-repeat; background-size:cover; min-height:{$categorySize.height}px;"{/if}>
                        {if $category->description}
                            <div class="cat_desc">
                            <span class="category-name">
                                {strip}
                                    {$category->name|escape:'html':'UTF-8'}
                                    {if isset($categoryNameComplement)}
                                        {$categoryNameComplement|escape:'html':'UTF-8'}
                                    {/if}
                                {/strip}
                            </span>
                            {if Tools::strlen($category->description) > 350}
                                <div id="category_description_short" class="rte">{$description_short}</div>
                                <div id="category_description_full" class="unvisible rte">{$category->description}</div>
                                <a href="{$link->getCategoryLink($category->id_category, $category->link_rewrite)|escape:'html':'UTF-8'}" class="lnk_more">{l s='More'}</a>
                            {else}
                                <div class="rte">{$category->description}</div>
                            {/if}
                            </div>
                        {/if}
                     </div> *}
                  {/if}
            </div>

 

It just comments part of the code, so one can go back to the file and simply enable it (by erasing comment signs) in case of necessity.

 

Hope that helps,

shv

 

I 've the same issue to do :)

 

Advice from shrinidhim (disable category_deafault images) do not work.  Mayby deleting it helps, but what if after some time I would like to recover the images for categories.

 

So mayby other trick ?

Edited by shv (see edit history)
Link to comment
Share on other sites
idoityourself Newbie

idoityourself

Posted
Posted (edited)

I have 1.6 and have it turned off on  category_default under images but they are still showing. Any ideas?

Id like to keep little tumbnails on categories but when you click through not have the big image displayed across the top.

 

 

category.tpl has this

 

{if $category->id_image}

                    <img class="img-responsive" src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}" alt="{$category->name|escape:'htmlall':'UTF-8'}" title="{$category->name|escape:'htmlall':'UTF-8'}" id="categoryImage"  /> 
 
thanks
Edited by idoityourself (see edit history)
Link to comment
Share on other sites
reno123 Newbie

reno123

Posted
Posted

This works for me:

 

In file category.tpl you have to delete the code:

{if $category->id_image} style="background:url({$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}) 0 top no-repeat; background-size:contain; min-height:{$categorySize.height}px;"{/if}

but not whole line - only the code above.

 

Only disadventage of this is theblack strip over the name of the category is left - I do not know how to remove it. Mayby sombody alse know it ? :)

Link to comment
Share on other sites
  • 4 months later...
slider2nl Newbie

slider2nl

Posted
Posted (edited)

I also want to remove the top image i disabled it from the back office and even removed it from settings -> images -> category_default 870x217 tryed the codes and removed the codes i everytime i end up as image above. i think it's the text part of it, but i cant find it to remove that part as well the question is can it be removed totaly without losing the tumbnails of the subcategory and products..

Extra info using 1.6.0.13

Edited by slider2nl (see edit history)
Link to comment
Share on other sites
  • 3 weeks later...

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...