kylereicks

Added this solution to the documentation and to the FAQ. Unless there are any other problems, I’m going to call this closed. Thanks very much for bringing up the issue.

I’m afraid that I’m having trouble figuring this one out. From what I know of Varnish cache, it shouldn’t be able to cause a problem with Picturefill.WP. If the problem still occurs with no other plugins installed, then it is either a bug in the core plugin, or a clash with the theme file. The plugin works in my development environment, and I know of a few instances where it is working out in the wild, so I am inclined to think that there is a clash with the theme; however, if you haven’t made any changes to your functions.php file, it seems very unlikely that there is anything in a theme that would cause this problem.

I have a few other bugs that I am preparing to fix with a new release later this weekend. If you’re still willing to give this another try, update the plugin when the new version drops (1.2.1) and try activating it again. Maybe there was a download error in the initial install or something like that.

If we try that, and it’s still not working, we may have to inspect the theme you are using to sort out where this conflict could be coming from.

Thanks for your patience and feedback.

pixeline,

That is curious. I’ve been playing around with WP Super Cache today, but I am having trouble duplicating the issue. I think I’m going to need more information if I’m going to be any help.

Since I’m not sure where the problem might be, anything might be helpful. Is the entire HTML page duplicated or just the_content? Are you interacting with Picturefill_WP via your functions.php file in any way? Are there any other plugins that could be causing conflicts that I should take a look at?

Thanks again for being so willing to offer feedback.

Good sleuthing!

The problem with the <br> tags seems to be a quirk with how Advanced Custom Fields handles acf/load_value. When a acf/load_value is called with content that is expected to contain HTML, the content is then passed though a format_value_for_api function which executes shortcodes, wpautop, etc.

To make sure Picturefill_WP is called after wpautop we need to use an undocumented filter, acf/format_value_for_api.

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'))){
    return Picturefill_WP::get_instance()->cache_picturefill_output($content, $field['name']);
  }else{
    return $content;
  }
}

That should run the plugin over the text area and wysiwyg fields. When it comes to image fields, you will need to wrap your own filter around the image output.

In your theme file:

<?php
$image_url = get_field('image');
$image_output = '<img src="' . $image_url . '" />';
echo apply_filters('theme_acf_image', $image_output, 'name_of_the_image_field');
?>

In functions.php

add_filter('theme_acf_image', 'theme_function_for_acf_image', 10, 2);

function theme_function_for_acf_image($content, $name_of_the_image_field){
  return Picturefill_WP::get_instance()->cache_picturefill_output($content, $name_of_the_image_field);
}

I think that might work a little better.

I’m going to mark this as resolved, but if there is further clarification needed or other issues that should be addressed, don’t hesitate to reopen.

Good question. Looking at the repository, I realize that this isn’t documented as well as it could be.

For a basic implementation, you are going to be interested in the replace_images method, or if you want to use transients for output caching, the cache_picturefill_output method.

You can call these methods on your other filter hooks from your functions.php file like this:
add_filter('the_other_filter', array(Picturefill_WP::get_instance(), 'replace_images'), 11);

To use transient caching with another content area, we need to add another step.

add_filter('the_other_filter', array(Picturefill_WP::get_instance(), 'theme_picturefill_wp_the_other_filter'), 11);

function theme_picturefill_wp_the_other_filter($html, $post_id, $post_thumbnail_id, $size, $attr){
  return Picturefill_WP::get_instance()->cache_picturefill_output($html, 'the_other_filter');
}

If your content area uses the standard WordPress image sizes (thumbnail, medium, large, full), then you are all set. No other configuration required.

If your content area uses a non-standard image size (for example “widget_image_small” set to 50px by 50px), then you will need a little more configuration.

First, following the example for responding to a custom image size:

// Add an @2x size for "widget_image_small" (assuming that widget area small already exists as a part of your theme)
add_action('init', 'theme_add_widget_image_small_@2x_image_size');

function theme_add_widget_image_small_@2x_image_size(){
  add_image_size('widget_image_small@2x', 100, 100);
}

// Make sure Picturefill.WP has the attachment data for widget_image_small and widget_image_small@2x
add_filter('picturefill_wp_image_attachment_data', 'theme_picturefill_widget_image_small_attachment_data', 10, 2);

function theme_picturefill_widget_image_small_attachment_data($attachment_data, $attachment_id){
 $widget_image_small_data = array(
   'widget_image_small' => wp_get_attachment_image_src($attachment_id, 'widget_image_small'),
   'widget_image_small@2x' => wp_get_attachment_image_src($attachment_id, 'widget_image_small@2x')
 );
 return array_merge($attachment_data, $widget_image_small_data);
}

// Add widget_image_small and widget_image_small@2x to the responsive queue
add_filter('picturefill_wp_image_sizes', 'theme_add_widget_image_small_to_responsive_image_list', 11, 2);

function theme_add_widget_image_small_to_responsive_image_list($default_image_sizes, $image_attributes){
  return 'widget_image_small' === $image_attributes['size'][1] ? array(
    'widget_image_small',
    'widget_image_small@2x'
  ) : $default_image_sizes;
}

// Set the breakpoint for the new image as the new smallest size
add_filter('picturefill_wp_media_query_breakpoint', 'theme_picturefill_widget_image_small_breakpoint', 10, 3);

function theme_picturefill_widget_image_small_breakpoint($breakpoint, $image_size, $width){
  return in_array($image_size, array('widget_image_small', 'widget_image_small@2x')) ? 1 : $breakpoint;
}

