[Support request] Automatically set img width and height from metadata or filename

[John]

Many images are sized automatically with {width}x{height}.jpg or if not, the dimensions are in the metadata. Missing/empty alt text could use the post title.

Can these be parsed within GP Premium automatically to add the width, height and alt? Or is there code that can be added to the functions.php file in a child theme?

[David]

Hi there,

Do you have any example pages where the image is missing its width / height attributes – as its quite uncommon to see that in the latest versions of WP?

[John]

Thanks @David

I probably don’t have any now as I’ve installed the Image Automatic Height Width plugin.:)

But before then there were a lot of older images (I counted 165 out of over 1000 instances with an img tag but no height or width in post_content of published posts alone), even though I am using the latest versions of WordPress, GeneratePress and GP Premium.

But I don’t like adding plugins for this sort of purpose – they don’t extend the functionality and too many plugins slow sites. GP is pretty fast. The current pagespeed is 92 for desktop and 65 for mobile, probably because of client-side dynamic resizing, That is completely uncached at the moment but I want to get it as fast as possible before switching caching on for server and client.

This all arose after Google complained about the absence of dimensions impeding site performance and I baulked at the idea of going through all those posts and images.:) I am about to optimise the database and bear down on all things that slow the site down before activating caching. It’s not a new site but has been moved to a different URL and I have rebuilt it in GP.

I wasn’t aware that WordPress itself does this. Is that written somewhere? Certainly where it is metadata or dimensions in the filename, it should be automatic.

[David]

To the best of my knowledege.
This PHP Function: getimagesize does the heavy lifting.
WP uses that function in its own debuggable function: wp_getimagesize()
Which i believe is used in various WP functions for example: wp_get_attachment_image_src()

https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/

Which provides an example of the basic usage:

https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/#comment-328

[John]

@David – I’ve checked my posts table and it seems all cases now have a width and height in the table so I think the plugin has done this. I certainly found some cases before. Although loading a plugin which is only used when composing seems to be a bit of an overkill for load times. This won’t matter when I switch caching on of course but in development, there is no caching server or client side.

But I am also using WP Show Posts and while that asks for an image size to resize the featured image, it doesn’t add the width and height into the img tag. Since all images in that are the same size it should be easy to fix the code. I know this is due to be incorporated into GenerateBlocks any time soon but as I don’t get on with the block editor and will disable Gutenberg in due course, it won’t help! I have a modified version of 1.1.3 installed with updated disabled!

[David]

Sounds like you have a working solution.
Did you get WPSP to work as you required ?

[John]

@David I found a suggestion on the WPSP forum where I can use the list ID to set the image height, eg:

#wpsp-118703 .wp-show-posts-image{max-width:600px;height:auto;} /* where 118703 is the WPSP list ID and page has all images 600×300 */

I’m not sure whether this will be as fast as having height and width in the <img tag, which enables the browser to allocate the right amount of (generally) vertical space while lazily loading the image, but it appears to work – pagespeed insight doesn’t complain any longer anyway. 🙂

The automatic height and width plugin only generates the height/width for images in post_content but they are generated there permanently. This may be something that GP should be doing at least for ordinary posts and stuff. Too many plugins are bad for your health! But yes, a solution has been found!

Thanks for your help and space to discuss!

[David]

Awesome – glad to hear that its working for you!

[Author]

Posts