Possible to assign more than one Picturefill html markup outside the content

I’m not 100% sure I understand what you are trying to do, but I’m going to give it a try.

First, it sounds like you are applying Picteufill.WP to the_content and to another Advanced Custom Fields content block. Like so:

add_filter('acf/format_value_for_api', 'theme_function_picturefill_for_acf', 11, 3);

function theme_function_picturefill_for_acf($content, $post_id, $field){
  if(in_array($field['type'], array('textarea', 'wysiwyg', text))){
    return Picturefill_WP::get_instance()->cache_picturefill_output($content, $field['name']);
  }else{
    return $content;
  }
}

Next, it sounds like you would like different image sizes to be served for the_content than for the ACF images. This has always been possible, but as of Picturefill.WP version 1.3.0 it can be done with a lot less code.

In functions.php:

// Let's define <code>the_content</code> first
add_filter('the_content', 'set_theme_content_picturefill_sizes');

function set_theme_content_picturefill_sizes($content){
// If we call this function in the <code>the_content</code> filter, it should only apply to images inside <code>the_content</code>
  picturefill_wp_set_responsive_image_sizes(array(
    'rectangle-small325',
    'rectangle-small420',
    'rectangle-mid530',
    'rectangle-large730'
  ));
  return $content;
}

// Next for the ACF fields, lets just alter the code from above
add_filter('acf/format_value_for_api', 'theme_function_picturefill_for_acf', 11, 3);

function theme_function_picturefill_for_acf($content, $post_id, $field){
  if(in_array($field['type'], array('textarea', 'wysiwyg', text))){
// Here we set the square image sizes for the ACF fields only.
    picturefill_wp_set_responsive_image_sizes(array(
      'square-small150',
      'square-small410',
      'square-mid410',
      'square-large920'
    ));

    return Picturefill_WP::get_instance()->cache_picturefill_output($content, $field['name']);
  }else{
    return $content;
  }
}

I think that should work, if that is the kind of thing you were hoping to do. Let me know how it goes, and if I’m miss interrupting the issue let me know so I can take another crack at it.

Thanks very much.

at first thanks for getting back. and uh i’ve read my initial post again and i have to admit it wasn’t very easy to grasp. ?? sorry for that, it is quite a complex topic and i am still puzzled trying to wrap my head around understanding the plugin in regard of my problem statement. ok i try it to reexplain my basic processing steps i had in mind.

– in my recent wordpress site all possible media uploads are either in custom post type within advanced custom fields or in the content for posts.
– all emerging sizes are defined in the functions.php with add_image_size(‘square-small150’, 150, 9999); ( i guess it wouldn’t be possible to create only the sizes defined for a certain upload location)
– then create breakpoint sets to group image sizes for a certain type of images ( you’ve already explained i should go with picturefill_wp_set_responsive_image_sizes for that purpose)
– then i want the images to be served. i dont want to just distinguish between breakpoint set 1 (bps1) for the content and bps2 for the acf. i would prefer to say bps1 for the content, bps2 for e.g. images from the acf “member_pictures” bps3 for images from the acf “project_images” and so on. i saw that you’ve used in your snippets the $field[‘type’] hook, but would it also be possible to target a certain field name?
– the only question i ask myself in the end is, is the template ?minding which breakpoint set is used when building the html snippet or would it be necessary that the templates are created/ adjust for every single breakpoint set created with picturefill_wp_set_responsive_image_sizes?

that’s it more or less basically. i hope i was able to explain things a little bit better now. sorry for that again! and i will try your suggested snippet tomorrow as well as dig a bit deeper in the documentation. and any further hints and suggestion would be more than cool and welcome. ?? still a bit confusing the whole thing. thanks!!!

To set different image sizes for specific ACF fields, you will just need to use $field['name'] instead of $field['type'] in the if statement.

add_filter('acf/format_value_for_api', 'theme_function_picturefill_for_acf', 11, 3);

function theme_function_picturefill_for_acf($content, $post_id, $field){
  if('square_image' === $field['name']){

    picturefill_wp_set_responsive_image_sizes(array(
      'square-small150',
      'square-small410',
      'square-mid410',
      'square-large920'
    ));

    return Picturefill_WP::get_instance()->cache_picturefill_output($content, $field['name']);
  }elseif('round_image' === $field['name']){

    picturefill_wp_set_responsive_image_sizes(array(
      'round-small150',
      'round-small410',
      'round-mid410',
      'round-large920'
    ));

    return Picturefill_WP::get_instance()->cache_picturefill_output($content, $field['name']);
  }else{
    return $content;
  }
}

