Different Header Image for each page - is this possible?

[Guest pixibab]

Again, please excuse my limited understanding of php / templates / etc (gimme good ol xhtml and a style sheet anyday) but I cannot seem to figure out how to do this - in fact, i'm not even sure if it's possible within this template setup (?) since, after a week of messing with this php stuff, I still don't even really understand how the pages are called/displayed...

Anyway, I found one mod that offers a random alternate header image on reload/refresh but I would like to set a specific header images for each site doc (if I could do that, I could replace our home site completely and use the cubecart as our whole site - which would remove the problem of people having to leave the shopping cart to go back to the home site ..etc etc.. - and would be ideal!)

have my fingers crossed that someone will tell me there's a simple way to accomplish this (? but I'm not placing an bets on it)! Any ideas / suggestions?

Thanks you guys (BTW this board is great - I would be completely lost without it!)

Kim

[Robsta]

The template is purely xhtml/html/css based. Just look in the skins directory.

[Guest pixibab]

The template is purely xhtml/html/css based. Just look in the skins directory.

Yeah I know but that doesn't answer my question (!)..

The Index.tpl and Cart.tpl just call the header via a header div (defined in the stylesheet as a background image) so I know how to change the header image, HOWEVER, even if I created 10 different header divs with a different background for each one .. where would I place them?

In other words: when a site docs link is clicked, where is the page that it calls (where I would re-name the header div to one that I had created with that specific image..)? because, as far as I can see, the only place the header div is defined is in the Index and Cart .tpl files (in the skins directory)and so you can only define one header image for all pages (?)

If I am wrong about that - which I'm hoping I am - THAT is the answer I'm looking for..!

Thanks anyway for trying to help!

[Guest]

You would need a mod to call different headers for different pages. You can post a request at cubecart.org

[Guest]

Could you not include a simple javascript that returns a new image whenever the page gets refreshed. The js and image links would be included in the index and cart.tpl templates.

[Guest pixibab]

Could you not include a simple javascript that returns a new image whenever the page gets refreshed. The js and image links would be included in the index and cart.tpl templates.

Yeah - I would prefer to choose which image/header goes with each page.. but a random image on refresh is another option.

[Guest kaskudoo]

kim,

i also try to do the exact same thing - too bad i have no idea about php ....

i have also my site separate from the cart and keep it like that i guess. the reason is the very reason you posted tis here - i want more customization in the different page parts (like header)

