RESS & WordPress (WordpRESS)

I was scratching my head, wondering when I would get around to plugging in the functionality which makes WordPress serve lower resolution images to mobile devices – what a mouth-full. Well I eventually worked it out and it wasn’t that hard to do!

The beauty of WordPress is that it comes with most of what is needed to do this out-of-the-box. I’ll explain what I did, and why I did it for those who want to know 😉

So here’s what happened

I was working on a responsive WordPress theme for a client (DP Interiors), which happens to be image heavy, and I had been putting off (for whatever reason) getting my hands dirty with image replacement techniques. I found a few jQuery plugins which work well on static sites such as: adaptive images, but I pretty much always use WordPress which is dynamic; therefore the image replacement technique I chose had to make life easy, and work with the dynamic functionality of WordPress.

There are lots of different image replacement methods, which is best?

An excellent working example of a website which uses front-end image replacement is the BBC’s mobile website for sport: if you use your developer tools (such as Firebug) and resize the browser, look closely at the image tags in the HTML and you will see that the data attribute is being targeted for image replacement.

Then there’s the technique known as RESS… if you read Luke’s article (and by the way it was written in 2011) you’ll see he uses Mustache for templating purposes. You can of course use PHP templates like header.php; which take advantage of WordPress’ Hierarchy which will achieve the same thing.

The thing about RESS is that it uses server side user agent detection to determine what device is accessing your website. This means you can serve different things to different devices, even a completely different layout of your website.

Ultimately the best choice depends upon your resources and target audience

I pestered a few of the dev’s at the Beeb to find out what they call the method they use: I asked the developers about why they chose ‘Image Enhancement’ over RESS, and Tom Maslen answered:

We don’t have the server capacity to do that. We can only scale up to BBC world wide audience numbers using heavy server side caching. Techniques like RESS are great if you have a small audience, otherwise it makes you need lots of server side processing available to you.

So that explains that then! This is what I love about the internet, you can reach out to people you would never normally meet because of restraining orders (that’s a joke by the way).

Enter PHP conditional statements & the WordPress plugin: Mobble

The most ideal scenario with WordPress (for me) is to use PHP conditional statements to replace the images, as it is server side, and cannot possibly be used on the front-end. This way nothing can ever be downloaded for a mobile device which isn’t destined for it.

A different image size per breakpoint or device width

As I mentioned earlier, WordPress has some out-of-the-box goodies, in this case it happens to be various image sizes per image uploaded via the WordPress Admin.

There is a function for this (add to your theme’s functions.php):

if ( function_exists( 'add_image_size' ) ) { add_image_size( 'name-of-your-custom-image-size', 260, 190, true ); //(true = cropped)}

You can rinse and repeat as many times as you like, in the case of DP Interiors I use 3 image sizes as so for the image sliders (flexslider):

if ( function_exists( 'add_image_size' ) ) { 
 add_image_size( 'mobile', 380, 380, true ); //(cropped)
 if ( function_exists( 'add_image_size' ) ) { 
 add_image_size( 'tablet', 700, 700, true ); //(cropped)
 if ( function_exists( 'add_image_size' ) ) { 
 add_image_size( 'desktop', 1000, 1000, true ); //(cropped)

Using the ‘add_image_size’ function to create images in this way saves a lot of donkey work, i.e. WordPress will duplicate and resize any images you upload after you have added the function in your functions.php; and it is being used by your installation. If you add these functions to functions.php after you have already uploaded images you will need to regenerate thumbnails or it won;t happen unless you upload new images.

This means that the different sizes of image which you would like to serve using Mobble are there, in uploads, waiting to be put to good use.

Next: serve different images to different devices conditionally

The next things is to conditionally load an image based upon the device which is viewing it. For this I highly recommend using Mobble. Save yourself the pain and just use it as it works seamlessly as if it is part of WordPress.

Once installed and you have got all your different image sizes you can then conditionally serve images to different devices. To demonstrate I’ll use an example, which replaces the featured image (post_thumbnail) size for desktop, tablet & mobile.

if(is_mobile()) : 
 if ( has_post_thumbnail() ) :
 the_post_thumbnail( 'mobile' );
elseif(is_tablet()) :
 if ( has_post_thumbnail() ) :
 the_post_thumbnail( 'tablet' );
else : 
 if ( has_post_thumbnail() ) :
 the_post_thumbnail( 'desktop' );

That’s it!

Thanks to Luke Wroblesky who humoured me and pointed me towards the responsive news website, which then enabled me to badger the BBC dev’s for more info. By the way I think the BBC has got some secret underground responsive web design hideout lair, along the lines of Tracy Island, somewhere off the coast of Salford.

About Morgan

Morgan is a web designer and front-end developer, who's speciality is producing websites built with the successful open source platforms: Wordpress & Magento. With a firm belief in offering a high level of customer service, combined with technical expertise and creativity, Morgan really does believe he can offer what most agencies would charge an arm and a leg for, at a fraction of the cost. When he's not trawling the internet for the latest design trends and SEO techniques you can find Morgan in his kitchen doing an impression of Keith Floyd. My Google Profile+
This entry was posted in web development, Wordpress Development. Bookmark the permalink.

5 Comments on "RESS & WordPress (WordpRESS)"

Say something

website design
  • wordpress design

    This was made with:

    • Website design - Illustrator
    • Image output - Photoshop
    • Wordpress front-end development
    • Wordpress CMS
    • On-page SEO
    Learn more
  • website design

    This was made with:

    • Website design - Illustrator
    • Image output - Photoshop
    • Custom HTML + CSS
    • jQuery
    Learn more