Change header image on menu choice [SOLVED]

[Blikkie]

Can I have the header image change based on the choice made in the menu.

Something like:
1 -> Header image 1
1.1-> Header image 1.1
2 -> Header image 2
2.2 ->Header image 2.2
2.2.1 ->Header image 2.2.1

Ofcourse I could make numerous templates but than there would be les benefit in using CMS if you have to redefine every page.
Allready tried the random image tag  which does somewhat in that direction but random means no control on which header will be loaded.

I think it needs to be done with a tag inserted at the top of a page like {header_image dir="image directory" id=''image id"} and keep the size, height and positioning in the style sheet.

Defining what you want is easy  but how to program this as I don't know any php 

Help please?

You can check it at http://www.triggermusic.nl/index.php it has the random image now...

[RonnyK]

Blikkie,
one possible solution might be:

http://forum.cmsmadesimple.org/index.ph ... l#msg53453

Ronny

[calguy1000]

why not do something like this in your template:


 
 


and then add the appropriate styles you need into your stylesheet.

[Dr.CSS]

Hey calguy

mind if I ask what is $friendly_position  ?

[calguy1000]

if you add {get_template_vars} to the top of any page.

You'll see that {$friendly_position) represents the (user readable) menu heirarchy number, like 2.1, 2.1.1, 4.2.3, etc, etc.

there are a bunch of variables that can be used in the content, or in the template to allow for customization.  such as {$page_alias} {$page_title} (I think).... and others.  {get_template_vars} is designed to tell you what is available, and help you learn how to use them.

[Dr.CSS]

So once they use that in a template they would look at the page source to see what number shows up and then make a call in the CSS to change the image according to which page they are on.... cool...

But if it's a number you may want to use it like so...


 
 


as CSS and id's don't like numbers alone, need to stick a letter in there...

[Blikkie]

What I got from a private conversation was:

div id="header" class="{$page_id}">

Than put in the css template

.id1 {...}
.id2{...}

Tried that and my source now actually shows the correct id's. Now I need to find out what to put between the {...} to get my freaking picture in the header

I really need to learn some programming stuff 

RonnyK thanx I saw that message and that brought me to this question. Think my above remark is my shortcoming on this...

[Blikkie]

Got a working version 

I've put in a new template:





In an css added a changed version of the header (came with one of the standard templates)

div#header"the actual page_name"{
  background: #yourcolor url(your picture location) no-repeat;
  background-position: top center;
  display: block;
  height: 120px;
  text-indent: -999em;
  text-decoration:none;
}
And it works.
Downside you have to describe the complete header for every page to do this. 
I've made a different template cause I only wanted to use it for certain pages, not all.
See http://www.triggermusic.nl/index.php and check under biografie you will see that each person get's it's own header image.
The other pages use the random_image tag and switch between logo and band picture, try repeat clicks on agenda.

Perhaps there is a shorter and better way to program it but I see no other way than using different templates.
Is there actually a way to tell for instance a template with a sidebar that if sidebar=empty use whole pagewide?

[RonnyK]

Blikkie,

you did in fact the same thing as I did in the other post, you only used a direct variable instead of the script to get the rootpage. Both end up with a variable DIV-block embedded in the Header-div, making it possible to work with a single CSS to style the different pages with a different, but specific, header.

Ronny

[nils73]

We had this question here a few times, I guess this one might help you:
http://forum.cmsmadesimple.org/index.php/topic,10565.msg53453.html#msg53453

Regards
Nils