Limiting image max size inserted via editor

There is not, in fact, a max-size counterpart to the min-size-{image size} class. The plugin is only intended to respond down, so it should never output anything larger than the original dimensions for the image size added to the editor. If it is, then that is a problem that will need to be addressed. Do you notice any consistent circumstances under which the issue does or does not occur? Also, is this client using the latest version of the plugin, and are there any custom scripts interacting with the plugin?

Very sorry that the plugin is behaving unexpectedly. Hopefully with a few more details I’ll be able to duplicate the issue and we can figure out what is going wrong.

Thanks as always for the feedback.

Well, thats certainly fine, the plugin solves many more problems so occasional pothole is not so bad. Actually knowing its designed to not do this, is good news.

Let’s see … the problem surfaced recently with 1.2.6, but just now tried an upgrade to 1.3.1, and same behavior. This site has recently gone live, so there has not been a lot of client or anyone adding new content, which is how this surfaced. He was trying for a small image, with text wrapped around. I don’t think its been an issue previously (not that I am aware of anyway but there are several developers on our end and the client). I just tried creating a new WP page myself (default template), and same issue. The page template is pretty basic WP, nothing unusual there.

As to other scripts …. I don’t think so. But this site has got a lot going on, so I can’t rule that out. Other plugins, a lot going on in functions.php, etc. Thanks.

If the site is live, are you able to pass along a link to the issue occurring? That might let us know if it is a javascript or php issue, and give some clues as to where to start the bug hunt.

Thanks very much

We did a bit of a tap dance to bypass the plugin, to get the layout the way the client wanted it. But this is the page: https://www.bigassfans.com/founder-and-chief-big-ass-carey-smith/. I don’t think that’s going to answer many questions. Let me do a mockup on a staging version tomorrow sometime.

Its pretty image intensive site, and overall the plugin has been great. The client wanted some images up to 2000px for larger screens.

OK, I inserted a random image as a thumbnail into this page:

https://staging2.resultsbydesign.com/company/

Its the one with 2 people in hardhats below “Quirky Name”. In the editor, it is clearly the thumbnail at 480×319, but firebug is showing that picturefill grabbed a 1500×998 variant on my desktop browser.

<img alt="Jess_and_Ced_3" class="alignnone size-thumbnail wp-image-8979" width="1500" height="998" src="https://cdn.bigassfans.com/images/Jess_and_Ced_3-1500x998.jpg">

It looks like the problem is in the picturefill syntax. In the example, I notice that the picturefill syntax is the same for the image slider as it is for the page content. This is probably not the desired effect.

I might try something like this.

// Add a set of slider image sizes.
// These might already exist if they are a part of the image slide code.
add_image_size('slider-small', 500, 332);
add_image_size('slider-medium',1000, 665);
add_image_size('slider-large', 1500, 998);

// Tell the server to ignore the following code if the plugin is not active.
if(defined('PICTUREFILL_WP_VERSION')){

  // Apply Picturefill.WP to the slider images via a filter.
  // A filter may need to be added to the slider output if one doesn't already exist.
  apply_picturefill_wp('slider_content');

  // Set the responsive image list to the slider images only when filtering the slider content.
  add_filter('slider_content', 'set_slider_content_picturefill_sizes');

  function set_slider_content_picturefill_sizes($slider_content){
    // Set the sizes for the slider images
    picturefill_wp_set_responsive_image_sizes(array('slider-small', 'slider-medium', 'slider-large'));

    // Let's also set the breakpoints to respond smoothly. Just for fun.
    add_filter('picturefill_wp_media_query_breakpoint', 'slider_breakpoints', 10, 6);
    return $slider_content;
  }

  // Handle the breakpoints for the image slider
  function slider_breakpoints($breakpoint, $image_size, $width, $image_attributes, $image_attachment_data, $image_sizes){
    // Find the position of the current image size in the list of images
    $image_size_index = array_search($image_size, $image_sizes);
    // Set the index for the next image size down
    if('@2x' === substr($image_size, -3)){
      $new_index = $image_size_index - 3;
    }else{
      $new_index = $image_size_index - 2;
    }
    // Set the breakpoint to the width of the next smaller image size. If the image is already our smallest, set the breakpoint to 1.
    if(0 <= $new_index){
      $new_breakpoint = $image_attachment_data[$image_sizes[$new_index]][1];
    }else{
      $new_breakpoint = 1;
    }
    return $new_breakpoint;
  }
}