The templates only provide a very basic HTML structure to match the picteufill.js syntax. The templates should not need to be adjusted for breakpoint or image size customization.

Does that cover everything, or did I raise more questions than I’ve answered?

wow thanks! that was basically the thing i was trying to accomplish. And no you haven’t risen more questions than you answered. ?? But unfortunately a few issues turned up while i’ve applied you’re code suggestions. I go on in this thread, since the area i have issues with still sticks with the initial topic. otherwise i would have started a new thread. anyway, i’ve used the following code snippet:

function suk_remove_default_image_sizes( $sizes) {
    unset( $sizes['thumbnail']);
    unset( $sizes['medium']);
    unset( $sizes['large']);

    return $sizes;
}

add_filter('intermediate_image_sizes_advanced', 'suk_remove_default_image_sizes');
add_image_size('bps3-small', 300, 9999);
add_image_size('bps2-small', 410, 9999);
add_image_size('bps1-medium',750, 9999);
add_image_size('bps2-large', 920, 9999);
add_image_size('bps1-large', 1020, 9999);

function set_theme_content_picturefill_sizes($content){
  picturefill_wp_set_responsive_image_sizes(array(
    'bps3-small',
    'bps1-medium',
    'bps1-large'
  ));
  return $content;
}

add_filter('the_content', 'set_theme_content_picturefill_sizes');

function theme_function_picturefill_for_acf($content, $post_id, $field){
  if('tm_img' === $field['name']){

    picturefill_wp_set_responsive_image_sizes(array(
      'bps3-small',
      'bps2-small',
      'bps2-large'
    ));

    return Picturefill_WP::get_instance()->cache_picturefill_output($content, $field['name']);
  } elseif('pro_preview' === $field['name']){

    picturefill_wp_set_responsive_image_sizes(array(
      'bps2-small',
      'bps2-large',
      'bps2-large'
    ));

    return Picturefill_WP::get_instance()->cache_picturefill_output($content, $field['name']);
  } else{
    return $content;
  }
}

add_filter('acf/format_value_for_api', 'theme_function_picturefill_for_acf', 11, 3);

Now i went to the media library and uploaded an 2400×1120 image for testing purpose. the following files were created:

solutions-300x140.jpg
solutions-300x300.jpg
solutions-410x191.jpg
solutions-750x350.jpg
solutions-920x429.jpg
solutions-1020x476.jpg
solutions-1350x630.jpg
solutions.jpg

except for solutions-300×300.jpg and solutions-1350×630.jpg all defined sizes got created. the 300×300 seems some odd thumbnail format but no idea what the 1350 x630 actually is; thought i’ve switched off all obscure wordpress image defaults. ??

But then the problems started. i’ve entered the picture inside the posts edit-window via the add media button inside the wysiwg editor and posted it (the acf image upload part i haven’t tried yet – wanted the the_content version working first) . the problems:

– if i load the single post page i experience a loading lag of about 6-10 seconds on every reload and not only the mentioned initial one from the docs.

– second there aren’t any retina images created – i still stick to the files listed above

– and finally there seem to be two issues with the html markup. the created markup looks like the following:

<span data-picture="" data-alt="about" data-class="alignnone size-full wp-image-266">
	<span data-src="https://localhost:8888/test/wp-content/uploads/2014/01/about.jpg"></span>
	<span data-src="https://localhost:8888/test/wp-content/uploads/2014/01/about.jpg" data-width="150" data-height="70" data-media="(min-width: 1px)" class="picturefill-wp-source thumbnail"></span>
	<span data-src="https://localhost:8888/test/wp-content/uploads/2014/01/about-300x300.jpg" data-width="150" data-height="70" data-media="(min-width: 1px) and (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi),(min-resolution: 1.5dppx)" class="picturefill-wp-source retina thumbnail"></span>
	<span data-src="https://localhost:8888/test/wp-content/uploads/2014/01/about.jpg" data-width="675" data-height="315" data-media="(min-width: 695px)" class="picturefill-wp-source medium"></span>
	<span data-src="https://localhost:8888/test/wp-content/uploads/2014/01/about-1350x630.jpg" data-width="675" data-height="315" data-media="(min-width: 695px) and (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi),(min-resolution: 1.5dppx)" class="picturefill-wp-source retina medium"></span>
	<span data-src="https://localhost:8888/test/wp-content/uploads/2014/01/about.jpg" data-width="1216" data-height="567" data-media="(min-width: 1236px)" class="picturefill-wp-source large"><img alt="about" class="alignnone size-full wp-image-266" width="1216" height="567" src="https://localhost:8888/schmidundkreative/dFGn2SxAy8Z7bnM/wp-content/uploads/2014/01/about.jpg"></span>
	<span data-src="https://localhost:8888/test/wp-content/uploads/2014/01/about.jpg" data-width="1216" data-height="567" data-media="(min-width: 1236px) and (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi),(min-resolution: 1.5dppx)" class="picturefill-test<span data-src="https://localhost:8888/test/wp-content/uploads/2014/01/about.jpg" data-width="2400" data-height="1120" data-media="(min-width: 2420px)" class="picturefill-wp-source full"></span>
  <noscript><img class="alignnone size-full wp-image-266" alt="about" src="https://localhost:8888/test/wp-content/uploads/2014/01/about.jpg" width="2400" height="1120" /></noscript>
