Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ChrisBegley opened this issue Nov 18, 2015 · 1 comment
Open

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

ChrisBegley opened this issue Nov 18, 2015 · 1 comment
Labels

Comments

@ChrisBegley
Copy link

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
Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants