How do I get a page to inherit a super-size background image from a parent page?

[ljones]

I tried to figure this out looking at Ryan's snippet for sidebar inheritance and tried if  and else statements using $page->parent->bkgimage but could never get it to work. In case I am not making myself clear, I just want child pages to show the same resizing full-screen background image as the parent. The code below works fine on a page by page basis. I have this style in the header of a template, which I don't like to do, but I don't know of any other way to get a full screen background like this: http://www.alistapart.com/articles/supersize-that-background-please/

<?php                    // if the current page has a populated 'sidebar' field, then print it,
				// otherwise print the sidebar from the homepage

				if($page->sidebar) echo $page->sidebar; 
					else echo $homepage->sidebar; 
				?>

<style>
<?php
foreach($page->bkgimage as $img) {
    echo "\nbody {\nbackground: #fff url({$img->url}) center center fixed no-repeat;\n-moz-background-size: cover;\nbackground-size: cover;\n}";
     }
?>
</style>

[apeisa]

$page is the current page, not homepage. You first grab homepage with:

$home = $pages->get("/") ;

And then use $home->bkgimage

[ljones]

Maybe I am making things too complicated. I don't really need a foreach because I only have one background image per page. The following code pulls in everything i need except the image filename:

<style>
<?php

if($page->bkgimage) echo "\nbody {\nbackground: #fff url({$page->bkgimage->url}) center center fixed no-repeat;\n-moz-background-size: cover;\nbackground-size: cover;\n}";
else echo "\nbody {\nbackground: #fff url({$parent->bkgimage->url}) center center fixed no-repeat;\n-moz-background-size: cover;\nbackground-size: cover;\n}";

?>

</style>

Is there a simple way to get the filename added in this statement: {$parent->bkgimage->url}? This is the page source that is echoing out:

<style>
body {
background: #fff url(/processwire4/site/assets/files/1008/) center center fixed no-repeat;
-moz-background-size: cover;
background-size: cover;
}
</style>

[Pete]

Just a guess, but shouldn't it be this for the parent image URL?

$page->parent->bkgimage->url

As far as I'm aware yoyu can't use $parent - the easiest way to think about it is everything is in relation to the current page you're on, so parent is $page->parent and children are $page->children and the value you're looking for gets appended on the end, so $page->parent->bkimage->url or $page->children->first()->url as a few examples.

[ljones]

I get the logic now. These both give me what I want. I know enough to work with a foreach or a if/else, but it's a bit beyond me to combine these things. I guess I was looking for a solution that was not as simple as I had hoped.

    
  <?php
    foreach($page->bkgimage as $img) {
echo "{$img->url}";
}

?>   

<?php
    $home = $pages->get("/") ;
    foreach($home->bkgimage as $img) {
echo "{$img->url}";
}

?>   

[Pete]

If there's only one bkgimage for a page you could do something like this:

<?php
echo $page->bkgimage->first()->url;

// or 
$home = $pages->get("/") ;
echo $home->bkgimage->first()->url;

?>

Bit simpler.

Or if you want to upload multiple images for each page and pick one from random on each page load you can do this:

<?php
echo $page->bkgimage->getRandom()->url;

// or 
$home = $pages->get("/") ;
echo $home->bkgimage->getRandom()->url;

?>

For an idea of things you might combine to achieve different results, the Cheatsheet is definitely worth a look if you've not seen it already: http://processwire.com/api/cheatsheet/

[apeisa]

If you need only one image, then change field settings that image can contain only one image, then it won't return array but single image. Then this would work:

<?php
$home = $pages->get("/");
echo $home->bkgimage->url;

[Marty Walker]

Hi,

I've used big background images on a couple of sites with PW.

<?
if($page->background_image) {
echo "{$page->background_image->url}";
} elseif ($page->rootParent->background_image) {
echo "{$page->parent->background_image->url}";
} else {
echo "{$pages->get("/")->background_image->url}";
}
?>

Because I go down a couple of levels if the current page hasn't got a background image use it's parent page bg image. If that parent doesn't have one use the bg image set on the home page. You could of course just set a fallback image to be any non-pw referenced image.

I'm using the code above with Backstretch (http://srobbin.com/blog/jquery-plugins/jquery-backstretch/).

background_image = custom image field

Regards

Marty

[ljones]

Amazing timing stillmovingdesign! I was just typing this up as you posted your solution to my problem. I am posting this reply anyway just in case someone wants to see how I incorporated the stylesheet.

Apesia and Pete,

Thanks so much for your help.  Apesia, I did decide to limit the background image to one file. I had to do an if / else to make it work.  Everything works great with the following code. If the top level pages do not have a background image, they inherit the homepage image. If I put an image on a top level page it is passed on to all of the children.

<style>   
<?php
$parent = $pages->get("/");  
if ($page->bkgimage) echo "\nbody {\nbackground: #fff url({$page->bkgimage->url}) center center fixed no-repeat;\n-moz-background-size: cover;\nbackground-size: cover;\n}";
// or
else echo "\nbody {\nbackground: #fff url({$page->parent->bkgimage->url}) center center fixed no-repeat;\n-moz-background-size: cover;\nbackground-size: cover;\n}";
?>
</style

The only problem is that if I do not have a top level page background image the children of that page have nothing to inherit. However, that is not really a problem because I plan to have a different background image for any top level page that will have children.

[SiNNuT]

I'm not a coder but looking at the API isn't this a possible solution?

<?php
$bkgimages = $page->parents()->append($page)->filter("bkgimage!=''");
$last = $bkgimages->last();
echo $last->bkgimage->url;
?>

What this does (i think;):

Grab all parent pages of the current page up to the root, append the current page and filter the array for empty bkgimage fields

Grab the last item from the array.

If the current page has a non empty bkgimage field it is $last, if it's empty $last will contain the bkgimage from the parent of current. This continues all the way up to the root. I think this should work for single image bkg fields and no need for if else checks.

[ljones]

SiNNuT,

That is a very elegant solution. I don't yet have this site online, but It works perfectly on my development site.

<style>   
<?php
$bkgimages = $page->parents()->append($page)->filter("bkgimage!=''");
$last = $bkgimages->last();
echo "\nbody {\nbackground: #fff url({$last->bkgimage->url}) center center fixed no-repeat;\n-moz-background-size: cover;\nbackground-size: cover;\n}";
?>
</style>

yields this:

<style>   

body {
background: #fff url(/processwire4/site/assets/files/1006/art-1.jpg) center center fixed no-repeat;
-moz-background-size: cover;
background-size: cover;
}</style>

[SiNNuT]

thx ljones,

I did test it myself and it seems to be doing exactly as expected. Like is said, i'm not a php/pw expert so maybe someone can confirm that there are no gotcha's with this code before you put it to production.

(PW api makes it easy to do stuff like this)

[ryan]

I don't see any issues there, looks like a good solution to me. You could shorten it even more like this:

$last = $page->parents()->append($page)->filter("bkgimage!=")->last();

Also, just in case none have a bkgimage, you might want to add an if() before the output:

if($last) echo "..."; 

[Pete]

It's actually really useful seeing this piece of code develop as I keep forgetting you can chain multiple things together like this.

The beauty of this jQuery-inspired way of doing it is that it still remains readable afterwards too