Get different images for mobile and desktop with php, advanced custom fields without using js and ajax

Question

I hope everyone is well!

I am looking for a possibility to load different galleries, background images etc for the phone and desktop. For example, I set my hero background image like this:

    <section class="hero" style="background-image: 
url(<?php echo esc_url(wp_get_attachment_image_src(get_field('advanced_custom_fields_field'), 'full')[0]); 
                                                                                    ?>)">

When the window is resized (or website is opened on the phone), I would like to get the image from another advanced custom field entry (for example get_field('advanced_custom_fields_field _mobile') )

Is there a way to do it in php without js and ajax or is it the best way to do it with js?

Is there maybe a way to include advanced custom fields in a styles.php sheet with the header

header('Content-Type: text/css; charset:UTF-8'); 

If this was possible I could just write media queries here and include different images with get_field() function, but I didn't find a way to access get_field() function in style.php

Of course, this all can be achieved with js, but I am curious if there is a WP way of doing this. Thank you so much for your help!

Answer 1

You can display the selected image when using the Image ID return type

<?php $image = get_field('image'); $size = 'full'; // (thumbnail, medium, large, full or custom size) if( $image ) { echo wp_get_attachment_image( $image, $size ); }

This function also generates the srcset attribute allowing for responsive images!

Answer 2

It sounds like you are after the srcset feature of HTML. IT allows you to define different images for different screen sizes.

<picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

Here's a link to the W3Schools page on srcset and here is the Mozilla developer guide.