by 18a Editorial
Over at 18a I was recently asked to build a WordPress website which made use of a full screen background image slideshow. Full screen background images aren't too big a deal for modern web browsers these days with the use of 'background-size: cover;' in CSS. Unfortunately this only works in IE9+ and since the website we were developing had to work in IE8, and IE7 if possible this was no good.
Since I was working with WordPress my first instinct was to reach for a plugin. I was able to find some plugins that could produce full screen backgrounds, and I could find some plugins that would produce slideshows but there weren't many that would allow me to create full screen slideshows for the background of the site. The other complication I had, was that the end user of the website wanted the ability to upload their own images. Also, not every single page had a full screen slideshow background, some simply had a static white background. After spending far too much time installing and uninstalling plugins to try out I decided that this was just going to be easier to build from scratch.
I found a great full screen, hardware accelerated slider plugin for jQuery on GitHub which allowed me to create responsive full screen background images that worked in all the browsers I needed. You can create your own code to do this if you prefer using something similar to the example at the bottom of Chris Coyier's article.
The next step was to allow the end user to specify images they wanted for the background slider for that particular page. I created a page template in WordPress which allowed me to specify one or more URLs to an image in a custom field. If no images were listed in the custom fields then there were four images used as a default for the slideshow template.
In theory, this worked fine but there was one slight issue.; the size of the image used for the background. We chose to support screens with a resolution up to 2560x1440 (anything bigger would just stretch out the image), but having a 2560x1440 sized image to download on your phone while on a 3G network (or worse) can be very slow, particularly if you have several images you want as part of your slideshow.
Again, I went through a whole batch of WordPress plugins for responsive images but either I couldn't get them to work, or they weren't images I could directly upload myself. I always seem to find that plugins are great if you are happy to do what the plugin allows but bending a plugin to do what you want never quite works. So again, it was a case of creating a solution myself.
I had WordPress create various sizes of images as they were uploaded to the site by using 'add_image_size()' to the functions.php file. This will generate a version of the image you upload with the filename followed by the dimensions of the file. So for example, if I uploaded an image called my-image.jpg it would also generate a version called my-image-640x960.jpg.
Knowing this, I can use jQuery to load in the specific image I need to fit the size of the screen the site is being viewed on. Rather than have an image tag that looks like
<img src="mywebsite.com/images/my-image.jpg">
I would create an image tag that looks like this
<img class="bandwidth-saver" src="mywebsite.com/images/blank.gif" data-src="mywebsite.com/images/my-image.jpg">
The reason you need the blank.gif file is because images tend to be the largest download on your page, as such the browser gets the image to download first, even before external CSS files, and even before the DOM is created. If you were to put my-image.jpg and replace that with the actual image URL you wanted, you would download two images sizes and defeat the point of saving bandwidth on lesser devices.
You then run a small jQuery script that checks the resolution of the screen you are viewing the site on and replaces the src attribute of the image with the data-src attribute along with the correct dimensions.
$('img.bandwidth-saver').each(function(){
var src = $(this).attr('data-src');
if ($(window).width() <= 640) {
src = src.replace(/\.([^.]+)$/, "-640x960.$1");
} else {
src = src.replace(/\.([^.]+)$/, "-2560x1440.$1");
}
$(this).attr('src', src);
});
The only thing to watch out for is that you must always upload an image to wordpress with dimensions of the largest image size you want (2560x1440 in our case) or bigger as Wordpress will not generate an image larger than the original which would result in missing images for the larger screen resolutions. The image source gets replaced and the image loads on the page at the best size for the screen.
Sometimes images look good on a landscape monitor on a desktop, but not on a portrait phone. One other added benefit of the method detailed above, albeit requiring a little extra work is that if one of the image sizes created doesn't quite look right, you can ftp up a completely different image that does work to replace that one particular dimension. Once WordPress has created all the files in it's file system, you can just overwrite one manually and get an ideal result.
You can see the result here at Mike Burns Photography.
