Skip to main content
WordPress made easy with the drag & drop Total WordPress Theme!Learn More

Using Mobile-Detect to Show Custom Featured Images

Last updated on:

I have been working on a Photography theme recently and one of the things I’ve been implementing is a mobile “style”. Unlike the common responsive themes that will adjust to  your browser size no matter the device, I’ve been setting it up so mobile css/js loads only on tablets and hand-held devices. Well, on the desktop/laptop versions I want to keep a certain design that requires some images to have a fixed height but any width, however, on the mobile version I want these same images to have an unlimited height but a fixed width.

Solution?

I recently found a pretty sweet script called “Mobile Detect” which I’ve been using to load my css/js only on mobile devices, so why not use the same script to show different image sizes for mobile devices? Below I’ll show you how you can use this awesome script along side the aqua resizer function for re-sizing images to create two different image sizes – one for regular computers and one for mobile devices.

How To Do It?

First thing you want to do is add the Aqua Resizer function and the Mobile Detect php class into your theme/plugin. Either via functions.php or in a separate file using the require() function.

Aqua Resizer

The Aqua Resizer function is very easy to use. Below you can see an example of how one would add it to a theme to show the featured image of a post:

<?php
//get and crop featured image to 600px (width) and 150px (height)
$featured_image = aq_resize( wp_get_attachment_url( get_post_thumbnail_id() ,'full' ), 600, 300, true ); ?>
<img src="<?php echo $featured_image; ?>" />

Mobile Detect

The Mobile class is really simple to use, here is an example of how to test if a visitor is on any mobile device:

<?php
$detect = new Mobile_Detect();
if ( $detect->isMobile() ) {
   // Any mobile device.
} ?>

Combine Aqua Resizer & Mobile Detect

Now lets say I wanted to show an image that is much smaller (half the size) for all mobile users I can do so like this:

<?php
$detect = new Mobile_Detect();
if ( $detect->isMobile() ) {
    // Featured image for mobile users
   $featured_image = aq_resize( wp_get_attachment_url( get_post_thumbnail_id() ,'full' ), 300, 150, true ); 
} else {
   // Featured image for all other users
   $featured_image = aq_resize( wp_get_attachment_url( get_post_thumbnail_id() ,'full' ), 600, 300, true ); 
} ?>
<img src="<?php echo $featured_image; ?>" />

As you can see it’s really quite simple and it opens up a lot of windows for possibilities. You could use it to provide larger images for retina displays ( Mobile Detect is very extensive, you can even test for individual devices, operating systems, batches of devices and more), for showing smaller images for faster mobile browsing or as I am using it, to show different proportions for images on mobile devices.

note: Obviously you could also use Post Thumbnails for this by defining the image size to use. I went with the aqua resizer because it’s the function I’ve been using lately in my theme because it doesn’t require you to regenerate thumbnails when adding new image sizes or when changing current ones.

Subscribe to the Newsletter

Get our latest news, tutorials, guides, tips & deals delivered to your inbox.

10 Comments

  1. Jinson Abraham

    Its a smart trick AJ. Nice one.
    cheers

    • AJ Clarke | WPExplorer

      Nice to see you around here. We love your work 😉

  2. beyondtime

    I love to click pics and then edit in various ways. This tutorial is pretty interesting will try this out soon.

  3. Colin Crawford

    Excellent tutorial AJ, so simple when you know how.

  4. Adam

    I would think that using wp_is_mobile ( http://codex.wordpress.org/Function_Reference/wp_is_mobile ) would be an alternative (or better?) to using “Mobile Detect”. Nice technique for mobile devices!

    • AJ Clarke | WPExplorer

      You are correct and I should have mentioned it. The only reason I like to use this specific script is because it’s a lot more extended. For simple solutions wp_is_mobile() does a great job though.

      Thanks for stopping by Adam!

  5. Ale Montemayor

    Hi AJ!

    Do you think this script would work if images are on a background slide show?
    I purchased a theme that claimed to be responsive, and images looked cropped when you browse the site from smartphones or tablets.

    Website is this:

    siie.com.mx/Wordpress

    It looks like this on iPhone:

    rubikmedia.com/siie.png

    Thanks for your insight!

    Greetings from Mexico.

    • AJ Clarke | WPExplorer

      No, that is something completely different. Your theme is actually using a script called Supersized, if you have a look at the documentation there are options to keep the images proportional as your screen size gets smaller – you should contact the author of the theme to help you fix the issue.

  6. Chris Borgman

    Hi AJ,
    I’m actually wanting to add some CSS for just mobile devices, could you suggest how to do that?

    I tried this in my functions:

    if ($detect->isMobile()) {
    echo ;
    }
    

    …but I got this in return:

    Parse error: syntax error, unexpected ‘<' in /home/profolio/public_html/wp-content/uploads/sites/12/dynamik-gen/theme/custom-functions.php on line 6

    I only need to a couple of lines target to mobile, is there a way to write it inline instead of ref an external CSS file?

    Thank!!

    • AJ Clarke

      Yep the code above is broken. You can actually use wp_is_mobile() to check for mobile devices, however, this function doesn’t always play nicely with caching plugins/functions – https://codex.wordpress.org/Function_Reference/wp_is_mobile

      if ( wp_is_mobile() {
      // do things here
      }
      

      ps: This post is a bit old…otherwise I would have recommended using the same thing as I just posted in the comment above.

Leave a Reply

Your email address will not be published. Required fields are marked *

Learn how your comment data is processed by viewing our privacy policy here.