Rotating the Main Image based on categories
 

I sure hope someone can help on this one...

I've got X-cart 4.x and what I'm trying to do is have it rotate the image (using the flexy rectangles skin)

It's the banner

/skin1/images/custom/main_bg_1.jpg

I have no idea which template references this file, and I'm not the best programmer, but essentially what I'd like to do is if it's on the "hats" category I want it to display the main_bg_hats.jpg which would feature some hats, on shoes, it would change the big image to main_bg_shoes.jpg

Is this something that people are doing??

im sure youll find stuff like this in the custom mods forum but the basic rule is something like this.

Do you know where this image file is referenced? I've been looking through all the templates and just can't seem to find it..

Thanks!

/customer/home.tpl

got it!

Re: Rotating the Main Image based on categories
 

This is exactly what I want to do with swapping/rotating image when a (root) category is selected, though I currently have my original image in head.tpl as it sits below my logo and menu bar. Would the above script work in the head.tpl or do I need to look at this differently by using a .js file?

Any help is appreciated.
Christine

Re: Rotating the Main Image based on categories
 

You could use the elseif statements in the head.tpl if you wanted to.

Re: Rotating the Main Image based on categories
 

I've been playing with this and still not getting any results other than errors. I placed my images in the skin1/images folder on the host server and tried the original code in the head.tpl as:

<div class="HeadLine" style="text-align: left; height: 153px; width: 100%; margin: 10px 0px 0px 0px">
{if $cat eq "110" }
[img]{$ImagesDir}/IR_HdrImg.jpg[/img]
{elsif $cat eq "120"}
[img]{$ImagesDir}/textbanner.jpg[/img]
{elsif $cat eq "130"}
[img]{$ImagesDir}/IR_HdrImg.jpg.jpg[/img]
{else}
[img]{$ImagesDir}/textbanner.jpg[/img]
{/if}
</div>


Also placed the same images in my Images folder on the host server and the code in the head.tpl as:
<div class="HeadLine" style="text-align: left; height: 153px; width: 100%; margin: 10px 0px 0px 0px">
{if $categories[cat_num].categoryid = "110"}
<img src="/Images/IR_HdrImg.jpg" height="153" border="0" alt="IR Bullet Cameras" />
{elseif $categories[cat_num].categoryid = "120"}
<img src="/Images/textbanner.jpg" height="153" border="0" alt="IR Bullet Cameras" />
{elseif $categories[cat_num].categoryid = "130"}
<img src="/Images/IR_HdrImg.jpg" height="153" border="0" alt="IR Bullet Cameras" />
{elseif $categories[cat_num].categoryid = "140"}
<img src="/Images/textbanner.jpg" height="153" border="0" alt="IR Bullet Cameras" />
{/if}
</div>

Do you have suggestions for me to try?

Christine

Re: Rotating the Main Image based on categories
 

If you get an error please post that too.So it is easy to debug.
and
TRY THIS:
<div class="HeadLine" style="text-align: left; height: 153px; width: 100%; margin: 10px 0px 0px 0px">
{if $categories[cat_num].categoryid eq "110"}
<img src="{$ImagesDir}/IR_HdrImg.jpg" height="153" border="0" alt="IR Bullet Cameras" />
{elseif $categories[cat_num].categoryid eq "120"}
<img src="{$ImagesDir}/textbanner.jpg" height="153" border="0" alt="IR Bullet Cameras" />
{elseif $categories[cat_num].categoryid eq "130"}
<img src="{$ImagesDir}/IR_HdrImg.jpg" height="153" border="0" alt="IR Bullet Cameras" />
{elseif $categories[cat_num].categoryid eq "140"}
<img src="{$ImagesDir}/textbanner.jpg" height="153" border="0" alt="IR Bullet Cameras" />
{/if}
</div>

Re: Rotating the Main Image based on categories
 

your original code is missing and 'e' in the elseif

Re: Rotating the Main Image based on categories
 

Edit**

try this. make sure you use the <img src /> tag and that your files re in the skin1 images dir

<div class="HeadLine" style="text-align: left; height: 153px; width: 100%; margin: 10px 0px 0px 0px">
{if $main and $cat eq "110" }
<img src="{$ImagesDir}/IR_HdrImg.jpg" />
{elseif $main and $cat eq "120"}
<img src="{$ImagesDir}/textbanner.jpg />
{elseif $main and $cat eq "130"}
<img src="{$ImagesDir}/IR_HdrImg.jpg.jpg />
{else}
<img src="{$ImagesDir}/textbanner.jpg />
{/if}
</div>