如何动态设置背景图像大小？

Question

I have a 1600 x 1000 image that's used as a background image, with an ACF repeater field that outputs each section, each with its own unique background image. I'm concerned about mobile. Is there a way to dynamically populate the background image size based on wp_if_mobile() ? Here's a bit of my code:

$banners = get_field('home_page_banner');

foreach ($banners as $banner) {
   
      $background_image = $banner['background_image']; //Here's the variable, which is set to ACF Image Field Array.

     //additional vars here


      echo '<div class="home-page-banner grayscale" style="background-image: url(' . esc_url($background_image['url'])  . '); ">'; // Here's where the background-image goes

      //other stuff in here


      </div>';

      $result_count++;
    }; ?>

I was thinking about something like:

$background_image = $banner['background_image']

if( wp_is_mobile() ) {
  $background_image = $banner['background_image][sizes]['some_smaller_size_here'];
}

Thoughts?

Answer 1

My hunch was correct. I first started by adding a new image size that would fit my needs: add_image_size('home_page_banner', 800, 533);

Then I re-wrote my conditionals like so:

if (wp_is_mobile()) {
        $background_image = $banner['background_image']['sizes']['home_page_banner']; //returns url
      } else {
        $background_image = $banner['background_image']['url']; // returns url
      }

Lastly, I re-wrote my echo statement to this:

echo '<div class="home-page-banner grayscale" style="background-image: url(' . esc_url($background_image)  . '); ">';

Now I can use a 1600px background image on desktop, and a 800px wide image on mobile.