Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I have a brilliant idea and since WordPress already takes care of some of the work, I just need to find a good method to make this work.

I am working on a project that needs to be responsive to all devices, whether a desktop PC or mobile gadget. Thus, I want the images to also be responsive, meaning that mobile devices shouldn't load 50KB+ images.

For each page or post, I can add a Featured Image using Post Thumbnails which, at full-size, the image is about 950x250 at ~60KB. If I load the website on an iPhone/Android, I wouldn't want the ~60KB image to load, but instead would like the small thumbnail to load in its place.

The default method for responsive images is to make the width of the image 100% of the parent container, thus it will resize automatically if the parent container is also resized. Not the best method for larger images.

I thought about trying out Filament Group's responsive image script, but I tried it and it didn't work right. One way this could be accomplished is through user-agent detection, but I'd rather not do this method either since user-agents can be spoofed.

Here's another method for resizing images on the fly, but this seems to be duplicating what WordPress has already done.

If there is a way of doing this with the Media Gallery images that WordPress has be default, with all the resized thumbnails already created, that would be preferable.

share|improve this question

3 Answers 3

Step 1:

Define two custom image sizes, e.g.:

<?php
add_image_size( 'normal-thumbnail', 400, 300, false ); // Default image size
add_image_size( 'mobile-device-thumbnail', 200, 150, false ); // Mobile-device image size
?>

Step 2:

Implement your chosen means to determine client. There are several ways, and which method you use is outside the scope of this question. But, assuming you have a method that works for you, output the result to some variable, such as $mobile_device = true;

Step 3:

In your template files, output the image conditionally, based on client.

<?php
if ( true = $mobile_device ) { // client is mobile; be responsive
    the_post_thumbnail( 'mobile-device-thumbnail' );
} else {
    the_post_thumbnail( 'normal-thumbnail' );
}
?>

Note: you could repeat the if/else (or do a switch) for multiple form factors (i.e. screen sizes). Just add multiple custom image sizes, and conditionally test for each screen size you want to support.

share|improve this answer
    
This was pretty much what I was looking for, thanks! I'll try to test it as soon as I figure out the Step 2 and come back to let you know my results. –  micah Sep 1 '11 at 6:45

The best way is to use a fluid grid to build the wordpress theme. And remove the width and height values of featured images through a function for proportional scaling. A tutorial on how to do it is available here.

share|improve this answer

One way this could be accomplished is through user-agent detection, but I'd rather not do this method either since user-agents can be spoofed.

This is not a bad method and is actually the industry standard, a good WURFL has a very high accuracy rating, the ones I have used and tested always returned solid results and independent testing ( above what I would bother doing) seem to have them in the 98% +range. Who cares if some lame bot is spoofing a user-agent, they aren't there for a good reason anyhow.

For step 2 I think either method comes down to which is actually faster, a PHP backed WURFL or CSS media query's.

share|improve this answer
    
Interesting. I've never heard of WURFL so I have a bit of reading to do. Thanks for pointing it out. I have my reservations about user-agent spoofing but you're probably right that the majority of legitimate traffic won't be spoofing. Time for more research! –  micah Sep 1 '11 at 6:44
    
I'm gonna pass this link along purely for the comments. There's a lot of arguments against user-agent sniffing and they bring up a lot of good points. infrequently.org/2011/01/cutting-the-interrogation-short –  micah Sep 3 '11 at 5:18
    
Interesting but these guys are talking about the expense ($$$) of ua testing for enterprise level applications, not exactly a WordPress blog, look at your server logs, does the 1% of non user agents mean 1 million people or 1, do you roll out new application features every month ? I do on the other hand actually agree that feature detection is the future..well that is unless everyone has an iphone or andriod... –  Wyck Sep 3 '11 at 5:52
    
Ultimately, I agree that feature detection is the future. I think using this stackoverflow problem would be an awesome solution. I use Modernizr and I'd need to figure out how to combine his method with Chip's solution, although I'm still not very good at jQuery. What do you think? –  micah Sep 3 '11 at 6:49
    
For most web sites, I think you can't go wrong with using media query's, esp with something backup up by a javascript library. The problems I see are sites that use lots of interface images still serving them for mobile by using something lame like diplay:none;. Effective responsive layouts tend to be minimal designs because of this. –  Wyck Sep 3 '11 at 17:35

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.