Hard-coded width/height attributes in all image tags

Yesterday I changed a logo on one of my projects and decided to set the height and width of the image. In the past I had noticed that WordPress inserts the outdated and deprecated width/height attributes inside self-generated image tags but since I usually get the src and code the image myself no problem had been raised. This time I wanted to act more “Wordpressy” and use the WordPress function:

the_custom_logo();

Now when I tried to change width and height through CSS file it wouldn’t take any effects. Inspecting the chrome developers tool I realized that the obstacle was the hard-coded width and height within the img tag.

<img width="203" height="160" src="the_src" class="custom-logo" alt="Booking" itemprop="logo">

I though with my self easy-peasy, wordpress must have provided with some override which is usuall either a filter to modify the output or a plugable function that can be overridden. To my surprise none has been provided.

Searching through the internet 2 solutions was found none of them were interesting and none claim to be. One path was using jQuery to remove the attribute like this:

$('.custom-logo-link img').removeAttr('width').removeAttr('height');

The other solution uses regular expression and removes the attribute like this:

function remove_image_size_attributes( $html ) {
  return preg_replace( '/(width|height)="\d*"/', '', $html );
}
add_filter( 'get_custom_logo', 'remove_image_size_attributes' );

Both work great and remove the attribute but what I don’t like about them is that both remove the attributes after they have been added and are kinda hack on the a strange choice of coding.  

I will go with regular expression I probably add the code to my plugin.

Hard-coded width/height attributes in all image tags

Leave a Reply

Your email address will not be published. Required fields are marked *