Jump to content

Category Image Marker?


Ben224

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...