Background Stretcher Part Two
After playing around with the backgrounds stretcher plug-in for WordPress, I discovered that it had one flaw. It was extremely troublesome to get it to show a different background depending on the page. I couldn’t figure it out. I decided to go back to the manual method with Ajax blender. This time, however it didn’t take that long to figure out what was going wrong. All I had to do was make sure the J query link was declared before initializing the background stretcher. Very simple mistake. Now I could run a simple PHP conditional to show a different background depending on the page. For WordPress I used this.
<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’);?>/jquery-1.6.1.min.js”></script>
<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’);?>/bgstretcher.js”></script>
<link rel=”stylesheet” href=”<?php bloginfo(‘template_directory’);?>/bgstretcher.css” />
<?php
if (is_home()) { $bg = ‘bg_danshui.jpg’; }
if (is_page(‘portfolio’)) { $bg = ‘bg_korea.jpg’; }
?>
<script type=”text/javascript”>
$(document).ready(function(){
// Initialize Backgound Stretcher
$(‘BODY’).bgStretcher({
images: [‘<?php bloginfo(‘template_directory’);?>/images/<?php echo($bg) ?>’], imageWidth: 1920, imageHeight: 1080
});
});
</script>
If it was a non-WordPress site I probably could’ve used something like this.
<?php
$page = basename($_SERVER[‘SCRIPT_NAME’]);
if ($page == ‘index.php’) { $bg = ‘bg_danshui.jpg’; }
if ($page == ‘portfolio.php’) { $bg = ‘bg_korea.jpg’; }
?>
….