Dynamic background images

Hi Guys,

I am trying to change the background image on my site dynamically using the page ID. I have put the PHP together and the image URL generated is correct but no image appears.
Other background images in the same style sheet seem to be ok and the CSS generated looks fine.
I have tried with and without output buffering but no joy. I have also tried reletave and explicit URLS.

It seems that it can not find the image even though the CSS looks correct, Also, if I copy and paste the generated URL from the CSS an to a browser it finds the image straight away.

Here is the PHP code I used.

<?php
ob_start();
$id=$_GET[’id’];

$filename = ’/assets/templates/default/images/’ . $id . ’.jpg’;

if (file_exists($filename)) {
$image=$id . ’.jpg’;
} else {
$image=’about.jpg’;
}

echo"
body
{
margin:0;
padding:0;
font-family:verdana;
font-size: 12px;
color:#ffffff;
background: #ccc;
background-image: url(http://www.mysite.com/assets/templates/default/images/";
echo $image;
echo ");
/*background-repeat: repeat-x;*/
background-repeat:no-repeat;
/*background-position:bottom center;*/
}";

ob_end_flush();
?>

Here is the CSS generated

body
{
margin:0;
padding:0;
font-family:verdana;
font-size: 12px;
color:#ffffff;
background: #ccc;
background-image: url(http://www.mysite.com/assets/templates/default/images/about.jpg);
/*background-repeat: repeat-x;*/
background-repeat:no-repeat;
/*background-position:bottom center;*/
}


Any ideas? this is really driving me nuts so any help would be really appreciated.

The following code assumes you are calling this snippet in the <head> section of your template, and you may also need to add -
<base href="[(site_url)]" /></base>
after the <title> as well.

Thanks breezer,

I am currently doing all my PHP directly in the style sheet itself, Now I’m guessing this is not the best way to do it.
I will use your code as a snippet and see what happens I have one question though.

Should I

A. add the rest of my style sheet in to this snippet

B. use an include function to call the rest of the style sheet.

C. apply the style sheet in the usual way (inside the template) and omit the body block

Thanks for your help on this mate, I have limited experience with PHP and am new to ModX.

Dave

Hi davepritchardmedia,

Here is my "way" of doing it. I don’t know your aim but maybe it could turn out to be useful.
1) Add the css like this


2) Add a Template Variable to the body tag


3) Go to Elements > Manage Elements > Template Variables > New Template Variable and fill in the fields like this:
Template Variable Name: backgroundcss
Input Type: text
Default Value: @INHERIT

Finally, assign the Template Variable to the template and click "Save". Go in each page you want a different background and add the CSS id.

In that case try this:

Create a snippet with the following code, call it in the <head> section of your template, before your stylesheet.
What we are doing here is creating a placeholder which is populated with the image name, then use that placeholder in the stylesheet. You can then just call the stylesheet with the normal <link rel="stylesheet"/>.



Now in the stylesheet, use the [+BG_image+] placeholder where the $image was before.
background-image: url(http://www.mysite.com/assets/templates/default/images/[+BG_image+]);

ex:
<head>
<title>BG Image</title>
<base href="[(site_url)]" /></base>
[!BG_image!]
<link rel="stylesheet" href="assets/templates/default/stylesheet_name.css" type="text/css" media="screen" />
</head>

Hi guys,

I have tried your new code breezer but suspect I am doing something wrong.

I have created a new snippet and called it bg2, this contains your code.

here is the head section of the template.

<head>
<title>[(site_name)] - [*pagetitle*]</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
[[bg2]]
[!BG_image!]
<link rel="stylesheet" type="text/css" href="[(base_url)]assets/templates/default/test.css" />
</head>

Note: I have omitted the base url part as this seemed to overwrite the (base_url) data.

Here is the code as it appears in the style which is a .CSS file (not.PHP).

body
{
margin:0;
padding:0;
font-family:verdana;
font-size: 12px;
color:#ffffff;
background: #ccc;
background-image: url (http://www.mysite.com/assets/templates/default/images/[+BG_image+]);
background-repeat:no-repeat;
};

Here is the code as it appears in the style sheet when viewed in firefox.

body
{
margin:0;
padding:0;
font-family:verdana;
font-size: 12px;
color:#ffffff;
background: #ccc;
background-image: url (http://www.mysite.com/assets/templates/default/images/[+BG_image+]);
background-repeat:no-repeat;
}

It seems to not be replacing the [+BG_image+] part with the relevant image name.

Am I doing this correctly?

Thanks for helping me with this mate.

Dave

Hi Guys,

Solved the problem!

I used Breezers snippet with a couple of changes to the output:

<?php
$output =’’;
$docid = $modx->documentIdentifier;
$filename =’assets/templates/default/images/’.$docid.’.jpg’;

$image = file_exists($filename) ? $docid.’.jpg’ : ’about.jpg’;

$output .=’
marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" rightmargin="0" link="#cc0000" text="#000000" vlink="#cccccc" bgcolor="#ffffff"
background="http://www.mysite.com/assets/templates/default/images/’ . $image . ’"’;

return $output;
?>

and then called it inside the body tag:

<body [[bg]]>

Then I just had to make sure I had removed any body tags from the style sheet.

Thanks for all your help on this, It really is appreciated.

I’m using a very simple method for a logo that I need to change based on the language the user is on (for a website with three languages).

If your needs are very basic, you can use something like this:

<img src="[(base_url)]assets/templates/logo[[UltimateParent]].gif" />

The ’Ultimateparent’ (would also be possible with Wayfinder I think) part will append the ID number to the image url.

If the ID of the ultimateparent (folder for the language) equals ’10’, that would correspond to:
<img src="mywebsite.com/assets/templates/logo10.gif" />

If the ID of the ultimateparent (folder for the other language) equals ’20’, that would correspond to:
<img src="mywebsite.com/assets/templates/logo20.gif" />

Then I changed my image names to reflect this.