</span>

within the noscript tag the image brackets are replaced by entities: <noscript><img and /></noscript> – a bug probably. but the more severe issue are the applied breakpoints and the file naming. the defined file sizes are as follows:

300×140
750×350
1020×476

but if you take a look at the html markup from above the files are called about.jpg most of the time instead about-300×140.jpg, about-750×350.jpg and about-1020×476.jpg. and i would have expected different breakpoint values used :/ something like that:

first image 300×140
second image 750×350 (with min-width 301px)
third image 1020×476 (with min-width 751px)

and i wouldn’t necessarily place data-height and data-width into the html markup as well as width and height inside the noscript img fallback tag. additionally there are placed the 300×300 and 1350×630 image version inside the markup. oh and as already mentioned the retina versions are missing completely. :/

I am using picturefill.wp 1.3 and the picturefill plugin is properly shown in the resources in the dev tools and the image exchange works. Uh that’s it for now. Hope that wasn’t too much and i was able to describe everything properly. If you have any further questions let me know. Best regards Ralf

After duplicating the issue with the information you provided, I found an error in the execution of the picturefill_wp_set_responsive_image_sizes function. Thanks very much for pointing me in the right direction.

Version 1.3.1 has been pushed with a fix for this oversight.

With that fix in place, the following seems to work. I only made one small change to your original code, so that the new image sizes are included as options in the media library.

add_image_size('bps3-small', 300, 9999);
add_image_size('bps2-small', 410, 9999);
add_image_size('bps1-medium',750, 9999);
add_image_size('bps2-large', 920, 9999);
add_image_size('bps1-large', 1020, 9999);

add_filter( 'image_size_names_choose', 'theme_custom_sizes' );

function theme_custom_sizes($sizes){
    return array_merge(array(
        'bps3-small' => __('small'),
        'bps1-medium' => __('medium'),
        'bps1-large' => __('large'),
    ), $sizes);
}

function suk_remove_default_image_sizes( $sizes) {
    unset( $sizes['thumbnail']);
    unset( $sizes['medium']);
    unset( $sizes['large']);

    return $sizes;
}

add_filter('intermediate_image_sizes_advanced', 'suk_remove_default_image_sizes');

function set_theme_content_picturefill_sizes($content){
  picturefill_wp_set_responsive_image_sizes(array(
    'bps3-small',
    'bps1-medium',
    'bps1-large'
  ));
  return $content;
}

add_filter('the_content', 'set_theme_content_picturefill_sizes');

function theme_function_picturefill_for_acf($content, $post_id, $field){
  if('tm_img' === $field['name']){

    picturefill_wp_set_responsive_image_sizes(array(
      'bps3-small',
      'bps2-small',
      'bps2-large'
    ));
    add_filter( 'image_size_names_choose', 'tm_img_custom_sizes' );

    return Picturefill_WP::get_instance()->cache_picturefill_output($content, $field['name']);
  } elseif('pro_preview' === $field['name']){

    picturefill_wp_set_responsive_image_sizes(array(
      'bps2-small',
      'bps2-large',
      'bps1-large'
    ));
    add_filter( 'image_size_names_choose', 'pro_preview_custom_sizes' );

    return Picturefill_WP::get_instance()->cache_picturefill_output($content, $field['name']);
  } else{
    return $content;
  }
}

add_filter('acf/format_value_for_api', 'theme_function_picturefill_for_acf', 11, 3);

Let me know if that does the trick.

Thanks again.

Ralf, I’m going to mark this thread as resolved due to inactivity. Hopefully the previous post helped to clear up your issue. If you are having any further trouble, feel free to open up another support thread.

Thanks very much.