Simple Guide to Styling Images Within Your Posts for Those with Limited Technical Skills

Part four of: “Stylizing Your Content”.

For this, there is only one file you will be working with:

1. style.css

You can find this in your WordPress admin under Presentation > Theme Editor - listed on the right hand side.

Finding Imagery

The best way to go is by using Flickr to find Creative Commons images with the Attribution License. That way you’re able to copy, distribute and display copyrighted work - and derivative works based upon it - the only requirement being a credit link back to the artist’s Flickr page.

Skellie put together a great guide all about it: “A Complete Guide to Finding and Using Incredible Flickr Images“

Now that you have your wicked sweet images, it’s time to put them to work:

Creating a Template

You probably noticed that the majority of my posts begin with an image that is the same size and has a transparent black rectangle at the bottom and white text over it. I don’t recreate that every time. That would be anti-GTD.

I have a template created in Pixelmator. One layer is the background (where I put the Flickr image I’m using), one layer is the transparent black strip (on top of the Flickr image), and the last layer is the white text (on top of everything).

Of course, you need an image editor:

If you have an extra $700 in your back pocket: Adobe Photoshop

If you’re a Mac user and that $700 has mysteriously shriveled into $60: Pixelmator

If you can hardly pay rent this month and need a quality/free option: GIMP (PC and Mac)

There. Now all you have to do is throw the image into the background, adjust the text and save it as a new file. Presto awesome.

Aligning Post Images

This frustrates alot of people because depending on the template you’re using, the images you add to your posts can do all sorts of funny things. What I’ve found to be the easiest is to let the default action be to allow the image to do its thing as it would normally do without our helping hand. Then, all we need to do is add a “class” tag to the “img” tag to adjust as we see fit. Let me explain:

Align to the Right

Open up your style.css file and add the following:

img.alignright {
float: right;
clear: right;
margin: 0 0 5px 10px;
}

Now, whenever you want an image to align to the right of the page you simply add the class “alignright” to the image like so:

<img src="http://whereveryourimageis.com" class=”alignright” alt=”" />

Align to the Left

Open up your style.css file and add the following:

img.alignleft {
float: left;
clear: left;
margin: 0 10px 5px 0;
}

Now, whenever you want an image to align to the left of the page you simply add the class “alignleft” to the image like so:

<img src="http://whereveryourimageis.com" class=”alignleft” alt=”" />

Centered

Open up your style.css file and add the following:

img.centered {
display: block;
margin: 0 auto 0 auto;
float: none;
clear: both;
}

Now, whenever you want an image to align to the center of the page you simply add the class “centered” to the image like so:

<img src="http://whereveryourimageis.com" class=”centered” alt=”" />

Adding Captions or “Image Credit”

For images that aren’t aligned to either the right, left or center, adding a credit below it is as simple as adding a few bits of code directly after the image, like so:

<img src="http://whereveryourimageis.com" alt="" />
<small>Image credit: <a href="link to Flickr profile" title="">persons name</a></small>

For images that are aligned, it can be a bit trickier. You can learn more here: W3C

To Border or Not to Border

You’ll notice that some of my images have small gray borders and some don’t. If we have an image that has a bunch of white background in it, a border would make it look pretty tacky. So, by default our images should have no borders and if we want to add a border, all we have to do is this:

Open up your style.css file and add the following:

img.border {
background: #fff;
padding: 2px;
border: 1px solid #ccc;
}

Now, whenever you want to add a border to an image you simply add the class “border” to the image like so:

<img src="http://whereveryourimageis.com" class=”border” alt=”" />

If you are adding a border to an image that is aligned and already has a class, it’s no problem:

<img src="http://whereveryourimageis.com" class=”alignright border” alt=”" />

Now the image will both align right and have a border. (make sure there is a space between the two different classes)

Play around with the pixel size, padding size (how far the border is from the image), border color and background color in the css above to change the way your border looks.

Happy styling. I’ll see you soon for: Simple Guide to Styling Post Paragraphs

Image credit: krisdecurtis.