[I know it sounds like I’ve jumbled my memes, but I wanted to share something I did on my blog over the weekend that I thought might work for both Wordless Wednesday and Works for Me Wednesday.]
I have established a photography work flow in Lightroom and I upload straight to Flickr for my blog. However, I love the look of borders around photos (look at the nice, subtle ones at Digital Photography School); I just don’t want to take the extra step to add them in Photoshop.
This weekend I decided to add a little code to my blog’s style sheet, enabling me to easily frame the borderless photos I use. At first I decided to use black; it looks nice with most photos, especially black and white. It proved to be a little too much when used with a series of photos in a row – primarily because of the other colors on my blog – so I coded a second border option, using the subtle grayish shade that wraps around the content area of my blog (just inside of the background patterned area).
Here are examples of each:
Here’s where you’ve got to pay attention, because it takes two steps to make this work: adding the code to your style sheet, and adding a bit of code in HTML view when you post your pictures. We’re creating image classes that can be applied to your photos. I’ll explain what the code means, too, because if you’re like me you want to understand it (and if you don’t, you can just skip that part!).
The style sheet is the CSS file on a WordPress blog; on Blogger, the style sheet is found at the top of your one-page template. Here’s what I added to mine:
The top one (.img.framed) makes the lighter colored border (you can make it any color you want, just use the hexadecimal color code), and the bottom one (img.bframed) adds the black one (I put the “b” in front on the black one, so I could remember it – plus it’s got to be different than the other one). What you’re doing is adding a colored background behind your photo. The padding determines how far it extends beyond the edges of the photo. I used 12 pixels; you can use more or less, whatever looks best on your blog.
Just adding this to your style sheet will do absolutely nothing. You have to add a tiny bit of code to your photos in HTML view when creating your post. If you’ve ever looked at the code for one of your photos, it looks something like this:
<img src=”http://farm4.static.flickr.com/3562/3463554132_7a5e9585c4.jpg” width=”334″ height=”500″ alt=”0904_LilyPark_078″ />
What we’ve created is called an image class. Within that code (be sure you’re in the bracketed area that starts with “img”), add class=”bframed” and you’ve added the black border, like this:
<img src=”http://farm4.static.flickr.com/3562/3463554132_7a5e9585c4.jpg” class=”bframed” width=”334″ height=”500″ alt=”0904_LilyPark_078″ />
You might want to write it down or paste it in an unpublished blog post or a text file so you don’t forget. Be sure you do it just right, with the equal sign and quotation marks. It shouldn’t take long to memorize.
Since the border is part of the style sheet and not connected to the image itself, you have the power to change the color of all the borders you’ve applied simply by changing it again in the style sheet!
Are you a photographer with white balance problems? Check out the White Balance Lens Cap!