[Resolved] Gutenberg gallery generates “Properly size images” in mobile view lighthouse

[Dominique]

Hi.

All over my website I am using the maximum full size images that is 8K when I want it to fill the screen. All other images are 4K for half screen. An easy layout. I generate enough image sizes to serve any view port width. All my images are served properly on their own by SRCSET that seems to be automatically generated by WordPress.

With the Gutenberg gallery I am fighting to get SRCSET to work. For standard screen sizes laptop or desktop to have a decent size thumbnail I have to put it 300px wide. For reasons above and beyond my understanding in mobile screen width the browser doesn’t choose in SRCSET the right image width. It downloads the 300px wide. Being that there are two pictures side by side I get a picture about twice the necessary file size downloaded and “Properly size images” in lighthouse or web.dev

If I reduce the size of the thumbnail to 192px wide for example then on desktop the thumbnails are too small.

I researched this extensively and in a few instances it was blamed on the theme. Don’t know how accurate those claim are…

Any insights and solutions would be greatly appreciated.

Please advise

[Dominique]

I forgot even though I assigned a class “profile-image” to a div wrapping the whole gallery I still get a Cumulative Layout Shift of around .200 in mobile. In desktop view the CLS is in the green. And still in desktop while watching page paint the size of the thumbnails don’t seem to be known by the browser and the page shifts down.

[Leo]

Hi there,

I could be wrong but I doubt this is a theme issue.

Do you see the same behaviour when using a Twenty series WP theme?

[Dominique]

Hi,

That’s a great idea! I will try it tomorrow. My local time is close to 11pm.

The comments that I read regarding theme pertained to the theme not generating the picture sizes. Not my issue as I am generating enough picture sizes in code snippets using PHP. If you inspect a picture in the gallery SRCSET is generated for jpg & webp. The browser simply doesn’t choose the right one.

As I initially indicated I don’t think those claims where accurate. Anybody can write anything on the internet. At Cloudflare they have support engineers that don’t have engineering degrees. And let’s not forget that everything is the best… Basically anything goes.

I will test it since I have a triple doctorate in web design and come back with my findings 😜

[Leo]

Sounds good.

[Dominique]

Hi,

I replaced the theme by 2021. As I thought still “Properly size images” in web.dev for mobile.

Unfortunately while doing the theme transition and coming back there is now a huge gap at the bottom of my header that I have no idea how to fix. Any ideas?

After giving this some thought, as a workaround, would it be possible with CSS to have only one column showing centered instead of two? It would solve everything.

Please advise

[Dominique]

Forget the gap. it’s now gone. Even though I extensively purged all caches prior to writing it.

[Leo]

Give this CSS a shot:

.blocks-gallery-grid .blocks-gallery-item, .wp-block-gallery .blocks-gallery-item {
    width: 100%;
    margin: 0.5em 0;
}

[Dominique]

Hi,

Works great for under 599px. Above 599px it goes to 4 columns. Considering each picture is 300px wide the resulting thumbnails are quite small.

How can it go to 2 columns from 600px to 1250px I guess.

I’m getting a cumulative layout shift of 0.546 in mobile. It’s expected since the picture height is not declared. The browser does not know the height of the picture and doesn’t allocate the space.

In WP Rocket there is a feature that adds missing image dimensions. Most likely when the width is declared it seems that the height is not added. Any way to add the height to completely resolve this?

Please advise

[Leo]

You will need to use my CSS above with some media query:
https://docs.generatepress.com/article/responsive-display/

Unfortunately you will need to check with WordPress’ support team for further customization of the gallery block as that’s a core block that the theme doesn’t control.

[Dominique]

Hi,

I know how to do media queries I just don’t always know what to put inside them for expected results 😉

Initially I put the code you supplied as such:

@media (max width 768px) {
	.blocks-gallery-grid .blocks-gallery-item, .wp-block-gallery .blocks-gallery-item {
		width: 100%;
		margin: 0.5em 0;
	}
}

Still the breakpoint was 599px. I took it out of the media query and 599px still.

I have no idea how to make this work for two columns 🙂

There are a lot of things that I am starting to understand about CSS. Columns, flexbox & blocks are above my current knowledge.

I thought CSS was part of support as described clearly in the scope of support document that you sent me on a previous support request. Also performance issues in my case CLS or cumulative layout shift.

I researched this as much as I could. 95% of the time I solve everything on my own and only ask for help when I’m really stuck.

Sincerely almost every support request that I see and read on wordpress.org doesn’t end up being resolved. Unless it’s something basic like changing the color of text… And then like with WooCommerce they will end up saying that it’s a personalization and out of their scope of support 🙂 So your response is the equivalent of go fly a kite in polite words & you will never get a solution.

Please advise

[Tom]

While we do our best to help with anything we can, we don’t have the resources to spend a ton of time on general WordPress support queries like this, unfortunately. We’re a small team, so it’s important we direct our resources to the theme itself.

Issues like this require a considerable amount of playing with/debugging, which we simply aren’t able to do here unless it’s an issue directly related to the theme.

Properly sized images shouldn’t cause any CLS issues, so I’m not sure those two issues are related in this case.

When it comes to images, WordPress doesn’t really do srcset all that well, unfortunately. We don’t touch it as a theme as it’s very difficult to get right under all possible variables.

