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>

Re: Rotating the Main Image based on categories
 

Thanks for your reply. Still not working... I don't get an error, however the placement for the image(s) is blank for the height of 153. I've tried adding foreach, but that places all images in order all at once in the headline.

Re: Rotating the Main Image based on categories
 

Thanks for your reply, I copied from the original post here, and X-Cart caught that error when I refreshed my browser.

Re: Rotating the Main Image based on categories
 

did you try this?

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

Re: Rotating the Main Image based on categories
 

Thanks for the update, still not working. I have my images in both the root Images folder and skin1/images/ folder on my server.

Along with the code you suggested, I also tried the below, but still nothing

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

I know there's something I've missed, and I'll try any suggestions you have.

Thanks again

Re: Rotating the Main Image based on categories
 

look like there are some quotes mising in the code I posted. it's corrected.

Re: Rotating the Main Image based on categories
 

You didnt closed the double quotes of img src
try this:
<div class="HeadLine" style="text-align: left; height: 153px; width: 100%; margin: 10px 0px 0px 0px">
{if $main and $categoryid eq "110" }
<img src="{$ImagesDir}/IR_HdrImg.jpg" />
{elseif $main and $categoryid eq "120"}
<img src="{$ImagesDir}/textbanner.jpg"/>
{elseif $main and $categoryid eq "130"}
<img src="{$ImagesDir}/IR_HdrImg.jpg" />
{else}
<img src="{$ImagesDir}/textbanner.jpg"/>
{/if}
</div>

Re: Rotating the Main Image based on categories
 

I have an image showing, and it captures to the last image though it doesn't "rotate/swap" out when I click on a new category. When I changed the image name for the last <img src="{$ImagesDir}/IR_HdrImg.jpg. /> that image showed, making sure that I typed in the correct image name for the required folder.

{else}
<img src="{$ImagesDir}/textbanner.jpg" />
{/if}
</div>

Is there another place that I've missed for this to work?

Re: Rotating the Main Image based on categories
 

please post the code you are using. and a url is you can.

Re: Rotating the Main Image based on categories
 

I tried this, and an image does show, but it captures only the last {else} image. When I commented out the last image I still have a blank area for the image, but clicking on those categories listed doesn't show an image see attached. (I placed a temporary border around the area that I want the image to reside.)

Re: Rotating the Main Image based on categories
 

can you post a URL?

Re: Rotating the Main Image based on categories
 

replace $categoryid with $cat

Re: Rotating the Main Image based on categories
 

Here's our url: www.clintonelectronics.com/store

I'm still in the customizing stage so it's unfinished, and in some areas purposely ugly for me to get back to when other areas are complete.

Re: Rotating the Main Image based on categories
 

{if $main and $cat eq "249" }
1
{elseif $main and $cat eq "250"}
2
{elseif $main and $cat eq "252"}
3
{else}
4
{/if}

this works on my server. the smarty is correct. make sure the categorey number are correct.

Re: Rotating the Main Image based on categories
 

where did you get you category numbers from? I don;t see 110, 120, 130 in your store? those look like sort numbers to me. the $cat number can be found in the URL when you click on the category.

Re: Rotating the Main Image based on categories
 

I tested this on my server. I replaced the images with simple text and it worked.

Re: Rotating the Main Image based on categories
 

AWESOME.... Thank you Ashley and Vetrivel! I have this working now on my computer. You were right Ashley, I was using the order_by number and not the parentid from my cpanel.

For those interested the code is as follows:
<div class="HeadLine" style="text-align: left; height: 153px; width: 100%; margin: 10px 0px 0px 0px">
{if $main and $cat eq "68" }
<img src="{$ImagesDir}/IR_HdrImg.jpg" />
{elseif $main and $cat "15"}
<img src="{$ImagesDir}/textbanner.jpg"/>
{elseif $main and $cat eq "16"}
<img src="{$ImagesDir}/textbanner.jpg" />
{elseif $main and $cat eq "14"}
<img src="{$ImagesDir}/textbanner.jpg" />
{else}
<img src="{$ImagesDir}/IR_HdrImg.jpg"/>
{/if}
</div>

Also works for subcategory as:
{elseif $cat "70"}
<img src="{$ImagesDir}/textbanner.jpg"/>


Thanks again,
Christine

Re: Rotating the Main Image based on categories
 

whew! that was a tough one :) glad its working.

Re: Rotating the Main Image based on categories
 

Me too! Thank you for sticking with me. I've been able to find the "how to" for most of my customizing wants with the posts from the experts on these forums. This is why I try to post my final results when I get something working properly.

Thanks again.

Re: Rotating the Main Image based on categories
 

thats great.and finally you got it..:lol::lol::lol::lol: