Automatically change background image based on top level page

Permalink
I'd like to have a different background image shown on each section of my client's website. All subpages of a main section would share the parent's bg image. I have created one bg image per section.

I know how to do this with a background image attribute, but how can I accomplish this without having the client choose the bg image so that future pages they add will automatically pull in the correct parent's bg image?

And if a new top-level page is created, it needs to get a default bg image.

Thanks,
George

emsconcrete
View Replies: View Best Answer
ScottSandbakken replied on at Permalink Reply
ScottSandbakken
This will give you the page object of the second level page (below home).

$nh = Loader::helper('navigation');
global $c // or $c = Page::getCurrentPage;
$trail = array_reverse($nh->getTrailToCollection($c));
if (count($trail) >= 2) {
  $tlPage = $trail[1];
} else {
  $tlPage = Page::getById(HOME_CID);
}


Then just pull the image from the page attribute.

You could also add class to the body tag so that you can use CSS.
emsconcrete replied on at Permalink Reply
emsconcrete
Thanks for quick reply!

How can I make sure it trickles down to any subpage, even 3rd and 4th levels down?

How would I incorporate the code into the above code you provided to use classes (with a background-image) instead of page attribute for each section?

Thanks again!
George
ScottSandbakken replied on at Permalink Reply
ScottSandbakken
The $trail is the path from the current page to the home page. By reversing it, you get an array of pages from the home page to the current page. When you grab the second page, you get the first page under the home page in the current page's path.

Just add the code to your [theme]/elements/header.php file somewhere above the <body> tag. Then add a class to your body tag based on the $tlPage's id.

<body class="tlpage-<?php echo $tlpage->getCollectionId(); ?>">


You can then setup your style sheet to server out a background image based on this class.

body.$tlpage-193 {
  background:url(background1.jpg) center top;
}
body.$tlpage-195 {
  background:url(background2.jpg) center top;
}
body.$tlpage-198 {
  background:url(background3.jpg) center top;
}
emsconcrete replied on at Permalink Reply
emsconcrete
Thanks again! I'll try this out.
emsconcrete replied on at Permalink Reply
emsconcrete
Almost works! Sorry to bug again, but it appears the pages directly under the homepage are also getting an ID of 1, not a unique page ID. Any fix?

Thanks!
George
ScottSandbakken replied on at Permalink Reply
ScottSandbakken
Change
$tlPage = Page::getById(HOME_CID);

to
$tlPage = Page::getById($c);


Also, you will need to remove the '$' from the CSS statements (my mistake)

body.tlpage-193 {
  background:url(background1.jpg) center top;
}
body.tlpage-195 {
  background:url(background2.jpg) center top;
}
body.tlpage-198 {
  background:url(background3.jpg) center top;
}
emsconcrete replied on at Permalink Best Answer Reply
emsconcrete
Thanks for the help, NetJunky279, but that didn't fix it.

However, I did finally find some code that worked. Here it is for others who may need it:

To recap, this allows you to have a different background image for all your top-level pages, then have all subpages (no matter how deep) use their parent (or grandparent, etc.) background image.

First put this in your template's body tag:

<body class="tlpage-<?php 
  global $c;
  $nh = Loader::helper('navigation');
  $cobj = $nh->getTrailToCollection($c);
  $rcobj = array_reverse($cobj);
    if(is_object($rcobj[1])) {
      $pID  = $rcobj[1]->getCollectionID();
      $page = Page::getByID($pID);  
      echo $page->getCollectionID();
    }else{
      echo $c->getCollectionID();
    }  
?>">


Then put something similar to this CSS (of course, change the specific ID #'s after tlpage- and also image filenames/paths, etc.):

body.tlpage-1 {
  background: #726e20 url(images/bg-image-01.jpg) center top no-repeat fixed;
}
body.tlpage-132 {
  background: #726e20 url(images/bg-image-02.jpg) center top no-repeat fixed;
}
body.tlpage-158 {
  background: #726e20 url(images/bg-image-03.jpg) center top no-repeat fixed;
}