Subcategory Images

[wendylady]

If you click on the category in left menu and then see the subcategories, how do I make the subcategories as images? I used to use the Thumbnail_Image for it, but I am using this to show buttons in the menu.

[Jamie]

We don't have a built in feature to do that. You could try modifying the product_catalog_nav.tpl.php template file and add a variable corresponding to one of the image fields on your category records. This post explains some of those variables and how to reference them:
http://www.ldev.com/forums/showthread.php?t=4153

[wendylady]

Thanks! I modified the product_catalog_nav.tpl.php file and hardcoded my links and used the Thumbnail_Image for my subcategories.

[enchantedneedle]

Or you could upload a thumbnail for each subcategory and modify the subcategory.tpl.php to this

<?php /* This line prevents direct access to template. Don't remove it. */ if (!defined('SC_INCLUDE_OK')) die; ?>
<!-- Template: <?php print basename(__FILE__) ?> -->

<div class="subcategory">
<img src="<?php print $Thumbnail_Image['dyn'] ?>" alt="<?php print $Thumbnail_Image['alt'] ?>" width="<?php print $Thumbnail_Image['width'] ?>" height="<?php print $Thumbnail_Image['height'] ?>" />
<br>
	<a href="<?php print $URL ?>" title="<?php print $Link_Title ?>"><?php print $Name ?></a>
</div>

It seems to be working for me pretty well, but I haven't had much time for a thorough check.

[enchantedneedle]

If you want to add images to the subcategories and hyperlink them to the subcategory page like the text link, then replace with this code instead of the above:

<?php /* This line prevents direct access to template. Don't remove it. */ if (!defined('SC_INCLUDE_OK')) die; ?>
<!-- Template: <?php print basename(__FILE__) ?> -->

<div class="subcategory">
<a href="<?php print $URL ?>" title="<?php print $Link_Title ?>">
<img src="<?php print $Thumbnail_Image['dyn'] ?>" alt="<?php print $Thumbnail_Image['alt'] ?>" width="<?php print $Thumbnail_Image['width'] ?>" height="<?php print $Thumbnail_Image['height'] ?>" /> </a>
<br>
	<a href="<?php print $URL ?>" title="<?php print $Link_Title ?>"><?php print $Name ?></a>
</div>

[think411]

If you want to add images to the subcategories and hyperlink them to the subcategory page like the text link, then replace with this code instead of the above:

<?php /* This line prevents direct access to template. Don't remove it. */ if (!defined('SC_INCLUDE_OK')) die; ?>
<!-- Template: <?php print basename(__FILE__) ?> -->

<div class="subcategory">
<a href="<?php print $URL ?>" title="<?php print $Link_Title ?>">
<img src="<?php print $Thumbnail_Image['dyn'] ?>" alt="<?php print $Thumbnail_Image['alt'] ?>" width="<?php print $Thumbnail_Image['width'] ?>" height="<?php print $Thumbnail_Image['height'] ?>" /> </a>
<br>
	<a href="<?php print $URL ?>" title="<?php print $Link_Title ?>"><?php print $Name ?></a>
</div>

Tammy, this works soooooo perfect. This should definitely be coded into SC as an option under categories. Thanks for the great fix!

[wendylady]

I have thumbnail images so my subcategories have images on the category page. The images show in Firefox, but they don't show in IE8.

This is the code I have in my subcategory.tpl.php file:

<div class="subcategory">
<a href="<?php print $URL ?>" title="<?php print $Link_Title ?>"><img src="<?php print $Thumbnail_Image['dyn'] ?>" <?php print $Thumbnail_Image['dims'] ?> alt="<?php print $Thumbnail_Image['alt'] ?>" /><p><?php print $Name ?></p></a>
</div>

Any ideas why they don't show in IE8?

[wendylady]

I used Tammy's code and now it shows. Thanks Tammy!

[ljcaswell]

This worked great for me except that I was getting image missing placeholders on some browsers where the image for a certain category wasn't set. I added an if statement to check if the image has been set.

<div class="subcategory">
<a href="<?php print $URL ?>" title="<?php print $Link_Title ?>">
<?php if($Thumbnail_Image['dyn']) { ?>
<img src="<?php print $Thumbnail_Image['dyn'] ?>" alt="<?php print $Thumbnail_Image['alt'] ?>" width="<?php print $Thumbnail_Image['width'] ?>" height="<?php print $Thumbnail_Image['height'] ?>" /> </a>
<br>
<?php } ?>
        <a href="<?php print $URL ?>" title="<?php print $Link_Title ?>"><?php print $Name ?></a>
</div>