Category Image Marker?

[Ben224]

Hello fellow cubecarters,

 

I am developing a new skin based on Crosshatch 5.2.5 and have the following issue to resolve:

 

I'm looking for a way to to keep a sub category image (Thumbnail) visible on a subcategory page while removing its larger 'category image' version from the corresponding product listing page when clicked through.

 

I like the idea of clicking on an image to access a sub category but find that the larger version of the same image which displays on the corresponding product listing page really obtrusive.

 

I'm able to hide the category image with CSS on the product listing pages but this removes all larger versions found on all other subcategory pages. Reason being that the larger category image rendered on product listing pages and category pages all share the same ID. I need a unique marker to target it with so that i cant deal with it separately over the array of different category levels.

 

Can anyone offer a fix?

 

Many thanks in advance.

[bsmither]

To help us visualize your goal, could you make some screen grabs and, using a graphics program, draw circles, crosses, etc on what you want to appear or go away?

[Ben224]

Hi bsmither,

Thanks for responding. Images are as follows:

I have a main category (Kids) and two subcategories (Boys Clothing > Trousers and Jeans) under this. I've shown screen shots of the two subcategories for the purpose of illustrating the task at hand.

So...

The red screen:  '>
This is the result of clicking on a 'subcategory' of (Kids) in this case (Boys Clothing). As you would expect we see a large 'category image' and smaller 'thumbnail images' representing subcategories. Everything on this page is fine and I want to keep it exactly as is.

The green screen:  '>
This is the result of clicking on a 'subcategory' of (Boys Clothing) in this case (Trousers and Jeans). We are now in the product listing page for this subcategory. As you would expect we see a large 'category image' and smaller 'thumbnail images' representing products. Everything on this page is fine with the exception of the large 'category image' which I have named 'Category Image Jeans'. I want to remove this image on the product listing pages only.

I could use the display: none; attribute to hide the image but as it shares the same ID as all other large 'category images' they all disappear. I need to single this image out on the product listing pages only.

Many thanks in advance.

[bsmither]

I see Kids as the top-level category (TLC), then Boys Clothing as a second-level category (2LC), then Trousers & Jeans as a third-level category (3LC).

 

Even though your inventory has no items assigned to the 2LC, nevertheless, it is possible. As such, in the future you may want to create a 4LC, leaving these items in the category they are in now.

 

So, managing the imagery will be very difficult if by trying to determine the level of category, but can be based on whether or not products are being listed (which is the only other discerning factor evident in your images).

 

In the template file content.category.php, we will use a template expression similar to {if isset($PRODUCTS)}. If there are products to be listed, then quash the large image. The sub-cat images, if any, will still be shown.

<h2>{$category.cat_name}</h2>
{if isset($category.image) && empty($PRODUCTS)}
<div id="categoryImage">
    <img src="{$category.image}" alt="{$category.cat_name}"/>
</div>
{/if}

The change is in the second line. Currently, if there is a cat image to display, then display it. We will logically AND the requirement that there be no products to list (PHP's empty function).
 

[Ben224]

Hi bsmither,

 

Thanks for taking the time to look into this. I've implemented the change and all is working perfectly. Exactly what I needed thank you!