I’ll take a closer look at the Advanced Custom Fields plugin, but it looks like running using the acf/load_field/type={$field_type} filter might do the trick.

Something like:
add_filter('acf/load_field/type=image', array(Picturefill_WP::get_instance(), 'replace_images'), 11);

I’ll try to dedicate some time this weekend to testing out Picturefill.WP with the Advanced Custom Fields plugin and I will follow up with an answer more specific to that use case.

Thanks for your feedback, I’ll get back to you with more soon.

I’ve added an example to the documentation on GitHub that I think addresses the issues raised here.

This example removes the thumbnail from the responsive image sizes and replaces it with another image size that might be better suited to mobile devices.

Step 1, remove the thumbnail from the responsive image queue.

// Remove thumbnail from responsive image list
add_filter('picturefill_wp_image_sizes', 'theme_remove_thumbnail_from_responsive_image_list', 11, 2);

function theme_remove_thumbnail_from_responsive_image_list($image_sizes, $image_attributes){
  return array_diff($image_sizes, array('thumbnail', 'thumbnail@2x'));
}

Step 2, create a new image size to replace the thumbnail (if desired).

add_action('init', 'theme_add_new_small_image_size');

function theme_add_new_small_image_size(){
  add_image_size('new_small_size', 320, 480);
  add_image_size('new_small_size@2x', 640, 960);
}

Step 3, make sure that Picturefill.WP has all of the image data to work with.

add_filter('picturefill_wp_image_attachment_data', 'theme_picturefill_new_small_size_attachment_data', 10, 2);

function theme_picturefill_new_small_size_attachment_data($attachment_data, $attachment_id){
 $new_small_size_data = array(
   'new_small_size' => wp_get_attachment_image_src($attachment_id, 'new_small_size'),
   'new_small_size@2x' => wp_get_attachment_image_src($attachment_id, 'new_small_size@2x')
 );
 return array_merge($attachment_data, $new_small_size_data);
}

Step 4, add the new image to the responsive image queue in the place of the thumbnail.

add_filter('picturefill_wp_image_sizes', 'theme_add_new_small_size_to_responsive_image_list', 11, 2);

function theme_add_new_small_size_to_responsive_image_list($image_sizes, $image_attributes){
  if(!in_array($image_attributes['min_size'], array('medium', 'large', 'full'))){
    return array_merge(array('new_small_size', 'new_small_size@2x'), $image_sizes);
  }else{
    return $image_sizes;
  }
}

Step 5, set the breakpoint for new image, if it should be something other than the image width + 20px. Since this image will be the smallest image size, the breakpoint should be 1px to account for browsers that do not recognize media queries.

add_filter('picturefill_wp_media_query_breakpoint', 'theme_picturefill_new_small_size_breakpoint', 10, 3);

function theme_picturefill_new_small_size_breakpoint($breakpoint, $image_size, $width){
  return in_array($image_size, array('new_small_size', 'new_small_size@2x')) ? 1 : $breakpoint;
}

Does this example help illustrate how to customize Picturefill.WP? Are there any points that need further clarification, or additional examples that would be useful?

I’ve debated with myself about that. I’m glad you brought it up.

As far as server space goes, WordPress already creates large, medium, and thumbnail sizes automatically. The only new images that that Picturefill.WP creates are the @2x retina sizes, and I think that is in line with WordPress’s image conventions. This will take up more server space than the default WordPress installation, but I don’t see a better solution at the moment.

On the subject of allowing the theme author to specify additional responsive image sizes, I agree. I believe that the hooks added with version 1.2.0 should allow the theme author to set their own image sizes via their theme’s functions.php file. I’ll try to add an example in the [documentation on GitHub](https://github.com/kylereicks/picturefill.js.wp#extending-picturefillwp) this week to detail overriding the default responsive image sizes.

Thanks for bringing up the issue. I’ll reply to this thread again later this week when I’ve put together a new example or two in the documentation.

I’m going to mark this issue as resolved with version 1.2.0

See the [Extending Picturefill.WP](https://github.com/kylereicks/picturefill.js.wp#extending-picturefillwp) subsection of the GitHub repository for an example of how to extend the plugin and add additional image sizes if desired.

Good question.

Short answer, no… or rather, you are correct in your assumption. The plugin wont look through images outside the_content, and I don’t plan on expanding it to hook into other filters by default.

Longer answer, soon. Hooking and structuring the plugin to be easily extended by theme authors is the major goal of the next feature release. I will certainly take your question into account when thinking about extension use cases.

Longest answer yes. Even though the current stable version of the plugin is not well hooked, you can still take advantage of some of it’s functions in your theme.

If, for example, your post_thumbnail is the same size as your thumbnail, the following code in your functions.php file might just do the trick. (It’s working for me in a single test case, but I haven’t tested it extensively)

add_filter('post_thumbnail_html', array('Picturefill_WP', 'replace_images'));

add_filter('post_thumbnail_html', 'add_attachment_id_to_post_thumbnail_class', 9, 5);

function add_attachment_id_to_post_thumbnail_class($html, $post_id, $post_thumbnail_id, $size, $attr){
   return preg_replace('/class="([^"]+)"/', 'class="$1 size-thumbnail wp-image-' . $post_thumbnail_id . '"',$html);
}

If you are so inclined, give that a shot and let me know if it works for you. If not, I have another idea that we could try that target the post_thumbnails more directly, but I’d like to try it out myself before I post it as a possible solution.