Long story short, when I learned how to create web pages I learned in Notepad. There were no GUIs (Graphic User Interface) at the time. When GUIs came out I thought it was the greatest thing since sliced bread. However, GUIs mess up, and as we all see on WordPress GUIs can be changed without notice. Knowing the actual text (code) behind the GUI allows you to figure out how to fix what’s gone wrong. Very handy when nobody else is helping.
I have figured out how to fix the problem caused by the WordPress “upgrade” in a post and on the front page of my blog. I say my blog because what follows is for a very specific set of circumstances. It might help you, it might not. If you know at least a little about html code, you may be able to use this information.
Here’s the givens for my blog:
I use the free Visual theme
My photos are sized to be 1280 pixels on the long side
I create my posts in the text editor, not the Visual editor
I add my photos to my post using the Add Media button and select the previously uploaded photo from my library
The default width for photos in the Visual theme appears to be 670 pixels. Don’t quote me on this is the “default width” for the theme. I’m not sure if that’s where the 670 is coming from for sure, but I know this formula works so I’m sticking to it.
Now to the fix:
I’ve had to strip some of the stuff that makes the photo appear in the post instead of the code, but I think you’ll get the point. If not, please feel free to comment or email your questions. I’ll do what I can to help you out.
The code as it is after clicking the Add Media button in the “upgrade” version:
caption id=”attachment_860″ align=”alignnone” width=”150″
img src=”https://onyonetblog.files.wordpress.com/2014/03/love-autumnlove-autumn-onyonet-photo-studios_blog.jpg?w=150 alt=”"LOVE-Autumn"” width=”150″ height=”107″ class=”size-thumbnail wp-image-860″
This results in the photo appearing like this:
Obviously not what I’m looking for.
We need to change some key parts of that code up there. First we need to change the align attribute:
Change the align=”alignnone” width=”150″ to
The aligncenter will center your photo. The width=”670″ will make the photo the correct size for the post. Apparently 670 is the width set by the Visual theme. This is why I say you may need to adjust things a bit.
Next you need to change the end of the <img src="https://onyonetblog.files.wordpress.com/2014/03/love-autumnlove-autumn-onyonet-photo-studios_blog.jpg?w=150 line. Currently this line ends with ?w=150. All you need to do here is remove the ?w=150.
Finally, you need to change
width=”150″ height=”107″ class=”size-thumbnail wp-image-860 to
width=”670″ height=”478″ class=”size-full wp-image-860
The width is always 670. The height will change depending on actual size of the photo. If you click on the photo in your library you will see the actual size in pixels in the sidebar on the right side of the screen.
Time for a little math. Sorry to those who don’t feel they’re strong in math. It’s not too bad, and your calculator will do all the work for you.
This particular photo is 1280 (because I told it to be when I exported it) by 914 pixels. Since we know the width will always be 670 pixels in the post we can use that as an anchor of sorts. To get the height=”478″ we need to calculate the percentage change in the width. To do this, using your calculator, type in 670 and divide that by 1280. The answer will be 0.523.
To get the height, clear the calculator and then type 914 (the actual height of the photo) and multiply by 0.523. This will result in 478.421. Just drop off the numbers after the decimal, it will be close enough for our purpose.
After you make the changes the photo will appear like this:
Much better eh?
For every landscape oriented photo you use at 1280 pixels wide, you will multiply the actual height of the photo by 0.523 and use the result in the height= attribute.
For portrait oriented photos I have to calculate both the width and the height attributes because I output everything at 1280 on the long side. Since the long side goes down the page for portrait photos, the width is different most of the time.
So, let’s say you have a portrait oriented photo that is 853 wide x 1280 high. We know the width, 853 in this case, will be 670 pixels in the post. To get the the width and height attribute numbers:
Divide 670 by 853. This equals 0.785
Multiply 1280 by 0.785. This equals 1004.8. Round it up to 1005.
Your width attribute will be width=”670″ (given by the theme settings). Your height attribute will be height=”1005″.
Your portrait oriented photo will look like this:
I hope this helps ease the pain for at least some bloggers. Good luck and keep blogging!
~ Daniel Kmiecik