Support » Plugin: Picturefill.WP » breakpoints and media sizes

  • Resolved pixeline


    This plugin fills an important gap in responsive techniques, thank you for that.

    I do have a quirk about the fact that it is based on the media image sizes.

    Media sizes are for creating different image versions according to where they will be used, layoutwise. For instance, some small thumbnails will be irrelevant on a mobile version, so why create copies of them and waste server space if they won’t be used at all?

    Wouldn’t it make more sense to have the theme author specify additional image dimensions specifically for the plugin either in its functions.php or via the media size option page, and have a way of telling the plugin to only make responsive the image sizes?

    Thank you,

Viewing 14 replies - 1 through 14 (of 14 total)
  • Plugin Author kylereicks


    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]( 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.

    Great, i’ll gladly betatest if you need. i’m planning on using it first on my own website.

    Plugin Author kylereicks


    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);
        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?

    Plugin Author kylereicks


    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.

    Hello Kylereicks,
    Sorry for the delay. I tried the plugin and it creates a strange error: It duplicates the entire html code of the page!
    I’m wondering if it is not related to a conflict with cache plugins (using Super Cache + server uses varnish).

    Thank you!

    Plugin Author kylereicks



    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.

    Hy Kyle,

    I think it is just the_content.

    I’m using picturefill_WP in plain vanilla mode (not changing anything, just activated the plugin).

    Sorry about wp super cache: in fact it was not installed at all on my setup, so it cannot be the cause. Still, my host server is using a Varnish cache.

    Thank you,

    Also: i tested with all plugins desactivated, except picturefill. Problem still occurs.

    I’m using latest WP (3.6.0)

    Plugin Author kylereicks


    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.

    hi kyle,

    no problem : i’ll test other versions until i can make it work °-)
    I developed the theme myself using Bones ( . The functions.php is indeed heavily modified. I’ll have a try switching to another theme…

    Hi Kyle,

    i’ve updated the plugin to 1.2.1 and it seems to work now!

    Thank you,

    Ok, the issue reappeared. But i found the problem: i was generating html for the page meta tag “description” …. Not sure why it only showed when your plugin is activated and not before.
    Anyway, i’ve fixed it and your plugin works now… thank you!

    Plugin Author kylereicks


    I’m glad you found a solution. Is there anything you think I might be able to add to the plugin or documentation to avoid this problem in the future?



    If of interest to anyone, we used this code as a model for adding 2 additional image sizes for a project where we are dealing with some large images and wanted a total of 5 breakpoints.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘breakpoints and media sizes’ is closed to new replies.