Image sizes of Gutenberg articles not correct after WordPress Update Jan2020

Support
#1

Hello,

I just noticed that after updating WordPress all my articles that are edited in Gutenberg are showing horizontal images smaller than before. On the mobile they look tiny (used to be screen-wide), but also on the desktop they are smaller than the pictures of the articles that are still in Classic Editor.

I also discovered that if I choose alignment to ‘wide width’ the pictures show up correctly. But it’s just not feasible to go and do this manually for hundreds of articles.

This is clearly related to Gutenberg/WP update, but I wonder if anyone else is seeing this and have any ideas on how to fix it?

Thanks.
My site is fullsuitcase.com

#2

Hello @JurgaR,

Thanks for writing in!

Clearing your caches might give you a different result.

After doing the updates, always remember to clear all caches (if you are using Autoptimize, WP Rocket, WP SuperCache or W3 Total Cache) when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

And please clear your browser cache too. You may use private browsing mode in testing your site to make sure that you are viewing the latest codes from the updates and not the cached version in your browser.

Hope this helps.

#3

Thank you, but it’s not a cache problem. Tried on all kinds of devices after clearing cache. It’s only Gutenberg posts that have this issue and setting pictures to ‘full width’ or ‘wide width’ manually seems to be the only way to solve it. Which is a nightmare for an image-heavy blog.

Here is an example of an article that is still edited in Classic Editor and horizontal pictures show full width: https://fullsuitcase.com/4-days-in-iceland/

Here is one that is in Gutenberg and all horizontal images are not as wide (even on desktop they are narrower, but on mobile they are tiny): https://fullsuitcase.com/sedona-day-trip/ (Featured image is the only one that shows ok)

#4

Hi JurgaR,

Please inspect your Image block and set the Image Size to Full Size, and if you see your image has only width around 800px, please manually set the width to 1170 (your site max-wdith), this is to make sure that your image can cover the full width of the container.

I notice that the site is under Autoptimize, please clear its cache after to make sure the changes take effect immediately.

Block Editor Handbook

Thanks,

#5

Thank you. My developers found the way to solve it by changing the code for all the images to set them to ‘align center’ and now they show correctly. So this is solved. (still weird that a simple WP update had such an impact)

One question - I always uploaded all my horizontal images at 878px on the wide side as that size was given to me by X-theme support in the past as the size my theme/site actually uses. Are you telling me that I would be better uploading them at 1170px? Basically, I’d like to have them higher quality without impacting the site speed and I always thought that 878px was what I had to do. Thanks a lot!

#6

Hello @JurgaR,

Sorry for the confusion. The 1170 is the site maximum width. Since your blog posts consists of a sidebar, you can use 878 pixels instead. 878 pixels is just right for your single posts.

Hope this explains it briefly.

#7

Ok, thanks a lot for taking the time to answer.

#8

You are most welcome!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.