[Resolved] Images srcset attribute on blog page

[Marcos]

Hi.
I’ve added a few custom image sizes and would like WordPress to generate the correct ‘srcset’ attribute on img tags on my blog page. I’ve managed to get WP to generate the correct ‘sizes’ attribute using the “wp_get_attachment_image_attributes” filter, but the ‘srcset’ attribute is only populated with the default GP image sizes.
How can I get all image sizes in the srcset?

I’ve coded some shortcodes for my site which make use of featured images, and what I’ve done in those cases is use “wp_get_attachment_image_srcset” to generate the correct ‘srcset’. No problem there as its my own code.
But of course, the code that renders the images in the blog page is part of the GP theme (looks like it is in generatepress/inc/structure/featured-images.php), and I have no idea how to implement it there. I was thinking of making a copy of that file in my child theme and changing the code there but I’m afraid I might break something, or that I might not be tackling the issue the correct way.

Sorry, its the first time I mess around with responsive images in WP and I’m no WP expert either, as you have probably noticed 😉
Any help would be very much appreciated.
Thanks very much!
Marcos

GP Premium 1.7.2

[Tom]

Hey Marcos,

GP should use the default WP sizes as long as the sizes aren’t set through “Customize > Layout > Blog”. Are those values empty for you?

If so, can you link me to your blog page so I can inspect the images?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Marcos]

Hi Tom.
I’ve set nothing in Customize > Layout > Blog.
GP is using the default WP sizes. My question is: how do I get GP to add my custom sizes (added with ‘add_image_size’ function) to the srcset?

Thanks.

[David]

Hi there, this topic may help:

https://generatepress.com/forums/topic/gallery-grid-perfectly-square-same-size-images/#post-600638

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Marcos]

Hi David, sorry but I think that topic has nothing to do with what I’m asking…

[Tom]

You can tell GP to use your custom image size like this:

add_filter( 'generate_page_header_default_size', function() {
    return 'your-custom-size';
} );

However, I’m not sure if this will handle srcset for you. I assume that would be a filter within WP itself.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Marcos]

Ok, so I’ve found that if I change ‘full’ for the string with which I’ve prefixed the image sizes I’ve added with add_image_size() in this line of code in inc/structure/featured-images.php I get the srcset attribute correctly populated:
apply_filters( 'generate_page_header_default_size', 'full' )

So my question is: how do I override this without editing GP’s core file?

Thanks

[Marcos]

I found this solution and it works, but is it the cleanest way?
Can it break something elsewhere on my site?
Thanks.

https://wordpress.org/support/topic/inc-folder-in-child-theme/

[Tom]

What I provided above is the cleanest way: https://generatepress.com/forums/topic/images-srcset-attribute-on-blog-page/#post-697286

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Marcos]

Thanks Tom.
You’re right. My apologies for not looking into that properly.
Cheers

[Tom]

No problem! Glad I could help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts