WordPress Image Size “upgrade”

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:

This results in the photo appearing like this:

"LOVE-Autumn"

“LOVE-Autumn”

onyonet photo studios InspireMe is my latest collection of photos. Meant to inspire and motivate you and your family, they are sure to spice up any room in your house.


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
    align=”aligncenter” width=”670″

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:

"LOVE-Autumn"

“LOVE-Autumn”

onyonet photo studios InspireMe is my latest collection of photos. Meant to inspire and motivate you and your family, they are sure to spice up any room in your house.


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:

Wind in the Palm Tree

“Wind in the Palm Tree”

The wind was blowing so hard the trunks of the palm trees were swaying. You can feel how strong the wind was blowing looking at this photo.


I hope this helps ease the pain for at least some bloggers. Good luck and keep blogging!

~ Daniel Kmiecik

Advertisements

7 thoughts on “WordPress Image Size “upgrade”

  1. Hi Daniel. You can display HTML source code in a post by putting it between

     and 

    or between backticks “ (on the ~ key next to 1 key). The display will be a little funky, packed into one horizontally scrollable line (it will have its own scroll bar). I can’t find anything saying how to make it wrap the way it does in the HTML text editor.

    Let’s see if this example works here, showing the code for a link titled “this is a link” …

     <a title="Test URL" href="http://test.com" target="_blank">this is a link</a> 

    Liked by 1 person

    • oops. Try again. That should have said to put the HTML between the shortcodes “code” and “/code”, each in square brackets, without the quotes. The backticks are easier, but not as easy to distinguish when looking at it in the HTML editor.

      Liked by 2 people

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s