Bootstrap Responsive Sizes

I apologize for the headaches. There isn’t a super easy answer to what the breakpoints should be. We’re limited to media queries that look at browser width, and not container width. A theme may have a breakpoint at 768px, but maybe we want images to be in three equal columns above 768px and two equal columns below 768px. The sizes attribute tries to fill this gap, but the syntax can be a little confusing, and it isn’t something that is implemented with this version of the plugin.

So we’re stuck with media queries. I tried to make up for the limitations of media queries by including as much information as possible in the picturefill_wp_media_query_breakpoint filter.

add_filter('picturefill_wp_media_query_breakpoint', 'theme_breakpoints', 10, 6);

function theme_breakpoints($default_breakpoint, $image_size, $image_width, $image_attributes, $image_attachment_data, $image_sizes){

/*
Let's say we just want to have the breakpoint equal the image width.
*/

  return $image_width;

/*
Or maybe we have a 32px margin around each image. In that case
we'll want width + 32 + 32.
*/

  return $image_width + 64;

/*
Or maybe we want a more seamless responsiveness, so we'll set
the breakpoint to the width of the image below the current one
in the queue.
*/
  // First we find the position of the current image size in the list of images
  $image_size_index = array_search($image_size, $image_sizes);
  // Next we 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;
  }
  // Lastly, we set the breakpoint to the width of the next smaller image size. If the image is already our smallest, we 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;
}

I think these three scenarios (image width, width + margin, and width of the next smallest image) will cover a lot of use cases, but obviously not all. An image in a sidebar may need to be “thumbnail” sized at desktop widths, but when on mobile when the design drops to a single column, it may need to be “medium” sized.

The documentation could always be better. I’ll dedicate some time to making it more clear after I squash this HDPI media query bug that is floating around.

Thanks very much for posting your questions. I know I’ve thrown a lot out there, so if there is anything that needs more explanation, or if there’s something I missed that should still be addressed, don’t hesitate to bring it up.

Thanks again,
Kyle

Kyle,

Thanks for the detailed response – the headaches do not come from anything on your end but rather me still working on wrapping my head around how things work. Please understand how grateful I am for your time and efforts on this plugin (both branches!) and taking your time to respond to the user base. I hope my post didn’t come off to you as rude.

I will look this over and respond to both threads shortly. I have actually been using PFWP 2.0 on a client build I’m launching to replace their aging site, as such I’ve got all new things to figure out – but with your help I am confident it will be nothing I can’t handle.

Great plugin

-Zach