ResponsiveImagesCG / wp-tevko-responsive-images

Fully responsive image plugin for wordpress
449 stars 53 forks source link

Add custom srcset + sizes values to post thumbnails? #255

Open ChrisBegley opened 8 years ago

ChrisBegley commented 8 years ago

I'm helping test Jetpack to make sure Photon is fully compatible with 4.4's responsive images and I had a few questions that I was hoping someone could help me with. I'm not a developer, but I can usually figure things out if I have code examples.

I looked at the Twenty Sixteen theme to see how to add custom sizes attributes to post thumbnails and it worked like a charm.

function superhero_post_thumbnail_sizes_attr( $attr, $attachment, $size ) {

if ( 'home-panel' === $size ) {
        $attr['sizes'] = '(min-width: 1090px) 408px, (min-width: 881px) 340px, (min-width: 728px) 408px, (min-width: 576px) 335px, (min-width: 430px) 555px, (min-width: 321px) 408px, (min-width: 320px) 300px';
    } 
    return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'superhero_post_thumbnail_sizes_attr', 10 , 3 );

I was wondering if someone could provide me with a code example to add my own srcset attributes to a post thumbnail, using just width and height values. Is that possible? Right now I have a ton of custom image sizes for each post thumbnail, in order to account for 2x and 3x images at all the major breakpoints. Here's what one of them looks like:

add_image_size( 'home-panel', 408, 227, true );
add_image_size( 'home-panel-300', 300, 167, true );
add_image_size( 'home-panel-353', 353, 196, true );
add_image_size( 'home-panel-392', 392, 218, true );
add_image_size( 'home-panel-555', 555, 309, true );
add_image_size( 'home-panel-600', 600, 334, true );
add_image_size( 'home-panel-706', 706, 393, true );
add_image_size( 'home-panel-784', 784, 436, true );
add_image_size( 'home-panel-816', 816, 454, true );
add_image_size( 'home-panel-900', 900, 501, true );
add_image_size( 'home-panel-1059', 1059, 589, true );
add_image_size( 'home-panel-1110', 1110, 618, true );
add_image_size( 'home-panel-1176', 1176, 654, true );
add_image_size( 'home-panel-1224', 1224, 681, true );
add_image_size( 'home-panel-1665', 1665, 926, true );

That's going to to be rough on my server, so I was wondering if there's a way to just set the srcset values for a post thumbnail via the functions.php file, just like the sizes values. It'd be awesome if Photon can hook into that so that 15+ image sizes won't have to be generated for every post thumbnail. Photon can create those image sizes on the fly.

Hopefully that all makes sense. Any guidance or code examples you can provide would be appreciated. Thank you!

joemcgill commented 8 years ago

Thanks @ChrisBegley. What you're aiming for seems like an ideal use of Photon in combination with responsive images. Implementing this idea is something that will probably need to be handled within Photon (related thread), but I'll see what I can come up with in the mean time.