This kind of thing should use the special image sizes for the slider, but leave the standard sizes untouched for the post content. The key is to only change the output image sizes where they need to be changed, and not globally.

Sorry to be gone for awhile but been off on other projects.

The image slider works fine. Its the image in the page content that is the problem. They are probably indeed sharing much of the same code. The way the docs read, it seemed like picturefillWP would handle the WP content images without any custom code (and seems to do that, except this situation). So I need to adapt your sample code to handle regular content images, like in page.php content? What I am looking for, is if the client inserts randomly sized images via the editor, then we handle that across varying sizes without having to write exceptions for every situation. In this case, to not include images larger than the editor specified.

Thanks for the help.

I understand not wanting to mess with something that is working, so let’s try it from the other direction and reset the image sizes when we are inside the_content.

In functions.php

if(defined('PICTUREFILL_WP_VERSION')){
  add_filter('the_content', 'reset_responsive_image_queue');
}

function reset_responsive_image_queue($content){
  add_filter('picturefill_wp_image_attachment_data', 'reset_responsive_image_attachment_data', 10, 2);
  add_filter('picturefill_wp_image_sizes', 'reset_responsive_image_sizes', 10, 2);
  return $content;
}

function reset_responsive_image_sizes($sizes, $image_attributes){
  $attachment_id = $image_attributes['attachment_id'];
  $image_sizes = array(
    'full',
    'large@2x',
    'large',
    'medium@2x',
    'medium',
    'thumbnail@2x',
    'thumbnail'
  );

  if(!empty($image_attributes['size'])){
    if('full' === $image_attributes['size'][1]){
      $image_attachment_data = array(
        'thumbnail' => wp_get_attachment_image_src($attachment_id, 'thumbnail'),
        'thumbnail@2x' => wp_get_attachment_image_src($attachment_id, 'thumbnail@2x'),
        'medium' => wp_get_attachment_image_src($attachment_id, 'medium'),
        'medium@2x' => wp_get_attachment_image_src($attachment_id, 'medium@2x'),
        'large' => wp_get_attachment_image_src($attachment_id, 'large'),
        'large@2x' => wp_get_attachment_image_src($attachment_id, 'large@2x'),
        'full' => wp_get_attachment_image_src($attachment_id, 'full')
      );
      array_shift($image_sizes);
      foreach($image_sizes as $size){
        if($image_attachment_data['full'][1] > $image_attachment_data[$size][1]){
          break;
        }
        if(false === strstr($size, '@2x')){
          array_shift($image_sizes);
          array_shift($image_sizes);
        }
      }
      array_unshift($image_sizes, 'full');
    }else{
      foreach($image_sizes as $size){
        if($image_attributes['size'][1] === $size || $image_attributes['size'][1] . '@2x' === $size){
          break;
        }
        array_shift($image_sizes);
      }
    }

    $image_sizes = array_reverse($image_sizes);

    if(!empty($image_attributes['min_size'])){
      foreach($image_sizes as $size){
        if($image_attributes['min_size'][1] === $size){
          break;
        }
        array_shift($image_sizes);
      }
    }
    return $image_sizes;
  }
}

function reset_responsive_image_attachment_data($attachment_data, $attachment_id){
  $image_attachment_data = array(
    'thumbnail' => wp_get_attachment_image_src($attachment_id, 'thumbnail'),
    'thumbnail@2x' => wp_get_attachment_image_src($attachment_id, 'thumbnail@2x'),
    'medium' => wp_get_attachment_image_src($attachment_id, 'medium'),
    'medium@2x' => wp_get_attachment_image_src($attachment_id, 'medium@2x'),
    'large' => wp_get_attachment_image_src($attachment_id, 'large'),
    'large@2x' => wp_get_attachment_image_src($attachment_id, 'large@2x'),
    'full' => wp_get_attachment_image_src($attachment_id, 'full')
  );
  return $image_attachment_data;
}

I think this should avoid messing with anything in the slider, and once things are cached with transients it shouldn’t be any slower than normal.

Let me know how it goes.

Thanks very much.