Display Different Images For Mobile Users using Aqua Resizer + Mobile-Detect – WordPress Tutorial

Display Different Images For Mobile Users using Aqua Resizer + Mobile-Detect – WordPress Tutorial

  • Published on: 18th October 2012
  • Author:
  • Under: Other
  • Comments: 8

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.

AJ Clarke
Hey. My name is AJ and I am the boss around here. I own and operate WPExplorer. A website dedicated to everything I love about WordPress.
AJ Clarke
This article has 8 comments
    1. AJ Clarke | WPExplorer says:

      Nice to see you around here. We love your work ;)

      Admin
  1. beyondtime says:

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

    1. AJ Clarke | WPExplorer says:

      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!

      Admin
  2. Ale Montemayor says:

    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.

    1. AJ Clarke | WPExplorer says:

      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 – http://buildinternet.com/project/supersized/docs.html – you should contact the author of the theme to help you fix the issue.

      Admin

Leave a Reply