Insert images at the perfect size every time

Put on your graphic designer’s hat – resizing, re-previewing, and rechecking until the image is flush with your blog layout and everything looks pixel perfect. But it’s time-consuming, right?

Here’s a hack to help.

It requires changing the default media size for uploaded images.

Whenever you choose to insert an image as “Thumbnail,” “Medium,” or “Large,” WordPress pulls those pre-set image sizes from your blog settings. If you want your “Large” images to take up the full-width of your post layout, you can make it so.

From the left-hand WordPress menu, go to Settings > Media.

Adjust the “Max Width” and “Max Height” settings to fit your blog sizes.

Here are a couple neat ways found to play with these settings:

  • Set the “Medium” size to take up 1/3 of your post layout, then use these “Medium” images as feature images for your posts by aligning them to the right.
  • Set the “Large” size to fill the full width of your post layout.

Find what exactly is the full width of your post layout mine by using the “Inspect Element” option Chrome browser.

Right-click anywhere inside the text of your post, and choose “Inspect Element”.

A window appears, filled with all the web code for your page. If you mouseover the code, you will see the respective parts of your blog design highlighted, along with a display of height and width of the element.

You could grab the post size from here. I like to go one step further. On the right-hand side of this new code window, click the tab for “Computed.” You should see a graphic of boxes with numbers in the middle. Those numbers are the size of your post, with the first number representing the width.

inspect-element




5.2
Implementation: 4 hours
Effectiveness: 3/5
Difficulty: 6/10
TAGS
#Tools Wordpress Editing