Different header background images for each page -> how? [SOLVED]

[rj]

I'm currently making a website where I want each page (5 to be exact) to have a different header background images. I know it can be done with 5 different templates where I give each #header a different id. Linking them to another 5 different stylesheets where I specify de background-image for the #header would do the job.
But that's what I'm trying to avoid. I'm looking for a way to use just one template and one stylesheet because in the future more pages will be added to the site. I was wondering if this could be done with some sort of dynamic code. But maybe there's another "trick" to accomplish this.

Anybody with ideas / a solution to this matter?

TIA. Your help is greatly appriciated.

[RonnyK]

Try

http://dev.cmsmadesimple.org/projects/sectionimage/

Ronny

[rj]

Hi Ronny,

thanks for the link. Do you have any experience with this plug-in? More importent...does it work under version 1.1?

Richard

[faglork]

Hi,

I suggest writing an UDT which works like this:

- get the name of the page
- construct an image path according to the pagename
- check if image exists, if not, use default
- output the image URL

Then all you have to do is to
- create a directory "/uploads/images/backgrounds"
- upload  images with the pagename as filename. If you don't, it will use a default pic.

Here's the code (just a quick hack you have to test it):

User defined tag "autobg"

Caution: substitute *your* server path in the $filename variable.

Code: Select all

global $gCms;
$picname =& $gCms->variables['page_name'];

$filename = '/www/123/html/uploads/images/backgrounds/'.$picname.'.jpg';

if (file_exists($filename)) {
    echo "/uploads/images/backgrounds/$picname.jpg";
} else {
    echo "/uploads/images/backgrounds/default.jpg";
}

In your template, just hardcode the background image for the H1 in the header div  like this:
{autopic}

Code: Select all

   <div id="header">
           <h1 style="background-image: url({autobg});"><a href="/">Your page title here</a></h1>
   <hr class="accessibility" />
   </div>

As I said, it is a quick hack and may not work from the spot but you get the idea.

HTH,
Alex