if you find a solution for this, please post it here - also post if you manage to implement a javascript that changes the header (or maybe the same with php?) -- that would do it as a compromise for me as well (i would still keep the website separate, but it would make the cart more attractive.

[Guest pixibab]

i suppose you could just use any simple random image script in the your_skin/styleTemplates/Global/index.tpl (and cart.tpl) files... just replace the header div (where the header image is defined as a background) with an actual image within the div.. then change the SESSION div (to define position stacked on header div i.e. go with z-index 100 and position it to be displayed on top of the header image).. should be easy enough (not that i've tried it - but i don't know why it wouldn't work?)

i.e. something like:

<script language="JavaScript"><!--

// change this new array to the number of images you have

images = new Array(3);

// then list images but i would go with full path rather than relative with the shopping cart stuff

images[0] = <img src='http://www.your site.com/random/header1.gif' alt="Your Mom">";

images[1] = "<img src='http://www.yoursite.com/random/header2.gif' alt="We Rock">";

// or add a link to the header image

images[2] = "<a href = 'http://www.mysite.com/index.htm'><img src='http://www.yoursite.com/random/headers3.gif' alt="Your Site Home Page"></a>";

// just add more to array to have more images

index = Math.floor(Math.random() * images.length);

document.write(images[index]);

//done

// --></script>

lemme know if that doesn't work (this is just a quick/sloppy script here) ans i will put some effort into providing somethig that does

k

[Guest kaskudoo]

i will tru this out.

the positioning of it is no problem - i have the header designed, so that there are 3 div's (left - middle - right), so i can just place the image in the middle div and everything should be fine

maybe i will get to it tonight - can't promise though

and thanks for this - greatly appreciated

EDIT

____________________

so, i did actually not try out Kims script (sorry!) - i never really liked javascript anyways

i did however, find an image rotating script, which is free and based on php

you create a folder with the images and the script in it (a php file) and thats it - just refer to the php file as you would point to an image and thats it - really easy ... and you don't have to change any code if you ever wanna replace the images, you just replace the files in the folder.

thats exactly what i wanted - my first test run was successful and as soon as i have designed some header images i am ready to go

so thanks anyways - i got where i wanted to go with this

uh, if someone is interested in this, check this link out:

h..p://alistapart.com/articles/randomizer/

[Guest typopunk]

Hello Kim,

if I get your question right you want to have an individual header image for each page that is set up in the site docs section and another one for the rest (shop). It's not too difficult to adjust the script to achieve this:

Theory:

Each site doc is called with a unique docId. We grab this docId and use it to indicate the image that should show up. The shop pages (as they are no defined as site docs) have no docId, so these pages use "headerimage.jpg" as header graphics (of course you can also use a different name then). The standard "About Us" page for example uses docId 1 (you can see the Id in the link address) so that page would use "headerimage1.jpg". "Contact Us" is docId 2 so it gets "headerimage2.jpg". And so on...

First step:

It depends on where your header is located but I guess it is placed in styleTemplates/global/index.tpl (and cart.tpl).

So here for example you have something like <img src="path/to/headerimage.jpg" />. Using that code ALL pages get the same header of course. That's okay for the start, the same goes for cart.tpl.

Adjusting the script:

Now we need to make the docID available in the templates. Therefore open index.php in the shop's root directory. At the very end you find "// parse and spit out final document". Before this comment add a new line and enter

$body->assign("VAL_DOCID",$_GET['docId']);

That way we now can access the docId with the variable VAL_DOCID in the templates.

Last step:

Open styleTemplates/global/index.tpl again and go to your header image tag <img src="path/to/headerimage.jpg" />

We need to add the Id here so rewrite this code as <img src="path/to/headerimage{VAL_DOCID}.jpg" />

The script is now complete (cart.tpl doesn't need to be changed as it is not used for site docs) and you only need to store your header images with the special names. You need to check the links for the special docIds and then add the number after "headerimage" as written above and it should work.

Good luck! :(

[Guest pixibab]

Hello Kim,

if I get your question right you want to have an individual header image for each page that is set up in the site docs section and another one for the rest (shop). It's not too difficult to adjust the script to achieve this:

Theory:

Each site doc is called with a unique docId. We grab this docId and use it to indicate the image that should show up. The shop pages (as they are no defined as site docs) have no docId, so these pages use "headerimage.jpg" as header graphics (of course you can also use a different name then). The standard "About Us" page for example uses docId 1 (you can see the Id in the link address) so that page would use "headerimage1.jpg". "Contact Us" is docId 2 so it gets "headerimage2.jpg". And so on...

First step:

It depends on where your header is located but I guess it is placed in styleTemplates/global/index.tpl (and cart.tpl).

So here for example you have something like <img src="path/to/headerimage.jpg" />. Using that code ALL pages get the same header of course. That's okay for the start, the same goes for cart.tpl.

Adjusting the script:

Now we need to make the docID available in the templates. Therefore open index.php in the shop's root directory. At the very end you find "// parse and spit out final document". Before this comment add a new line and enter

$body->assign("VAL_DOCID",$_GET['docId']);

That way we now can access the docId with the variable VAL_DOCID in the templates.

Last step:

Open styleTemplates/global/index.tpl again and go to your header image tag <img src="path/to/headerimage.jpg" />

We need to add the Id here so rewrite this code as <img src="path/to/headerimage{VAL_DOCID}.jpg" />

The script is now complete (cart.tpl doesn't need to be changed as it is not used for site docs) and you only need to store your header images with the special names. You need to check the links for the special docIds and then add the number after "headerimage" as written above and it should work.

Good luck!

Perfect - That seems simple enough and is well explained - thank you very much! I will get on it tomorrow night...

K

[Guest kaskudoo]

is it possible to do this with product pages as well?

[Guest typopunk]

is it possible to do this with product pages as well?

Hello kaskudoo,

if you want to have different headers for the product pages only (and the same image for shop and site docs) it is almost the same process as we can grab the productId and use it to indicate the active product. According to the description above you'd rewrite that line in index.php as

You need more? You can extend this system for almost every area of the shop as they all use different Id names. You only need to look for the indicating Id in the web address and add it to the code in index.php. For example if you also want different images for each category list, then the code would look like this:

$body->assign("VAL_PRODUCTID",$_GET['productId']);

and in index.tpl use <img src="path/to/headerimage{VAL_PRODUCTID}.jpg" />



That way only the product pages would show different headers. But I guess you want to mix both things: Having different images on the site docs and individual pics on the product pages. So it's getting a little more difficult. Also the Id of a product and of a site doc can be the same number but we want to show different pictures of course. So we need to go a slightly different way:



First step:

First we go to index.tpl and search for the header image. Similar to the first description this time we use the expression <img src="path/to/headerimage{VAL_HEADERID}.jpg" />

So if we do not get a header Id then the image named "headerimage.jpg" is used. Just as in the examples above.



Adjusting the script:

This time we need to create the variable VAL_HEADERID that we can use in the template. Therefore open index.php in the shop's root directory. For this new approach we do not need any of the adjustments explained before so you might want to delete that additional line if you added it. Go to the line "// parse and spit out final document" and before this comment add

if (!empty($_GET['docId'])) { // is it a site doc?

  $body->assign("VAL_HEADERID","doc".$_GET['docId']);

} else if (!empty($_GET['productId'])) { // is it a product page?

  $body->assign("VAL_HEADERID","prod".$_GET['productId']);

}

That way we get different values for site docs and products in VAL_HEADERID.



Last step:

As we already adjusted the image name in the index template in the first step the only thing to do now is to save the header images according to the defined prefixes. The standard picture is "headerimage.jpg". Site docs use "headerimagedoc1.jpg", "headerimagedoc2.jpg" and so on. Product pages use "headerimageprod1.jpg", "headerimageprod2.jpg" and so on. 



That's it!  

if (!empty($_GET['docId'])) { // is it a site doc?

  $body->assign("VAL_HEADERID","doc".$_GET['docId']);

} else if (!empty($_GET['productId'])) { // is it a product page?

  $body->assign("VAL_HEADERID","prod".$_GET['productId']);

} else if (!empty($_GET['catId'])) { // is it a category list?

  $body->assign("VAL_HEADERID","cat".$_GET['catId']);

}

And the category images would use the names "headerimagecat1.jpg", "headerimagecat2.jpg" and so on.

Nice concept? I hope it's not too confusing now...

Good luck!

[Guest kaskudoo]

very cool - this doesn't sound too hard at all!

i can't wait to try it out - but sadly i have to ..... hope i can get to it tonight or tomorrow.

if this works, it will definetly have to be put onto the stickys on top of the forum or it'll have to be made into a free mod over at .org :sourcerer:

[Guest jrobertblack]

so if I wanted certain pages to all go to one photo would it be like this,

else if ("58,63,59") { // is it a blank list?

  $body->assign("VAL_HEADERID","catblank");

}

[Guest jamble]

Do any of these methods work if you're just surfing around a shop site though? I've added a php image randomiser but am finding that because it's within the tpl files you have to acutally hit refresh to see random images which isn't very useful as visitors won't be hitting refresh, they'll just be clicking around the site.

[Guest DesignGal]

Hi all great stuff - I have a client that wants the different headers and this works great!!

My question is I only need a different header for :

Index page - 1 header

doc pages - individual headers

cat pages 1 header

what would be the code for this?

Thanks in advance

I LOVE CUBECART

[Guest DesignGal]

another question how will work with the SEO mod

[Guest jrobertblack]

so I had this problem with the picture missing X boxes on different pages that I didnt want a header, so I have these 1px images and all the pages I didnt want an image.

Everything looked fine in my tests in ie and firefox, but safair has the x box on every page, I cant figure this out, anyone know why safari would be doing this?

[Guest jrobertblack]

anyone have safari or can shed light on why its doing this?