User Tools

Site Tools


blurry_full-screen_background_image

Blurry, Full-screen Background-image

This function assigns a background-image to your page, stretches it to full-screen, then blurs it. The blur effect is achieved using the StackBlur algorithm, as implemented by listenrightmeow. The end result can look something like this:

In all honestly, this is perhaps not the best way to do page backgrounds. But it's undeniably cool as a proof-of-concept, and I think it's fun to play with. Be sure to test the implementation in various browsers and contexts before deploying it permanently in production.

The effect utilizes the HTML5 <canvas> element, so will only work in modern browsers which support <canvas>. Be sure to set a nice background-color as a fallback for older browsers.

Copy-and-paste the script below into your phplugins.php file.


// IMPLEMENT STACKBLUR.JS TO BLUR PAGE BACKGROUND, USING THE "PAGE IMAGE" DEFINED IN LR AS BACKGROUND
function ttg_body_bottom( $style, $path ) { 
	echo '
<script src="./phplugins/js/simple-js-inheritance.js" type="text/javascript"></script>
<script src="./phplugins/js/stackblur.min.js" type="text/javascript"></script>
<script type="text/javascript">

if (
	(navigator.userAgent.match(/Android/i)) ||
	(navigator.userAgent.match(/Blackberry/i)) ||
	(navigator.userAgent.match(/SymbianOS/i)) ||
	(navigator.userAgent.match(/iPhone/i)) ||
	(navigator.userAgent.match(/iPod/i)) ||
	(navigator.userAgent.match(/iPad/i))
	) {} else {
	var blur = new Blur({ 
		el : document.querySelector("body"), 
		path : "photos/' . PAGEIMAGE . '", 
		radius : 5, 
		fullscreen : true 
	});
}
</script>
	';
} // END

Download the script dependencies here.

Unzip the files and copy to your server at /phplugins/js/. Should look like this:

The function above is written to that the effect will not be applied to the mobile gallery ( G_STYLE != 'CE3-MOBILE' ).

The background-image will load only after all page content has finished loading.

The script above uses Javascript to detect iPhone, iPad, Android and other mobile devices, and kills the effect on those devices.

By default, the function uses PAGEIMAGE to determine the background-image. PAGEIMAGE is a constant set separately within each page or gallery, defined within Lightroom during the design process by setting the Image ID in the Color Palette > Content Area / 'The Block' settings.

To increase or decrease the blur effect, change the radius value.

blurry_full-screen_background_image.txt · Last modified: 2012/12/10 07:55 by admin