OMSH

I enjoy a good blog entry, but find I more readily frequent bloggers that blend in a bit of eye candy here and there.

Yea, I want to read what they have to say, but I also want a visual experience. The addition of images (photos or graphics) within a post not only draws my eye, but keeps me from just skimming; they help me to engage.

It isn’t that way for everyone, I realize; some of us are more visual than others. However, if you ARE using images within the posts of your blog, this tutorial will show you how to use CSS to center and frame them (apply stylized borders) using your WordPress theme’s stylesheet.

As always, if you are here for the first time, I want to invite you to begin at the beginning. Though all of the tutorials can be read independently, I will draw from information already discussed in previous WordPress Wednesday tutorials. Anytime you begin working on your blog just remember, it’s wise to organize your thoughts and be methodical, instead of just dashing through the dashboard of your WordPress blog and not really getting to the “meat” of it.

Enough of the lecture and on to the good stuff.

PLEASE NOTE: You cannot just paste in these codes to your CSS and expect them to work with your theme – it does take looking at YOUR OWN THEME’s CSS and integrating the pattern I’m setting below to fit your particular blog’s markup.

How to Add Borders to Your Images with CSS

Here in OMSHville I like to “frame” my photos. I’m a noobie photographer just out of the chute, but when I put up a photo for you readers it is because I want you to SEE it. *der* And much like I clean my house for guests, taking care to ready it for company, I do that for the photos on my blog as well. You are my guests. I want your experience here to be appealing. Plus, I figure if I’ve taken the time to actually shoot the photo, drop it into Photoshop and clean it up, and then upload it to my flickr, I’m certainly going to frame it nicely when I present it to you on my blog post.

I do this using CSS. Now, I talked briefly about a few things you can do with your WordPress stylesheet (style.css) last Wednesday. This will be brief as well, but brief is good when the end is so effective.

At this point you should have decided whether you are going to edit your stylesheet and other web files via the WordPress Dashboard or edit using a text editor and then upload to your server via an FTP. Whichever way you decide is fine, of course, just be consistent so you don’t end up overwriting previous changes you’ve already implemented.

To begin, open your index.php. If you are using the WordPress Theme Editor follow this path: Dashboard > Presentation > Theme Editor, you will find the index.php file’s link in the right vertical navigation within the Theme Editor window. For some reason WordPress renames their files in the Theme Editor, so instead of calling it index.php, they call it Main Index Template. However, once you click on the text link for the file name the new window should show that you are “Editing Index.php” like below.

Just so you know – BE CAREFUL with this file. This is, as WordPress calls it, your Main Index Template. In other words, this is your homepage. In some cases, and in some themes, it is also the file for your individual posts and any pages you create. Basically, if you muss it up much, you’ll drive yourself crazier than a bald-headed triangle.

Nervous any? Well, feel safe because at this point we’re just LOOKING at it. We only need to find out one thing … the class asigned to your theme’s post. This class is where you will build additional CSS in order to create the borders around your photos.

Look at the code in the image snapshot of WordPress Wednesday’s index.php file below. Do you see the highlighted areas? The top highlighted area shows the div id & class that stylizes everything within my posts. Looking further down, you can also see a div class assigned to the entry, but right now we are going to focus on the div class that assigns styles to the post.

Tuck this away in your brain and let’s go look for that particular class within our stylesheet, or rather, style.css.

You remember how to get back to your stylesheet, right? If you are using a text editor it is in the same file as your index.php. If you are in WordPress’ Theme Editor, glance to your right and click on the text-link for “Stylesheet” in the vertical navigation panel.

If viewing through WordPress you’ll now see this:

Now, do you remember what we’re looking for in the style.css? We’re looking for a bit of code like this:

<div class="post">

BUT it will not look exactly like that in your stylesheet. Rather, it will look something like this:

.post {
	margin-bottom: 50px;
}

See the .post class?

This bit of CSS tells the browsers pulling up WordPress Wednesdays that for each post entry I’ve assigned a bottom margin of “50px”.

That’s fine and dandy, but there’s nothing there about what do do about borders for the images in my posts. Isn’t that what I’m here to show you? Exactly. This is where I create additional CSS within the stylesheet.

Now here at OMSH, I’ve already done the work, and I like how my photos are framed, so I’m just going to replicate what I’ve done over here and save us all a bit of time.

I’ll paste in the CSS below, right underneath the.post .entry h2 above.

.post img { }

		.post img.center {
			display: block;
			padding: 3px;
			margin: 0 auto 1.5em auto;
			border: 3px double #bbb;
			float: none;
			clear: both;
		}

		.post img.center-noborder {
			display: block;
			padding: 3px;
			margin: 0 auto 1.5em auto;
			border: 0px;
			float: none;
			clear: both;
		}

This CSS not only assigns a border, but it also centers my photos. And if I don’t want a border, because perhaps I’m posting a graphic with a white background and it looks better without, I can opt to center the image without a border.

So, here is a photo of my kids revelling in Schlotzsky’s fabulous Mac bar, centered with a border:

And here is a graphic that I’d much prefer NOT have a border; it is centered also:

Nice, eh?

“WAIT!” you say, because you’re so very sharp and recognize there is one little bit of information missing.

“How do I assign whether or not the photo or graphic has an image?”

And I say, “Ah Danielson, you’ve waxed on, … time to wax off.”

Or whatever…

You will assign the code to center your image, and/or whether or not you want a border, within your image’s html code when writing your post.

For example, I use flickr to store the bulk of my photos and graphics, so I’ll grab my image code and paste it in like below:

<img src="http://farm1.static.flickr.com/174/396073269_ed423e8783.jpg" width="500" height="393" alt="Why Schlotzsky's is our favorite..." />

And THEN, I’ll add the class to the code right after the img:

<img class="center" src="http://farm1.static.flickr.com/174/396073269_ed423e8783.jpg" width="500" height="393" alt="Why Schlotzsky's is our favorite..." />

So not it tells all browsers that view my site that I want it centered with the border I created.

Now, if I don’t want a border around an image, but still want it centered, I assign the other class I added into my stylesheet, like below:

<img class="center-noborder" src="http://farm2.static.flickr.com/1037/526464697_2e39f9881d.jpg" width="304" height="277" alt="Night Night OMSH" />

I’m sure you’re rolling your eyes by now. Have you fainted or swooned with the revelation of how very easy it has been all along to center and border your photos?

And you don’t need flickr to do this either. If you are using the WordPress upload feature, just upload your image(s) and add in the style class the same exact way for the same exact effect. NO MATTER where you are pulling your image from, you can assign this class to any post on your blog. Simple, right?

Any questions? If so, “That’s what comments are for … in good times … and bad times … I’ll be on your side forevermore…”

OH MY STINKIN’ HECK.
SOMEONE STOP ME NOW.

Next week we’ll talk about how to write CSS so you’ll have borders (or not) around your photos AND your text will wrap. Woooweeee! Text wrapped around smaller thumbnails and photos is FUN!