If you post this issue over on WordPress.org and show them it’s happening with the core WP theme (so they can’t say it’s a theme issue) and no other plugins (so they can’t say it’s a plugin issue), they should be much more willing to actually look at the issue and help you fix it.

[Dominique]

Hi Tom,

Thank you for your elaborate response. I completely understand the limited resources that you have.

As far as CLS it is caused by picture height not being declared. I did read & can’t seem to find again on wordpress.org or github something about picture handling in WordPress that dates. It is discussed by the core team & still isn’t resolved or pending. About the same as the security issues of jquery that took about three or more years to resolve… I will contact wordpress.org or do a bug report on github. I’m convinced that the little princesses of WordPress won’t bother and it will be a total waste of time. I did see similar issues dating back mid 2020… So basically screw CLS.

As for CSS. I analyzed & inspected extensively to find out how come the breakpoint from 4 columns to one column is 599px. Found nothing. I read all I could find using a variation of keywords for Google searches. Bottom line I found a bunch of articles explaining how to implement two columns with flexbox. The thing is I don’t control the HTML.

There seems to be a mix of flexbox and blocs in the CSS. Unfortunately flexbox, floats, blocs, grids I’m useless at. Frankly, I don’t believe that I need to know the complete inner workings of a combustion engine in a car to drive it and get from point a to point b. You guys are continually coding or working on engines and providing a CSS solution to have two columns from I guess 600px to 1250 px will be really easy. For me, it’s countless hours as I already spent about four hours to figure this out. Funniest thing is that once it will be applied and working I will most likely never need to use it again as I’m not a developer 🙂

On the English version of the page I did apply a max width 768px media query of Leo’s code and the breakpoint is still 599px!

I sincerely think that Leo needs a vacation of minimum two weeks to resource. Ideally 3 weeks. A response like: “You will need to use my CSS above with some media query” clearly indicates that. If i knew how to adapt and modify the code he supplied I wouldn’t of initially opened a support request!

The more I deal with WordPress core, Gutenberg and native products like WooCommerce the more I understand why developers don’t bother with the loads of BS & the resulting black hole of time that they produce. It’s really no time efficient. I now completely understand why they use page builders like Elementor with the performance tradeoffs. At least the damn things work without having to continuously troubleshoot and adapt with custom CSS so it doesn’t look like total poop and done by a 7 year old kid.

Please advise on the CSS

[Leo]

I feel like Tom’s reply above has explained that we have limited resources to help with general WordPress questions which includes modifying the gallery block with CSS.

The same thing is suggested in the forum scope article:
https://www.screencast.com/t/r9g26J9bd

Looking through your previous topics, I feel like we’ve been pretty good at helping or point you in the right direction for all the non-theme-related questions such as WooCommerce etc.

There are other resources where you can get general WordPress or CSS help as well such as this forum:
https://wordpress.stackexchange.com/

As for the CSS part, this is how you use media query:

@media (max width 768px) {
    .blocks-gallery-grid .blocks-gallery-item, .wp-block-gallery.wp-block-gallery.columns-4 .blocks-gallery-item {
        width: 100% !important;
        margin: 0.5em 0;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .blocks-gallery-grid .blocks-gallery-item, .wp-block-gallery.columns-4 .blocks-gallery-item {
        width: 50% !important;
        margin: 0.5em 0;
    }
}

You can change the px number depending on where you want the CSS to trigger.

And make sure your caching plugin is cleared and perhaps disable it during the development stage.

Lastly, you could also consider using a gallery plugin like Envira which might have a better method to resize the image and allow more control.

[Dominique]

Hi,

Thanks for the code.

We tried about three different gallery plugins. We purchased the full blown versions of NextGEN & Envira at around $200 US each and got refunds.

For your information the NextGEN basic to the bones pro gallery injects 800KB of useless bloat. Four external requests to Fontawsome one of the requests is a compressed 400KB JS file plus 3 other requests that are font symbols librairies. Two external requests to Google fonts because using a custom font instead of a system font or the website font is just unbearable for the developer. One of the pro galleries had 2.5MB of useless bloat. They do support webp.

Envira had a bit better performance and to my point of view possibly the best of the worst. They don’t support webp. The lead developer clearly indicated that it wasn’t in their roadmap in the near future.

If you go to each of these gallery plugin websites they all use the trendy buzzwords light weight and performant. Yea whatever.

We defaulted back to Gutenberg gallery. We are also considering trying Meow gallery that adds just CSS to the Gutenberg gallery. There is also FooGallery. We are using FooBox Lightbox it works great and you enable per page the CSS & JS if you want it to work per page.

Basically we are not cheap and ready to pay for something that works and performs properly. we are also relunctantly considering using Elementor on those pages. We have Elementor pro subscriptions. Damn gallery works great.

Let me make this blatantly clear. If it wouldn’t be for COVID that for the type of business we are in and our ethical or code of conduct brought us a lot of free time. Let me stress that our local competitors are running fully staffed 🙂 There is no way in hell without the support of the guys and gals at GeneratePress that we would of been able to get to an almost completed project from a switchover from Elementor pro. It’s a huge endeavour that is certainly not efficient & a complete black hole of time. The only compensation is the blazing fast performance results that were simply unachievable using all optimization tricks with Elementor.

So have you been good to us? Hell ya!

[Author]

Posts