Gomako Design Blog – Ramblings and occasional drawings by Ben Harvey

For some reason, my blog database got rolled back a few months. I have no idea why, and neither does my hosting company. Grrr. Anyway, I was getting a few hits from people looking for the fullscreen background tumblr api post, so I thought I’d re-write it.

Here is the php code. It grabs the last 100 posts and puts them in an array, from which, a random image is selected and used as the background image.

<?php

// Load the Tumblr feed (photos only in this case) into a simplexml document
$url = "http://gomako.tumblr.com/api/read?type=photo&num=100";
$xml = simplexml_load_file($url);

// Loop through the images and add them to an array
foreach($xml--->posts-&gt;post as $post){
$bgImgs[] = $post-&gt;{'photo-url'}[0];
}

// Pick a random image out of the array.
$bgimg = $bgImgs[array_rand($bgImgs)];

// Get image width and height for script
list($imgwidth, $imgheight, $type, $attr) = getimagesize($bgimg);

?>

Now we need to pass the image details to the fullscreenr jQuery plugin. I have altered the script slightly to get it to work how I wanted. You can grab my copy here.

<!-- Load JQuery -->
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script><!-- Load the Fullscreenr plugin --><script type="text/javascript" src="js/jquery.fullscreenr.js"></script></code>

<script type="text/javascript">

// Specify the size of your background image here
var FullscreenrOptions = { width: <?php echo $imgwidth; ?>, height: <?php echo $imgheight; ?>, bgID: '#bgimg' };

// This will activate the full screen background!
jQuery.fn.fullscreenr(FullscreenrOptions);

</script>

Now you need to include this directly under the opening body tag

<!-- This is the background image -->
<img id="bgimg" src="<?php echo $bgimg; ?>"/>

That should be it!