1

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!

2
  • hope you are aware of wp_is_mobile function .
    – Anoop D
    Mar 15 at 4:04
  • Thank you dear Anoop! This is great! No, I was not aware of this function, so this is a great help! It says in docs not to use it as a substitute for media queries but I will definitely try :D Thank you so much!
    – iuriiGav
    Mar 15 at 19:07
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!

1
  • Dear Anoop, thank you for your reply. While this allows to get a different image size, it is not what I am after. There is a background photo that is in landscape and it works great in desktop version. When I resize to mobile, I need to load completely different image in portrait aspect ratio. I can't use <picture> <source> because the image I am after must be a background-image, not and img. Thank you once again!
    – iuriiGav
    Mar 14 at 18:46
0

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.

1
  • 1
    Dear Matthew, thank you very much for your reply and links! The <picture> tag is sure very helpful but in my situation, I would like you use the css background-image option and set a full screen background using style="background-image: url(<?php get image code here?>); Also this background option needs to have background-attachment property set to fixed. Because I can't pass php variable to my style.css I do this with inline css, but I don't see how I can use a different image for mobile without a media query here... Thank you so much for your help!
    – iuriiGav
    Mar 14 at 18:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.