Changing subcategory image to differ from Category

[Clean Mitts]

Hi, I like my category images the way they are, but when I view that certain category, it shows a stupidly small thumbnail at the top which I'd prefer to change to another image to stretch the whole width of the content page.

 

So my question is this (which I have seen done somewhere but can't find where!) I need to know how to edit the relevant tpl files so that I can change the image that shows at the top of each category, instead of showing the thumbnail.

[codegrunt]

In category.tpl you normally have the following:

 

<!-- Category image -->
{if $category->id_image}
  <div class="align_center">
<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" width="{$categorySize.width}" height="{$categorySize.height}" />
  </div>
  {/if}

 

You only get one image per category (though there can be multiple resized versions) so short of a custom module or class override, you would have to create custom images in a known location following a predictable naming format that you can reference in the template.

 

Something like . . .

 

		<!-- Category image -->
		<div class="align_center">
			<img src="http://example.com/path/to/images/{$category->name|regex_replace:'/[^A-Za-z0-9]/':'_'}.jpg" title="{$category->name|escape:'htmlall':'UTF-8'}" id="categoryImage" width="640" height="40" />
		</div>

 

So in the above you are hardcoding the path to the category image to a known location where it is the defined category name but with all non-alphanumeric characters replaced with "_" and a preset height and width 640x40. You may need to also play with the CSS definition if categoryImage has conflicting declarations.

 

Cheers

Edited June 1, 2012 by codegrunt (see edit history)

[Clean Mitts]

Thanks for the quick reply!

 

Tried the above, still can't get it to load.

 

I set it to <img src="http://www.cleanmitts.org/shop/themes/cleanmittsv1/img/customcat/{$category->name|regex_replace:'/[A-Za-z0-9/':'_'}.jpg"

 

and uploaded the images to that folder... on google chrome debug it's trying to load an image from

 

http://www.cleanmitts.org/shop/themes/cleanmittsv1/img/customcat/.jpg

 

Doesn't look like it's adding the variable - the category name, to the image name.

 

www.cleanmitts.org/shop

Edited June 1, 2012 by Clean Mitts (see edit history)

[Clean Mitts]

I changed the code to remove the |regex_replace:'/[A-Za-z0-9/':'_' so it just shows:

 

<img src="http://www.cleanmitts.org/shop/themes/cleanmittsv1/img/customcat/{$category->name}.jpg"

 

and I've named the images the same name as the categories, and it works fine in Firefox & Google Chrome

 

Thanks codegrunt

[codegrunt]

Sorry about the regular expression typo - it should have been:

 

'/[^A-Za-z0-9]/'

 

Cheers