New to the community? Start here

Problem with WordPress Image Width/Height Attributes

Hi! I’m working on a dev site and running into a peculiar problem: WordPress is stripping the width and height attributes out of my image tags.

See this HUGE photo: http://tdmd.designbyansley.com/contact/

When you inspect it, there’s no size attributes, but this is what is on the backend: <img class=”wp-image-145 alignright” alt=”bw-tina” src=”http://tdmd.designbyansley.com/wp-content/uploads/2013/09/bw-tina.png” width=”200″ height=”394″ />

I did a search for this and all I can find is tutorials to remove the tags, and I want to add them back in.

I looked in my functions file and didn’t find anything that looked like it would be stripping the tags out.

Any ideas?

Tue, 22 Oct 2013 21:07:40

faydra_deon
- WordPress Warrior
- 515 pts: Hero points 1,310 pts: Rep. points LEVEL 9
@ansley:

When I have issues with images, I use a plugin called “Regenerate Thumbnails,” and it seems to always fix whatever’s going wonky.

If you’d like to try it out, here’s the link to the plugin: http://wordpress.org/plugins/regenerate-thumbnails/

It’s an older plugin, but I’ve used it without issue as recent as a few days ago when I changed themes on two of my sites. I’ve also recommended it to folks on Twitter who were having image issues, and it worked fine for them, too.

Faydra…
Ash
- Code Norris
- 3,839 pts: Hero points 38,666 pts: Rep. points LEVEL 30
Hello there

Welcome to WPMU community!

I hope you are well today and thanks for asking the question.

Did you use the image in post/page editor? Then you can use a class in the img tag. Like:
```
<img class="my-image" src="IMAGE_PATH">
```
Then put the following in your stylesheet:
```
.my-image{

width:200px;

height: 394px;

}
```
If you get rid of the height attribute in css, then it will keep proportion and reduce the height automatically.

Please let me know if it is helpful and feel free to ask more question if you have.

Cheers

Ash
ansley
- Site Builder, Child of Zeus
- 84 pts: Hero points 177 pts: Rep. points LEVEL 4
It’s doing this for ALL of my images though, and I can’t make a class for every single one. What’s stripping out the width and height attributes?
Ash
- Code Norris
- 3,839 pts: Hero points 38,666 pts: Rep. points LEVEL 30
Well, you are right. And width/height attribute should work. In your case, in nowhere width/height attribute is working? I though you were asking for only that image. Please check if in other pages widht/height works or not and let me know.

Cheers

Ash
faydra_deon
- WordPress Warrior
- 515 pts: Hero points 1,310 pts: Rep. points LEVEL 9
@ansley:

Did you try the plugin?

Also, did you recently change themes, and/or did this start happening after adding a plugin?

Are you using a CDN?

Faydra…
ansley
- Site Builder, Child of Zeus
- 84 pts: Hero points 177 pts: Rep. points LEVEL 4
I see, the core problem is being missed (although I did try the Regenerate Thumbnails plugin just in case)

The HTML on the page edit page looks like this:

<img class=”wp-image-145 alignright” alt=”bw-tina” src=”http://tdmd.designbyansley.com/wp-content/uploads/2013/09/bw-tina.png” width=”200″ height=”394″ />

But the HTML on the front end (as viewed through Firebug) looks like this:

<img class=”wp-image-145 alignright” alt=”bw-tina” src=”http://tdmd.designbyansley.com/wp-content/uploads/2013/09/bw-tina.png”>

Literally missing the width and height tags.
Ash
- Code Norris
- 3,839 pts: Hero points 38,666 pts: Rep. points LEVEL 30
@ansley: Does it happen in every page of you site?
ansley
- Site Builder, Child of Zeus
- 84 pts: Hero points 177 pts: Rep. points LEVEL 4
@Ashok Yes!
Ash
- Code Norris
- 3,839 pts: Hero points 38,666 pts: Rep. points LEVEL 30
Would you mind if I take a closer look in your dashboard? Please send me details.

To send details, please use our contact form: https://wpmudev.com/contact/

Select: I have a different question

Subject: Attn-Ash

Details: Send all required details (admin info and/or ftp details) with a link of this thread, so that I can track.

Also post a note here once you send the info.

I will be happy to take a look :slight_smile:

Cheers

Ash
ansley
- Site Builder, Child of Zeus
- 84 pts: Hero points 177 pts: Rep. points LEVEL 4
Details sent! Thanks so much for your help!!
ansley
- Site Builder, Child of Zeus
- 84 pts: Hero points 177 pts: Rep. points LEVEL 4
I’m not using a CDN. This is a brand new site, and is in fact only the dev site. As mentioned above, I did try the plugin you recommended to no avail.

I disabled all the plugins, but that did not remedy the issue.
faydra_deon
- WordPress Warrior
- 515 pts: Hero points 1,310 pts: Rep. points LEVEL 9
@ansley:

Got it. Regenerate Thumbnails doesn’t work. No CDN.

