[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:
img.framed {
padding: 12px;
background: #d4cfbb;
}
img.bframed {
padding: 12px;
background:#000000;
}
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!
Visit 5 Minutes for Mom or Wordless Wednesday for more Wordless Wednesday participants. Visit We are THAT Family for more Works for Me Wednesday participants.
Are you a photographer with white balance problems? Check out the White Balance Lens Cap!
That’s great information thanks for sharing that.
Louises last blog post..Walgreens Earth Day Special
Thanks for posting that! I may play with that later because there are some photos I want to have a border around, but others (say, white background on my white background with a mirror image) I’d rather not have bordered.
I’ll play with it and see if/how it works on Blogger.
Thanks!
Kris @ @Weird, Unsocialized Homeschoolerss last blog post..Giveaway: A Charlotte Mason Education
Wonderful tip! Thanks so much!
I will have to play around with that on my site! Yay!
Hugs.. Amy
Amys last blog post..Tips and Flowers…
Oooh, thanks, Dawn. I love the idea of having this built into the blog template. I’ll be using this. Love your shots, as always! 😀
Diannes last blog post..Wordless Wednesday – Road Trip
Neat, thanks for the tip! I’ll definitely have to try it!
MommyWizdom
MommyWizdoms last blog post..C’mon, It’s Easy!
Great tip. Have to bookmark this! Cute shots too, BTW.
Alpaca Farmgirls last blog post..New Cria from Honeybelle
Thanks for the tip. Happy WW!
Mariposas last blog post..Walk with Confidence
Hey Thanks! What great information and easy to understand! I’m going to try it now,
kristen
Kristens last blog post..{Tissue Boxes and Toilet Paper Rolls}
Wow, how clever you are to figure this out!
Animators Wifes last blog post..Build a Tumbling Composter with Catie
The borders make the photos stand out. Great job!
Newlyweds Guide Francescas last blog post..Alleged Craigslist Killer: The Marrying Kind?
Wow! This will be fun to play around with…I hope. 😉
Amy @ Cheeky Cocoa Beanss last blog post..Cute as a button…or cute enough to put on a button…or something like that
I finally got a chance to play around with this and I *LOVE* it! I can see a looooong blog project ahead of me, though, as I go back and fix all my old photos. Fun! Thanks!
How cool is this – thanks heaps!! my blog is soon going to be übercool thanks to you!!
.-= Jeanne´s last blog ..Our Australian Curriculum =-.
Just in case I haven’t said it in awhile, thank you so much for posting this! I just love being able to control the look of the photos on my blog — from no frame, to thin frames, to thick frames. I love being able to choose.
Great tutorial!
.-= Kris @ Weird, Unsocialized Homeschooelrs´s last blog ..Weekly Wrap-Up: The B-O-R-E-D Edition =-.