kylereicks / picturefill.js.wp

A WordPress plugin to use Picturefill.js for image loading.
106 stars 10 forks source link

Respect Post Thumbnail Size #25

Closed dougalcrowder closed 10 years ago

dougalcrowder commented 10 years ago

If I have <?php the_post_thumbnail(); ?>
it works as expected using this https://github.com/kylereicks/picturefill.js.wp#using-picturefillwp-to-load-post-thumbnails-in-a-theme

However, if I specify an alternative size such as <?php the_post_thumbnail('square-thumb'); ?>
it just renders it as the standard post thumbnail size. Apart from this tiny thing, it is awesome, thanks.

kylereicks commented 10 years ago

Right you are. That is an excellent point, and something that could be more clear in the documentation. Several of the functions in that example are specific to the default post thumbnail size.

Let's try again, allowing for different thumbnail sizes.

add_action('init', 'add_retina_post_thumbnail');
add_filter('post_thumbnail_html', 'theme_picturefill_post_thumbnail', 10, 5);
add_filter('post_thumbnail_html', 'add_size_to_post_thumbnail_class', 9, 5);

function add_size_to_post_thumbnail_class($html, $post_id, $post_thumbnail_id, $size, $attr){
  return preg_replace('/class="([^"]+)"/', 'class="$1 size-' . $size . '"', $html);
}

function add_retina_post_thumbnail(){
  global $_wp_additional_image_sizes;
  add_image_size('post-thumbnail@2x', $_wp_additional_image_sizes['post-thumbnail']['width'] * 2, $_wp_additional_image_sizes['post-thumbnail']['height'] * 2, $_wp_additional_image_sizes['post-thumbnail']['crop']);
//  add_image_size('additional-non-standard-image-size@2x', $_wp_additional_image_sizes['additional-non-standard-image-size']['width'] * 2, $_wp_additional_image_sizes['additional-non-standard-image-size']['height'] * 2, $_wp_additional_image_sizes['additional-non-standard-image-size']['crop']);
}

function theme_picturefill_post_thumbnail($html, $post_id, $post_thumbnail_id, $size, $attr){
  add_filter('picturefill_wp_image_attachment_data', 'theme_picturefill_post_thumbnail_attachment_data', 10, 2);
  add_filter('picturefill_wp_image_sizes', 'theme_picturefill_post_thumbnail_sizes', 10, 2);
  add_filter('picturefill_wp_media_query_breakpoint', 'theme_picturefill_post_thumbnail_breakpoint', 10, 3);
  return Picturefill_WP::get_instance()->cache_picturefill_output($html, 'post_thumbnail');
}

function theme_picturefill_post_thumbnail_attachment_data($initial_array, $attachment_id){
  $post_thumbnail_data = array(
    'post-thumbnail' => wp_get_attachment_image_src($attachment_id, 'post-thumbnail'),
    'post-thumbnail@2x' => wp_get_attachment_image_src($attachment_id, 'post-thumbnail@2x')/*,
    'additional-non-standard-image-size' => wp_get_attachment_image_src($attachment_id, 'additional-non-standard-image-size'),
    'additional-non-standard-image-size@2x' => wp_get_attachment_image_src($attachment_id, 'additional-non-standard-image-size@2x')*/
  );
  return array_merge($initial_array, $post_thumbnail_data);
}

function theme_picturefill_post_thumbnail_sizes($default_image_sizes, $image_attributes){
  return in_array($image_attributes['size'][1], array('post-thumbnail'/*, 'additional-non-standard-image-size'*/)) ? array(
    $image_attributes['size'][1],
    $image_attributes['size'][1] . '@2x'
  ) : $default_image_sizes;
}

function theme_picturefill_post_thumbnail_breakpoint($breakpoint, $image_size, $width){
  return in_array($image_size, array('post-thumbnail'/*, 'additional-non-standard-image-size'*/)) ? 1 : $breakpoint;
}

I think that should do it. The commented out sections indicate where you would need to edit the code to include non-standard post thumbnail sizes.

This is something I will be sure to address in the helper functions that are going to be a part of version 1.3.0. Thanks very much for bringing up the issue.

dougalcrowder commented 10 years ago

Apologies for the delayed response. I just tested it and it works. Thank you very much.