views:

1001

answers:

5

Hi There.

I am having trouble wrapping my head around how to make editable background images in my custom Drupal 6 theme. My client wants to use a different background image on each main section on his website (with multiple content types: page, blog, image gallery), and to keep everything dynamic, I want the background images to be editable.

What I'd like to do is add a background image field to various content types that allows a user to reference an image from the content library or upload a new image (similar to ImageAssist), and have it apply to a region in my template. Any suggestions on the best approach for this?

Is there a way to make a custom content type into a dynamic background image block? I am using the Image, Image Cache, Views, CCK, Image Assist, Panels, Filefield, and Imagefield modules.

Thank you!

+1  A: 

hi Marcy, I am working on such a site myself these days. What i did is: 1. create content field for this image in which the site admin can upload a new background 2. in the template.php i added the image location to the a new $var['background'] i created 3. in the pape.tpl.php i added a div inside the body that contains all page's content, 4. in the a bove div i added a style and printed $background as the background's value example(replaved <> with [] to avoid auto code removal): [body class="[?php print $body_classes; ?]"] [div id="page" style='background: url("[?php print $background ?]") no-repeat;'] [/div] [/body] hope this helps Avner

Thanks for your reply! But are you only using one image? I am hoping to somehow make it easy to put a different image on each section. When you say "image location," do you mean hard-coding a url?
Marcy Sutton
not at all, as i explained in my comment, the background can be changed and entered as a variable(in my example $background).post your template.php and i will try and help you out with the code
A: 

regarding step 2 how did you do this?

mark
A: 

Right now I am hard-coding a url, which is pretty pointless until I figure out how to make it dynamic. Here is a portion of my template.php file:

function phptemplate_preprocess(&$vars, $hook) {
  $vars['background'] = base_path().'sites/default/files/wood-med.jpg';
   //...
}

And here is the relevant section of my page.tpl.php file:

  </head>

    <body class="<?php print $body_classes ?>" style='background-image: url("<?php print $background ?>");background-repeat: repeat-y;'>
      <div id="pageWrapper">
      // ....

I created a Background Image node type and want to use it to supply a Page, Image, or Gallery node with a list of images to choose from. Any ideas on how to hook this up?

alt text

Marcy Sutton
+2  A: 

Hi Marcy,
are usign the function phptemplate_preprocess ? maybe i missed it but there is nu such function on drupals's API site.
I think you should use phptemplate_preprocess_page, which should be implemented as:
'function THEMENAME_preprocess_page(&$vars)' and placed in your template.php which is in your theme dir.
most likely the function already exists there and you should add the following lines at the end of it:
global $base_url;
if (!empty($vars['node']->type)) {
if (($vars['node']->type == 'CONTENT-TYPE-A') || ($vars['node']->type == 'CONTENT-TYPE-B') {
$vars['background'] = $base_url."/".$vars['node']->field_background[0]['filepath']; }
}

note that field_background is a cck field

regarding your page.tpl.php, i prefer not to enter the image in the body tag. i put it inside in an a div, this will allow more flexibility ( for example if you would like the image to be 20px below the top of the browser). example:
<div id="main" >
<div id="page" style='background: url("<?php print $background ?>") no-repeat;'>

hope this helps avner

A: 

a simpler and cleaner way is to add in the template.php inside the phptemplate_preprocess_page() function:

if (isset($node->field_background[0]['filepath']) ){ $vars['styles'] .= ' '; $vars['styles'] .= 'div#page{background: url("'.$base_url.'/'.$node->field_background[0]['filepath'].'");}'; $vars['styles'] .= ''; }