Using different picture for category & subcategory

[smartstuff]

Perhaps the title should have read...

"Using a different picture for thumbnail and scene images in category or subcategory"

 

Banner images look great full sized but when thumbnailed to be subcategory images they look rubbish so we need to use 2 different images as the banner proportions don't work in a square box!

 

http://smart-stuff.uk/index.php?id_category=12&controller=category&id_lang=1

 

http://smart-stuff.uk/index.php?id_category=18&controller=category&id_lang=1

 

How can we set 2 different images not just a large & small version of the same one?

 

Thanks

 

Kate

Edited September 16, 2014 by smartstuff (see edit history)

[bu_marius]

hello,

 

 

you can try to use header image for this.

 

But the problem with that is the header images is static, meaning that one header image for all sub categories that you have in your prestashop store.

 

This also problem for me, because what i want is to have different sub category images for different sub category according by the product on the sub category.

 

Here is a quick how to have different images.

 

1. Depend on your method to insert images to the header, are you using tag or css ?

 

If you are using an  tag, and you have an image for every subcategory, you can simply use the following code in header.tpl :

 

<img src="{$img_dir}header{$smarty.get.id_category}.jpg" />

 

 

Then you would put header.jpg, header13.jpg, header14.jpg and header15.jpg in the img directory of your theme's directory.

 

If you need only a few header images to be different and the rest will use the default image, you'll need to use the following code in header.tpl instead :

 

<img src="{$img_dir}header{if $smarty.get.id_category == 13 OR $smarty.get.id_category == 14 OR $smarty.get.id_category == 15}{$smarty.get.id_category}{/if}.jpg" />

 

 

 

If you are using CSS to display your images, you'll need to add a class to container of the image using the following code :

 

Then you can use the following code in global.css to display the different images :

{if $smarty.get.id_category} class="cat{$smarty.get.id_category}"{/if}

 

 

.cat13 { background: url(../img/header13.jpg); }

.cat14 { background: url(../img/header14.jpg); }
.cat15 { background: url(../img/header15.jpg); }

[bu_marius]

or try to do this

 

http://nemops.com/prestashop-categories-second-image/#.VLsjQi55CKI