Last Updated on August 19, 2020 by Christopher G Mendla
A random check of some articles after updating WordPress to version 5.5 showed that images that were set to “Full Size” were overly large when viewed on a desktop.
Note – You may or may not have this issue when you upgrade WordPress or PHP. However, you should check out the front end thoroughly to make sure you don’t have issues with image sizes.
The problem was confined to images that were set to “Full Size” when viewed on Chrome or Edge on a Windows Desktop. The same images on a phone were fine. I decided to just change the images to “Large”. I could have done more testing but I didn’t think it was worth the time.
The image should have looked similar to the image below
The examples above don’t show the full impact. The first image was jarring. The second was how I expected it to look.
Identifying the cause of the problem.
The problem could have been caused by any of the following:
- The WordPress 5.5 upgrade
- Updating Gutenberg
- Incompatibilities between my Artisteer theme and WordPress 5.5
- A recent update by my hosting company to upgrade PHP to 7.3.x
I couldn’t be sure of the problem so my plan was to change the image sizes to “Large”
The image settings show up when you focus on an image block as shown
You can change the image size in the right sidebar.
If you look at the raw html for an image it will be similar to this:
Â
"<!-- wp:image {"align":"center","id":948,"sizeSlug":"full","linkDestination":"media"} --><div class="wp-block-image"><figure class="aligncenter size-full"><a href="https://www.chrismendlascorner.com/wp-content/uploads/2019/08/driveway-pre-project.jpg"><img src="https://www.chrismendlascorner.com/wp-content/uploads/2019/08/driveway-pre-project.jpg" alt="" class="wp-image-948"/></a><figcaption>Driveway before filling and sealing. It is worse than it looks. </figcaption></figure></div><!-- /wp:image -->" |
Â
The ‘sizeSlug’ and ‘figure class=’ will determine the image size.
Alternative methods to fix the issue
There are two ways this can be addressed. The first is to identify which images need to be changed from full to large. Then edit the article and make the changes.
The second, WHICH IS RISKY, is to use SQL to do a global search and replace.
FAIL – Trying to do a global search and replace.
My first thought was to use the free version of the “Better search and replace” plugin. I ended up causing a lot of problems. It could probably be done but it requires a lot of finesse.
I ended up with 16 images that were broken scattered among a couple of posts.
Roll up your sleeves and do it manually.
I was able to fix the images by going into the articles and adding a new image block. I needed to set the link and alignment.
One issue was how to find the articles that needed to be fixed. I could do that by going through every article.. Uggggghhh.
I was able to identify the articles by:
- Going into PhpMyAdmin
- Going to the database in question
- Going to the wp_posts table
- Doing a sql search.
The SQL query was simply:
SELECT * FROM `wp_posts`WHERE `post_content` LIKE '%figure class="aligncenter size-full%'That allowed me to identify which articles had full sized images.
Summary
I’m not sure exactly what caused this issue. It could have been something unique to my sites. Perhaps the current behavior is the expected behavior. Regardless of why it occurred, it had to be fixed to resolve some issues of ugliness.
I have two other sites that need to be upgraded to WP 5.5. I’ll need to allow time to fix any full size images if the issue occurs on those sites. I believe it will.