Hm. You can say, “Go away, Faydra,” if my questions are bugging you. I promise I won’t be offended. :0)

Have you tried disabling the Visual editor and only working from HTML view?

I had a problem with my inline CSS getting stripped from my posts, and so I went to HTML view only and it stopped, because the post wasn’t flipping over to Visual view after I saved.

This is probably not the ideal long-term solution, unless you just love working in code, but if you find yourself in a time crunch, then it may be a short-term solution until you can figure out why the h/w are being stripped.

Faydra…
ansley
- Site Builder, Child of Zeus
- 84 pts: Hero points 177 pts: Rep. points LEVEL 4
Of course I appreciate your input, Faydra.

I only work in the HTML view, so that can’t be it. It’s not the inline CSS being stripped away though, it’s the HTML width and height properties.

Actually, I can fix the issue with inline styling, but this is a dev site I need to hand over to a non-coding client. So, as such, I must resolve the issue totally so that the HTML width and height is not stripped.

Thanks for your help, though!
faydra_deon
- WordPress Warrior
- 515 pts: Hero points 1,310 pts: Rep. points LEVEL 9
@ansley:

I know you’re like, “Are these people dim? I keep telling them it’s the height and width attribtues, and they keep talking about all other stuff!!!”

Yes, I understand it’s the h/w. I was only mentioning my experience with the inline CSS and how I solved that issue.

I was just doing some reading, and it seems that this is common for responsive themes. In order for the images to “shrink” for the mobile browser, there can be no hard-coded height and width.

Here’s the link to what I was reading: http://benfrain.com/wordpress-responsive-images-how-to-strip-inline-width-and-height-attributes/

So…

Is your theme a responsive theme?

If so, is it possible to disable the responsive-ness and see if it removes the h/w attributes then?

Some themes allow you to and some don’t, so it may not be possible with just a check of a box.

Faydra…
faydra_deon
- WordPress Warrior
- 515 pts: Hero points 1,310 pts: Rep. points LEVEL 9
@ansley:

Another reason I linked to that article is because they show a little thingy you can do in the functions.php to remove the h/w, so maybe you can do the opposite to stop it from removing the h/w.

Faydra…
Ash
- Code Norris
- 3,839 pts: Hero points 38,666 pts: Rep. points LEVEL 30
Hi @ansley: I got your details. Thank you.

@faydra_deon raised a very good point. I tested your site with default theme and it works fine, screenshot attached. So, it must be with your theme. There are some filters to remove width and height attribute.

If you want me to find the culprit code for you, please send me the theme. Email me at contact@wpmudev.org with Subject line “Attn-Ash”.

I will check that.

Cheers

Ash
faydra_deon
- WordPress Warrior
- 515 pts: Hero points 1,310 pts: Rep. points LEVEL 9
@ansley:

Another alternative, if you can’t get around the responsive-ness of the theme, because that’s what the client wants, is to physically resize the image so the attributes aren’t needed, which would be better for page load time, anyway. I’m sure I’m not telling you something you don’t already know on that, though.

I use http://picmonkey.com when I want to resize an image quickly, instead of dealing with Photoshop and all its bells and whistles.

Faydra…
ansley
- Site Builder, Child of Zeus
- 84 pts: Hero points 177 pts: Rep. points LEVEL 4
Ok, I have narrowed it down – it’s something built into the theme for sure. It’s the Adapt theme by WPExplorer. I have a few other sites built with this theme that don’t use blogposts, so it’s never been an issue, but I can see that whatever is resizing the photos is there too. There’s no checkbox to disable responsiveness.

The problem is that it’s a blog, and she’ll want to add images herself. This setting (whatever it is) is overriding all the images, so she can’t add and format images manually via the easy WordPress settings. This is a problem.

The client is REALLY not tech savvy, so it has to be as easy as humanly possible for her to add and resize photos that are floated left or right. Arg.
Ash
- Code Norris
- 3,839 pts: Hero points 38,666 pts: Rep. points LEVEL 30
Is it possible to send the theme to me?
Ash
- Code Norris
- 3,839 pts: Hero points 38,666 pts: Rep. points LEVEL 30
I have just downloaded and but my version is 2.01 where your one 1.5 there are a lots of change in theme options. Also, w/h attribute is working in Adapt 2.1.
ansley
- Site Builder, Child of Zeus
- 84 pts: Hero points 177 pts: Rep. points LEVEL 4
oh, maybe I can update it.
Ash
- Code Norris
- 3,839 pts: Hero points 38,666 pts: Rep. points LEVEL 30
Sure, keep a backup of previous files :slight_smile:
ansley
- Site Builder, Child of Zeus
- 84 pts: Hero points 177 pts: Rep. points LEVEL 4
I found it! It was in the responsive js. So thanks everybody for your helpful advice!!
Ash
- Code Norris
- 3,839 pts: Hero points 38,666 pts: Rep. points LEVEL 30
That’s great that you found it :slight_smile:

How do you rate me?

Thank you for rating your experience!