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?
