Code the Template

5. Now for the magic! Open your sub theme directory and find the file 'template.php'. Open it for editing using something like Notepad ++. At the bottom of the file, add the following code:

function sun_set_backgrounds(&$variables) {
/** Find what Section this page is assigned to and select appropriate
* background images from a directory tree for the header, main and banner images, 
* then build CSS and add it to the page.
*/
*/ ***** SET THESE VARIABLES *****

 $sun_server_path = "http://" .$_SERVER['SERVER_NAME']."/"; // "http://localhost/"
 $sun_tree = "sites/example.com/files/background/";
 $sun_branches = array(
 "header"=>array("header","#header.section"), 
 "matte"=>array("matte","#main"),
 "banner"=>array("banner","#banner")
 );

 $file_types = array( 'gif', 'jpg', 'jpeg', 'png') ;
 $sun_css = "";
 $node = 0;
 
 //*************
 // For Views pages or nodes without field_section, get the first term in the URI
$uri_path = $_SERVER['REQUEST_URI'];
$uri_bits = explode('/', $uri_path);
 if ($uri_bits['1'] == ''||$uri_bits['1'] == 'node') {
 $sun_section = 'Front';
 } 
 else { 
 $sun_section = ucfirst($uri_bits['1']);
 }

 // If the page is a node, load it
if (arg(0) == 'node' && is_numeric(arg(1))) {
 $nid = arg(1);
 $node = node_load($nid);

 //** For Nodes, if the node has field_section, get the value of field_section 
 if (field_get_items('node', $node, 'field_section')){
 $section_item = field_get_items('node', $node, 'field_section');
 $tid = $section_item[0]['tid']; ;
 $term = taxonomy_term_load($tid);
 $sun_section = taxonomy_term_title($term);
 }
} 
 //** Look in the directory tree for a background image and get its URL.
foreach ($sun_branches as $sun_branch) {
 
 /** Randomly select an image from the section and branch folder below 
 * the given path and return a url to reference it.
 */
 
$regex = '/\.(' . implode('|',$file_types) . ')$/i' ;
$files = array() ;

 
 if (FALSE == is_dir($sun_tree .$sun_section ."/".$sun_branch[0] ."/")) {
 $sun_section = "default";
 }
 if ($directory = opendir($sun_tree .$sun_section ."/".$sun_branch[0] ."/")) {
 while ( FALSE !== ($file = readdir( $directory )) ) {
 if ( preg_match($regex, $file ) ) {
 $files[] = $file ;
 }
 }
 closedir($directory);
 }
 /** If no image was found there, set the default image, otherwise pick one.
 */
if (empty( $files ) ) {
 $sun_url = $sun_server_path .$sun_tree."default/" .$sun_branch[0] ."/default.jpg";
}
 else {
 $which = rand(0,sizeof($files)-1) ; 
 
 $sun_url = $sun_server_path .$sun_tree .$sun_section ."/".$sun_branch[0] ."/" .$files[$which];
 }
 
//** Build inline CSS statement and add it to the page.
 $sun_css = $sun_branch[1] ."{background-image:url('" .$sun_url ."');}";
 drupal_add_css($sun_css,$option['type'] = 'inline');

 if ($sun_branch[0] == "matte") {
 $sun_css = $sun_branch[1] ."{background-attachment:fixed;}";
 drupal_add_css($sun_css,$option['type'] = 'inline');
 }
 
 }
} 
 

Edit the function as needed to match your image names and div ids. Firebug is really handy for finding the name of the div or container you want to set a background image for.

6. Just above where you inserted the code above you should find a function called 'your_theme'_preprocess_page. Add a line so that it calls the function we just added. It should look something like this:

 function sun_preprocess_page(&$variables, $hook) {
   sun_set_backgrounds ($variables);
 }

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.