🎉 Happy 4th of July! Get 15% off GP Premium with the discount code: 4THOFJULY2020

[Support request] Really responsive images with srcset & SIZES. Blog columns

Home Forums Support Really responsive images with srcset & SIZES. Blog columns

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #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 of sizes 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 scanty sizes 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.

    #1012795
    Tom
    Lead Developer
    Lead Developer

    Hi 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 🙂

    #1012811
    Rafał

    Great! Thank you! I’m eagerly waiting…
    Good luck!

    #1013082
    Tom
    Lead Developer
    Lead Developer

    Thanks! I appreciate the suggestion 🙂

    #1161143
    George

    Hi, sorry for opening up this thread again, has it already been implemented in 1.9?

    #1162100
    Tom
    Lead Developer
    Lead Developer

    It’s not, but we’re ditching the current resizer in 1.10, so the standard srcset values should come back.

    #1287495
    Dan

    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.

    #1287839
    Tom
    Lead Developer
    Lead Developer

    It’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 🙂

    #1288148
    Dan

    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.

    #1288861
    Tom
    Lead Developer
    Lead Developer

    Yes, all of those factors would need to be considered. Not sure it’s possible, but I’ll play with it 🙂

    Thanks!

    #1288898
    George

    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.

    #1289256
    Tom
    Lead Developer
    Lead Developer

    Javascript 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.

    #1289263
    George

    Aha, ok, good to know!

    Thanks, Tom.

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.