MrQwest

Dynamic Background Images with WordPress

I’ve been doing my fair share of WordPress builds recently. It’s been a great learning curve as this time last year, my experience with building WP sites could be counted on one hand (with fingers to spare!).

On a recent project, the client wanted full-size background photos to each of their blog posts. As a stroke of luck, this background-image was to be the “featured image” so setting that up was easy.

But in addition to this, the client also wanted the home page to feature a scrolling background slideshow (for want of a better phrase) made up of the featured images from the pages blog posts.

So first things first, I needed a variable which held the urls of the blog post featured images so at the top of my index.php, I created a new empty variable:

<?php $bgslides = ""; ?>

Next step was to populate that variable.

<?php
    $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), "large", false);
    $bgslides = $bgslides . "<img src="" . $src[0] . "" />";
?>

In the code snippet above, I’m fetching the featured image src with wp_get_attachment_image_src() (read more about wp_get_attachment_image_src on the Codex ), passing it the $post->ID (remember, this is within the WP loop), then a size "large" followed by the crop boolean, in this case, false.

As a side note, I’m using the “large” keyword here for the size of the background images which, with 9 or 10 posts on the front page, will introduce as many fairly large images. Both myself & the client are running these images through imageOptim to reduce the file size and in addition, we’re using the WP-Smush it WP plugin to further reduce the file size on upload to try and keep these images small, and the site quick.

I’m then referencing the original php variable we set up earlier, $bgslides and adding in the featured image source by concatenating the url onto the value already stored within the variable using the . character between the value already stored within the variable and the new url.

<?php
    $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), "large", false);
    $bgslides = $bgslides . "<img src="" . $src[0] . "" />";
?>

Now for the sliding BG. I’m using the jQuery Cycle plugin. This likes the images to be within a list so we’d need to throw in some <li>s into the mix.

We can do a similar thing to above using concatenation but instead of adding the url, we’ll add the <li> tag.

$bgslides = $bgslides . "<li>";

This sets the variable $bgslides to the value previously held PLUS the <li>. The full code block looks like this.

<?php
    $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), "large", false);
    $bgslides = $bgslides . "<li>";
    $bgslides = $bgslides . "<img src="" . $src[0] . "" />";
    $bgslides = $bgslides . "</li>";
?>

So for the final piece of the puzzle, we output the php variable by echo’ing it out:

<ul id="bgslides">
    <?php echo $bgslides; ?>
</ul>

and then hide the output using CSS so we don’t see a big list of dynamically generated URLs. From there we hook up the jQuery Cycle plugin to look at the ID #bgslides of the div and Hey presto!, a dynamically changing sliding background thing which pulls in the URLs of the featured images from the blog posts displayed on the page.

It’d be great to learn from this. If you can see any ways of improving the method described here, please do shout in the comments!


More in the Archive