Replace category text with thumbnail on the 'Sub-Category' landing page

[kamaaina]

I moved this to technical forum

Edited April 13, 2015 by kamaaina (see edit history)

[NemoPS]

Is that the main category image? Or one of the "thumbnail" images for categories?

[kamaaina]

see: It is the category landing page which displays the sub-category products (the page that only has a text category heading).

 

1. Main category: http://kamaainahawaii.com/3-island-wear-women
 

2. Sub-categories: http://kamaainahawaii.com/14-beachwear
 

3. Sub-categories landing page: http://kamaainahawaii.com/13-sarongs

 

or

 

http://kamaainahawaii.com/5-t-shirts-tees

[kamaaina]

would like the category thumbnail (which is the large image reduced) to replace the text heading for all Main, sub-categories and sub-sub categories

[kamaaina]

in category.tpl this is the code that brings up the category text heading, I need to replace it with the relevant category/sub-category thumbnail image instead of the category name.

 

{if $category->id AND $category->active}

<h1 class="page-heading{if (isset($subcategories) && !$products) || (isset($subcategories) && $products) || !isset($subcategories) && $products} product-listing{/if}">

<span class="cat-name">

{$category->name|escape:'html':'UTF-8'}{if isset($categoryNameComplement)} {$categoryNameComplement|escape:'html':'UTF-8'}{/if}

</span></h1>

[NemoPS]

See where it has $category->name? You want this instead

<img src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}"/>

[kamaaina]

Thank you, your help is really appreciated. It works great, but it displays the large image instead of the smaller size - see image below?

 

 

This is what I added:

 

<h1 class="page-heading{if (isset($subcategories) && !$products) || (isset($subcategories) && $products) || !isset($subcategories) && $products} product-listing{/if}">

<span class="cat-name">

<img src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}"/>

 

<!-- {$category->name|escape:'html':'UTF-8'}{if isset($categoryNameComplement)} {$categoryNameComplement|escape:'html':'UTF-8'} -->{/if}

 

</span></h1>

Edited April 15, 2015 by kamaaina (see edit history)

[NemoPS]

Try with small_default instead of category_default, if that size doesn't exist or categories, you might want to great a new one from preferences, images

[kamaaina]

I did this and it worked - however is it ok to use:

 

<h1 class="page-heading{if (isset($subcategories) && !$products) || (isset($subcategories) && $products) || !isset($subcategories) && $products} product-listing{/if}">

 

<div class="col-md-4">

<div class="image">

<img class="replace-2x img-responsive" src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}"/>

 

<!-- {$category->name|escape:'html':'UTF-8'}{if isset($categoryNameComplement)} {$categoryNameComplement|escape:'html':'UTF-8'} -->{/if}

</span></h1>

 

[NemoPS]

Well the big one will still be loaded, this means more resources and heavier page. But yes, it's a workaround so you can use it if you want

[kamaaina]

Ok - but the thumbnails images set in categories don't work anyways and system category reduces the larger image for the category thumbnails - this issue has not been fixed by PS

[NemoPS]

..?
I am afraid I don't get what you mean, could you clarify?

[kamaaina]

See attached image for explanation: Ok - but the thumbnails images set in categories don't work anyways and system category reduces the larger image for the category thumbnails - this issue has not been fixed by PS

 

[NemoPS]

Thumbs should be displayed in the top menu actually, but your theme might not support them