change image source to custom field value based on viewport width

Question

I currently have my homepage slider's image source setup like this: src="<?php the_field('slider_foto'); ?>" which works great in my front-page.php. the size of those images is 1600x500 px, which is great for large screen, but as soon as go below 767px viewport size the slider becomes small in width compared to the screensize.

Thus I would like the image source to change to src="<?php the_field('slider_foto_mobile'); ?>" as soon as viewport width gets below 767px. I found this post that gives me a start: Change image source based on viewport width

But I can't figure out how to implement a predefined <?php the_field(); ?> <?php the_field(); ?> for the image src in the function. Can anybody help me out with this?

Thanks!

EDIT 1 I found out I will be using Mobile Detect for this issue, however Im having issues implementing it. I copied the php file to the root of my theme, what do i need to do next? Do I need to include this in my functions.php: require_once 'Mobile_Detect.php'; $detect = new Mobile_Detect; require_once 'Mobile_Detect.php'; $detect = new Mobile_Detect; Im stuck on what to do, I don't understand. Do I need to call stuff like this in functions.php as well? $detect->isMobile(); $detect->isTablet(); and after that use this in my front-page.php? if ($detect->isMobile()) {} ?

Thanks! /EDIT 1

EDIT 2 I now have this is my front-page.php because thats the only place I use it. I start my file with this:

<?php get_header(); ?>

<?php
  require_once 'Mobile_Detect.php';

  $detect = new Mobile_Detect;
?>

A little bit down the page I execute the following:

<?php if ( $detect->isMobile() && $detect->isTablet() ) { ?>
    <img class="carousel-image" src="<?php the_field('slider_foto_mobile'); ?>" alt="<?php the_title(); ?>">
<?php } else { ?>
    <img class="carousel-image" src="<?php the_field('slider_foto'); ?>" alt="<?php the_title(); ?>">
<?php } ?>

I works on iPad, it differentiates the src, but on the iPhone (and probably every other phone) it still shows the <?php the_field('slider_foto'); ?> <?php the_field('slider_foto'); ?> instead of the <?php the_field('slider_foto_mobile'); ?> <?php the_field('slider_foto_mobile'); ?> Again, it works on the tablet! whats the issue?

Thanks!

/EDIT 2

Answer 1

PHP doesn't know lots of information about the client, it can't know directly the viewport size. Some solutions exist via javascript, but javascript is executed only when your page is rendered, so too late for your case.

Solution 1 (server side) :

Maybe you could use the user-agent, to detect the device : mobile, tablet or desktop.

Have a look on this library : http://mobiledetect.net/

EDIT You need to include the library : in Wordpress, I don't remember, but if you need it in lots of files, include it maybe in functions.php (I think this file is used everywhere, but not sure). Otherwise, it's not too bad to include it in the template directly. You could create an utility function as well, to get an image suffix, and use it in all your templates.

require 'Mobile_Detect.php';
// ...
function getImageSuffixByDevice(){
    $suffix = '';
    // ... your code to create the suffix you want ...
    return $suffix;
}

Example (the image doesn't exists, it's an example) Use a browser extension to simulate different devices like "User agent switcher". You'll see that the image is different regarding the device size detected . http://runnable.com/VCKLbhpxfTgE9QGe/image_by_device_size-for-php-and-mobile_detect

/EDIT

Solution 2 (client side, more complex) :

defer the loading of images, and do it with ajax. eg : first, you display the page with fake image or something like that. After, JS get the viewport size and call the image from the server, passing the viewport size. The server will be able to return the image in the right size.