• Skip to main content
  • Skip to footer

The Upward Path

your message matters

  • Blog
  • About
    • About me
    • The Upward Path
  • Services
  • Books & Resources

graphics

How to get nice spacing round images in WordPress

July 6, 2016 By Tim

When you add images to a post or page using ‘Add Media’, WordPress jams them pretty tight up to the text.

image spacing graphicYou can tell it to align the image left, right or centre, but you can’t control the spacing. You can see how that ends up in the image opposite.

I don’t like that as a piece of visual design, and it’s not the best experience for the reader.

So I’ve adopted a standard operating procedure of setting the spacing manually for each image. Read on to find out how.

Quick notes

Note 1. If you’re comfortable with the idea of going into the files for your theme and altering stylesheets, you can set your own default options for WordPress to use. (Info here if that’s you.) But for most people that’s too hard to work out, and there’s a risk of messing things up. I’ve never been motivated to do it myself.

Note 2. Do try it the standard way without fiddling first, especially if you’re using a purchased theme. It may be that the folks who designed your theme have improved the standard spacing.

Note 3. If you want a text caption displayed with your image, eg for a photo, you might find this technique makes it go a bit weird and it’s easier to rely on default formatting.

Putting on the style

First, add your image via ‘Add Media’ and get it in basically the right place. Then we’ll tweak it so it ends up like the version here, which I hope you can see has more breathing space.

image spacing graphicIn the window where you write your post or page, there are two tabs at the top right: ‘Visual’ and ‘Text’. You’ve probably been working in Visual, which shows an approximation of what the page will look like. For this we need to go into Text.

Text mode shows you the guts of your page. Most of it is the text you’ve typed, but you’ll also see formatting instructions in <angle brackets>. Those are a blend of HTML, which tells the reader’s browser software what things go where, and CSS, which tells it the styles to use when it displays those things – size, colour, alignment and so on.   [Read more…] about How to get nice spacing round images in WordPress

Filed Under: You and your message Tagged With: graphics, image, tools, websites, wordpress

Formatting graphics for web pages

June 6, 2012 By Tim

One common mistake I see on web pages is people not knowing how to format graphics properly; or not taking the trouble to do it.

To be fair, the software spoils us a bit. We can throw in any graphic file, and set it to resize however we want. Just like magic! But of course it’s not magic; it’s a technical process that works in certain ways, even if that’s hidden behind the scenes. If you want good results, a little bit of knowledge about file types and making a good web graphic can make a big difference.

[Read more…] about Formatting graphics for web pages

Filed Under: You and your message Tagged With: graphics, tips, websites

Footer

Recent Posts

  • Politics, peace, truth, and who we want to be
  • Does your website need a spring clean?
  • The power of colour for building your authentic brand

Find me on social media

Keep in touch

Sign up for my email newsletter

Contact me

 

Copyright © 2021 · Privacy policy · Website by Tim Gray

This site uses cookies: Find out more.