ansaurus

Question

Drupal Background Image as Block or Node

Answer 1

+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

2010-03-16 09:59:10

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 2010-03-20 23:10:43

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

2010-03-29 07:58:36

Answer 2

A:

regarding step 2 how did you do this?

mark 2010-04-09 08:00:39

Answer 3

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 2010-04-11 05:39:50

Answer 4

+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

2010-05-03 05:23:40

Answer 5

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'] .= ''; }

2010-06-02 13:48:29

ansaurus

tags:

views:

answers:

Drupal Background Image as Block or Node

related questions