Limiting image max size inserted via editor

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.

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.