1. Download the Mobble plugin

You’ll find the Mobble plugin at http://wordpress.org/extend/plugins/mobble/. Download and activate it. You’ll see from the plugin’s description that it provides mobile-related conditional functions. We’ll be using the is_mobile() function.

2. Edit the single.php and page.php files to call the post thumbnail

Using your text editor, or the WordPress editing screen, open the single.php file. Find the following code, or something like it:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h1><?php the_title(); ?></h1>
<section>

In this case the image needs to be displayed immediately after the heading and before the content, so our code needs to be insterted between the <h1> and <section> tags. If your site’s theme doesn’t use html5 you may have a<div> there instead of the <section>.

The code to display the featured image for that post is:

<?php the_post_thumbnail(); ?>

The function has some parameters we can use, and the most relevant one here is the image size. You can use any of the defined image sizes used in WordPress:

• thumbnail – Thumbnail (default 150px x 150px max)
• medium – Medium resolution (default 300px x 300px max)
• large – Large resolution (default 640px x 640px max)
• full – Full resolution (original size uploaded)

This is where our conditional function plays with the image sizes. So the full code we need is:

<?php
   if (is_mobile()) {
   the_post_thumbnail('medium');
   } else {
   the_post_thumbnail('large');
} ?>

What that code does is as follows:

1. Check if the site’s being viewed on a mobile device - if (is mobile()).
2. If so, output the medium version of the post thumbnail (or featured image) - {the_post_thumbnail('medium')}.
3. If this isn’t the case - else - output the large version - {the_post_thumbnail(large)} .

Having set up the single.php file, do the same for the page.php file. Then we need to change any embedded images to featured images via the WordPress dashboard.

3. Use WordPress featured image functionality to display the images correctly

Adding featured images is very simple in WordPress since it was incorporated into the user interface in version 3.0. Just follow these three steps:

1. In the WordPress dashboard, open the editing screen for each post and page.
2. Delete the existing image (it will remain in the gallery for that post/page which will be helpful in a moment)
3. Click ‘Set featured image’ to the bottom right of the screen.
4. In the ‘Set featured image’ pop-up, click the ‘Gallery’ tab. The image you just deleted will be displayed. All you need to do now is click on ‘Use as featured image’ and then click the little cross at the top right of the window. Don’t insert the image into the post, or you’ll end up with it displaying twice.
5. Finally, click the ‘Update’ button to save the changes you’ve made to the post and test it.