Picturefill with ACF for banner

Let me try working through this and see if we get closer to where we want to be.

We start with creating the banner image sizes in functions.php.

add_action('init', 'add_banner_image_sizes');

function add_banner_image_sizes(){
  add_image_size('banner-large', 2000, 210, true);
  add_image_size('banner-medium', 1300, 210, true);
  add_image_size('banner-small', 480, 210, true);
}

For this example, I’m going to assume that the ACF field is an image field named “banner-image” with the return value set to “Image Object”.

In the theme file for the banner, lets get the content of the field and add a filter called “theme_banner_image” that we can interact with later.

<?php
$image_object = get_field('banner-image');
$image_output = '<img src="' . $image_object['sizes']['banner-large'] . '" title="' . $image_object['title'] . '" alt="' . $image_object['alt'] . '" />';
echo apply_filters('theme_banner_image', $image_output);
?>

Back in functions.php let’s try filtering that image and sending it off to the plugin after telling the plugin what image sizes to use.

add_filter('theme_banner_image', 'theme_function_for_banner_image', 10);

function theme_function_for_banner_image($content){
  picturefill_wp_set_responsive_image_sizes(array(
    'banner-small',
    'banner-medium',
    'banner-large',
    ));
  return Picturefill_WP::get_instance()->cache_picturefill_output($content);
}

Let me know how that works, or if I have misinterpreted what you are trying to accomplish.

Thanks very much for your question.