Some filters would help

  • Resolved ChiefAlchemist

    (@chiefalchemist)


    4 years, 9 months ago

    Hello Meow –

    Your plugin was recommended to me by another WP dev. I’ve been looking for a Guttenberg galley that is smart about how it uses the img tag’s srcset and sizes attributes. Specifically, the one that’s plugins consistently get wrong is the setting for sizes. That said, your plugin is better than the others I’ve looked at ??

    <sidebar>

    This article does a great job slogging through the details:

    https://ericportis.com/posts/2014/srcset-sizes/

    TL;DR – The magic comes from the sizes setting, not srcset. Without a good sizes= value, the browser is going to make bad decisions about which image to pick from the srcset.

    <sidebar>

    I’ve been looking at your code, looking for an appropriate filter but thus far I can’t find anything. Off the top of my head (read: I’m been looking about 30 mins and in that time can not master your code), it looks like class Meow_Gallery_Generator > method build_next_cell is where a filter would be ideal That is, being able to modify the args that are sent to wp_get_attachment_image.

    Ultimately, I need to be able to do two things:

    1) Have a clear understanding of what image(s) is going to be modify. The problem with using the filters in core’s wp_get_attachment_image is you don’t get any context. That is, it doesn’t tell what image location is being rendered. Is it a gallery image? Or some other image?

    2) Use the $content_width in doing the calculation for the sizes value/string.

    In other words, the more args / attributes you can pass in the filter the better we’ll be able to properly modify the args for wp_get_attachment_image. Things such as: galley type, columns, the blocks’s custom CSS class, etc.

    For example, this is an image from Meow Galley: Square:

    
<img width=&quot;1023&quot; height=&quot;539&quot; src=&quot;https://gg2.dev.cc/wp-content/uploads/2019/10/Princeton-University-Rowing-Crew-2048x1079.jpg&quot; class=&quot;wp-image-625&quot; alt=&quot;&quot; srcset=&quot;https://gg2.dev.cc/wp-content/uploads/2019/10/Princeton-University-Rowing-Crew.jpg 2048w, https://gg2.dev.cc/wp-content/uploads/2019/10/Princeton-University-Rowing-Crew-300x158.jpg 300w, https://gg2.dev.cc/wp-content/uploads/2019/10/Princeton-University-Rowing-Crew-768x405.jpg 768w, https://gg2.dev.cc/wp-content/uploads/2019/10/Princeton-University-Rowing-Crew-576x303.jpg 576w, https://gg2.dev.cc/wp-content/uploads/2019/10/Princeton-University-Rowing-Crew-992x523.jpg 992w, https://gg2.dev.cc/wp-content/uploads/2019/10/Princeton-University-Rowing-Crew-1200x632.jpg 1200w, https://gg2.dev.cc/wp-content/uploads/2019/10/Princeton-University-Rowing-Crew-1500x790.jpg 1500w&quot;<strong> sizes="33vw"</strong> />

    It’s a three-column gallery. Sizes=”33vw” is good, but it could be better. That value is telling the browser this image is going to be 33% of the total view width. That’s not quite correct. It’s really 33% of the $content_width – which is a significant different – , and then at some lower breakpoint – depending on the theme – 100vw. That is, on a small screen the image CSS might be width 100%.

    Finally, since this might help, he’s a plugin a did for the regular Gutenberg image block:

    https://gitlab.com/WPezPlugins/wpez-guten-better-image

    Since I used the block’s settings (e.g., width), as well as the $content_width I’m also to craft a more precise sizes= value.

    • This topic was modified 4 years, 9 months ago by Yui.
    • This topic was modified 4 years, 9 months ago by Yui. Reason: please use CODE button for code formatting
Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Jordy Meow

    (@tigroumeow)

    Hi,

    How would you make this better, in fact? ?? I actually spent quite some time on this, and I am of course very well aware of the importance of the sizes attribute. This is why also the sizes attribute depends on the type of layout you are using.

    But then, the layout are dynamic, and it also all depends on the theme where it is used.

    I could provide options, but they would be complex and most people would be lost with it. And even experts would spend a huge amount of time trying to find the best settings; and I thought, does it actually worth it? Isn’t it better to make everything simpler, and that actually works perfectly for 95% people? And for the 5% for who it’s unperfect, probably that most “visitors” wouldn’t even notice anything? ??

    So yeah, I am always interesting in getting a better idea of way to do this, but I would need some code changes, in order to test and make sure it worth it.

    I did improve the way I set the sizes a few times in the past, based on requests ??

    Thread Starter ChiefAlchemist

    (@chiefalchemist)

    “But then, the layout are dynamic, and it also all depends on the theme where it is used.”

    => Yup. Good. We agree ??

    “I could provide options, but they would be complex and most people would be lost with it.”

    => A filter. All I’m asking for is a filter. A filter that would allow someone who has the skills and understanding to optimize the srcset and sizes.

    There’s an opportunity – with a well-placed filter – to improve the plugin. We agree on the nature of the issue. Etc. I’m not sure what else to say. Maybe you can re-read my OP? It’s all there. At least I think so ??

    Thanks again.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Some filters would help’ is closed to new replies.