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

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!!!

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="http://localhost:8888/test/wp-content/uploads/2014/01/about.jpg"></span>
	<span data-src="http://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="http://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="http://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="http://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="http://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="http://localhost:8888/schmidundkreative/dFGn2SxAy8Z7bnM/wp-content/uploads/2014/01/about.jpg"></span>
	<span data-src="http://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="http://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="http://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