- This topic has 12 replies, 4 voices, and was last updated 2 years, 8 months ago by
George.
-
AuthorPosts
-
September 18, 2019 at 4:11 am #1012394
Rafał
Hi there!
Please help! I can’t sleep because of this imperfection of my favorite WP theme…
How do you think about implementing full support ofsizes
attribute?When we put hi res featured images, which are fine on high density large screens (on single posts), they become serious performance mistakes especially in column layout of blog.
BTW: WP Show Posts does not make any difference on that issue.By now we may have quite abundant
srcset
, but it remains useless along with present scantysizes
attribute, which does not take into account neither any breakpoints or any theme settings as max width of the main container (without sidebar), or horizontal padding, or column gaps.September 18, 2019 at 9:40 am #1012795Tom
Lead DeveloperLead DeveloperHi there,
By default, GP uses core WP functionality to display featured images, which includes all srcset images.
However, if you’re using the current resizing options in the Customizer, it only includes that one image. We’re working on a solution for that in GPP 1.9.
It would definitely be cool to add some specific sizing options for when posts are in columns. I’ll look into that 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentSeptember 18, 2019 at 9:55 am #1012811Rafał
Great! Thank you! I’m eagerly waiting…
Good luck!September 18, 2019 at 4:09 pm #1013082Tom
Lead DeveloperLead DeveloperThanks! I appreciate the suggestion 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentFebruary 10, 2020 at 4:12 pm #1161143George
Hi, sorry for opening up this thread again, has it already been implemented in 1.9?
February 11, 2020 at 9:00 am #1162100Tom
Lead DeveloperLead DeveloperIt’s not, but we’re ditching the current resizer in 1.10, so the standard srcset values should come back.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMay 16, 2020 at 9:39 am #1287495Dan
Hi Tom
Just to add my thoughts to this – I believe (though may be wrong) that the srcset is not the issue with regard to the images being served when the blog is more than one column – it is the sizes attribute. This was the issue identified more eloquently than I am describing in this post – https://generatepress.com/forums/topic/responsive-images/.
This still appears to manifest – for example I have a two column set up where on large screens the thumbnail true width is 390px wide but the sizes attribute states it is 896px wide – sizes=”(max-width: 896px) 100vw, 896px” and hence a far too large srcset image is served.
As you identified in the post I linked to above I suspect this is no easy fix and more to do with how badly WordPress core logic handles the sizes attribute but it would be great to see you work your genius and find a solution to add to what is already an incredible theme.
May 16, 2020 at 3:12 pm #1287839Tom
Lead DeveloperLead DeveloperIt’s kind of an interesting issue. We could do something where srcset/sizes are disabled when columns are active, but that would be a shame for when those attributes are useful.
We could also possibly change the sizes if columns are active, but I’m not sure there’s a way to calculate the ideal widths we’d want.
I’ll assign this to myself and think on it 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMay 16, 2020 at 11:22 pm #1288148Dan
Thanks Tom
Agree that the first solution wouldn’t improve the situation.
I guess the logic in the second solution would need to consider factors like container width, content spacing and number of columns to give a relatively accurate number at larger screen sizes….but am getting way beyond my capability so will leave it your more than capable hands.
Thank you as ever for such incredible support.
May 17, 2020 at 9:43 am #1288861Tom
Lead DeveloperLead DeveloperYes, all of those factors would need to be considered. Not sure it’s possible, but I’ll play with it 🙂
Thanks!
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMay 17, 2020 at 10:08 am #1288898George
Yeah, interesting.
I have to say, it sounds complicated but from my limited Javascript knowledge, I believe it could be possible unless I am missing something. All those mentioned elements can be manipulated in the DOM including computed values and various sizes can be conditionally applied. And, as Dan mentioned, relatively accurate numbers should suffice.
May 17, 2020 at 3:32 pm #1289256Tom
Lead DeveloperLead DeveloperJavascript is an option, but it’s not great performance-wise. If you’re making all of those calculations once the page is loaded, it will make a difference in your speed scores.
It might just be possible to do some math on the PHP side of things. Even if the number was approximate (container width / number of columns), it would be a better result than it is now.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMay 17, 2020 at 3:41 pm #1289263George
Aha, ok, good to know!
Thanks, Tom.
-
AuthorPosts
- You must be logged in to reply to this topic.