Ikiru Design

jquiz

I — and many other people who sometimes opine on blog design issues — think its rather useful to have images on posts. They’re a quick introduction to your topic, a way to jazz up your text, and a great way stand out at least a little bit.

And if you’re like me, you’re not exactly a prolific photographer with thousands of images that you can use for all kinds of topic you might write about. Also, you probably don’t want to go about buying photos to use. In such a case you have two choices, one legal and one not. (I’m actually ignoring the existence of free stock photos, because I’ve never found them terribly useful.)

The illegal — or at least problematic — way is to take them from other website. One thing I used to do, was hotlink directly to Yahoo!’s images. And I’ve also used Google Image Search, without regard for who owned the image or what have you. If it looks roughly like I wanted I’d upload it to my own server and use it.

And so now, assuming we’re not pirates, we have a problem in need of a solution. And there is a very easy solution: Creative Commons images. As you very well may know, Creative Commons is a license in which the creator give away some — but crucially not all — rights to what they’ve produced.

The easiest and best ways to find Creative Commons licensed images is with a Flickr Advanced Search. Down on the bottom of that page, you’ll find an option for Creative Commons licensed images. For myself, I always choose “Find content to use commercially” simply because I want the least stringent and problematic license. What you find there doesn’t exactly leave you home free. Almost all — perhaps all, I don’t know — CC images require a citation. Some also require other things, but this is the most important requirement from a design perspective.

Designing Images with Citations

DWQ

We’ve established the need for citations on images you might use on your blog. And there are indeed a number of ways to cite. Many conscientious people lacking some know-how simply add a “The image on this post is from Mr. Flickr” at the end their posts. But for myself, I wanted something at least a bit more elegant than that.

For inspiration, I’d always liked the way that The Economist’s website displays the citations on its images (see random example), and decided to mirror it. There were mild changes I made beyond that — for my own aesthetic preferences, but that was the layout — and CSS code — to which I referred while devising this solution — which you may notice in the out-of-place-photos of Optimus Prime and Canadian geese, each lazily stolen from Frozen Toothpaste entries (here and here).

I have two basic ways, both of which work essentially like this in WordPress’s “code” editor for a given post:
<p class="rightcite">
<span><a href="http://www.dummyurl.com/">Dummy Photographer</a></span>
<img src="http://www.myadress.com/images/dummy.jpg" />
</p>

As you may be able to tell from this rather simple (X)HTML, this simple creates a paragraph while will carry the styling from the CSS class “rightcite” — more on what that means later. The next line is the photographers name, with a link to the URL that they want used for citation. For our purposes, it doesn’t really matter what’s on that line so long as it’s wrapped with the “span” tag, again used for styling. The third line is simply the image, preferably hosted on your servers, though there’s no reason it must be.

A note: The use of the paragraph (“p”) division rather than the more traditional “div” simply because WordPress seems to choke on anything but the paragraph division. If you’re using a different content management system, feel free to see if it can handle the use of a “div” rather than a “p.”

Now, we must style this stuff so that it looks good one our site:
p.rightcite {
display: block;
float: right;
margin: .1em 0 .1em .5em;
background: #f1f1f1;
padding: .2em;
border: 1px solid black;
}
p.rightcite span {
display: block;
text-align: right;
font-size: .8em;
color: #555;
margin: -.5em 0 -.4em 0;
}

As you may be able to tell, the first set of styles is for every part of the “rightcite” paragraph. The crucial things to note are the “display” and “float” properties. The rest just makes it look the way I want, but those two make the paragraph float to the right.

The second set of styles is for our citation, again the most important part here is the “display” attribute, which prevents the citation from floating all over the map. The rest is again mostly for aesthetic concerns.

Now, you may be interested to see a similar thing for a centered image, which is just a bit more complicated.

p.centercite {
display: block;
text-align: center;
margin: .8em auto;
width: 468px;
}

The crucial thing here is the width declaration, which is needed to keep our “span” text from floating away. Obviously, by declaring a width for this paragraph you’ll have to keep your images to that width for proper functioning. You can change that width in an implementation on your own blog, but I wouldn’t recommend changing it once you’ve decided what width you’ll use.

There are some other notable ways to do a similar thing as all this with different methods. The most interesting and prominent in my mind is Derek Punsalan’s, which uses custom fields. I’ll leave the explanation of that technique to him.