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 on 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.

Last week, I finally switched my blog, Frozen Toothpaste, to a theme of my own creation. It’s unoriginally called “FTp_one,” after BWO_one on which it’s based. And though FTp_one will probably never be freely-available, I’m going to do my best to make any interesting aspects of it — sadly there aren’t many — common knowledge.

One of the best features in FTp_one is the Archives. I talked about how to improve archives from the WordPress norm previously, and what I’m about to explain builds on that. You may also want to find out how to show your archives page in WordPress, if you’re not certain of that process.

How it’s better

The Frozen Toothpaste archive began with the same archives.php file that is included in my themes (that’s the one with Justin Blanton’s Smart Archives plugin built in). I added three aspects, however, all of which are significant improvements on that version. Because they’re still far from the norm in WordPress themes, I’ve decided I don’t want to natively include them in my themes, but I do want to make them easy to implement. That’s why you’ll find a link at the bottom of this article to the full archives.php I’m using at Frozen Toothpaste. This should easily drop into place in ANY WordPress theme and installation, though it may look a little wonky without the necessary styles.

Okay, lets discuss the three big improvements. The first is that there are words on the Archives page. This shouldn’t be half as novel as it is. It’s also notable that in those words are links to each section of what can be a very long archives page.

Secondly, there is a recommendations section. This is a very useful feature because, well, no one’s likely to read everything you’ve ever written to find the best stuff. The recommendations sections is great way for visitors to see some your best stuff and easily find out if they like what you’re doing.

The final feature is the tag cloud. Since WordPress 2.3 was released, making a tag cloud has been easy. The issue is that for established blogs with lots of back content, getting all of that tagged is problematic. Also, because many people are still running WP2.2 and earlier, I’ve decided to leave any tag data out of my canonical theme work.

How I did it

Now to the implementation. Both the “text” and recommendations section are enabled by the same basic features that all other archives.php seem to lack (for reasons I don’t understand). Essentially, most archive pages omit The Loop, which tells WordPess to get the words entered into the “Post” section for your archives page (as it does for every other page.) To correct this problem takes only a few simple lines:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="archivetext">
<?php the_content(); ?>
</div>
<?php endwhile; endif; ?>

These lines are essentially the basic loop that makes WordPress run. The first line tells WordPress to proceed if there’s text to display, the third line spits out the text, and the fifth tells the processor to proceed if there was nothing to display. (Lines two and four are merely to make it easy to style the text that WordPress has spit out.)

With this code included in your archives.php file, any text you enter into WordPress (as you normally would) will be displayed. This allows you to easily create and edit your recommendations section, because it’s as easy to get to as a normal page in WordPress. This also allows you to create links your category section, for example, by simply including a link to “#category.”

Finally, the tag cloud. As I said, this is scandalously easy to do in 2.3 and above. All you need are these two lines:

<h3><a name="tags"></a>By tags:</h3>
<?php wp_tag_cloud('smallest=10&largest=28&number=30'); ?>

Here the first line merely gives us a title for the section, including the syntax so you can link to the section with a simple “#tags” link. The second line leverages WordPress’s wp_tag_cloud command to create the cloud. It also includes instructions that the smallest output should be 10 pixels tall, the largest should be 28, and that we only want it to show the 30 most common tags. All of those values can be changed to anything you want. (There are also other variables for this command, which you can find in the WordPress Codex.)

Give it to me

There it is: all the instructions you need to improve any archives.php page. And now, the whole page, as promised, for you to drop into any theme you think could benefit from a better archive. Download it! (The file you’re downloading is archives.phps, you’ll want to rename it archives.php before you try to use it.) Happy blogging!

If there’s one big problem with WordPress (and blogs in general) it’s that posts come and go very quickly. This is great for people who are embarrassed by what they’re writing, but for the average person this can be a great disappointment.

It also doesn’t help the case that WordPress’s default Archives page is ugly and hard to use. Nor that most free themes that contain an Archives page aren’t much better.

Since you may be a little confused, dear reader, some visuals. The default WordPress archives page (that’s archives.php for those keeping score at home) is pictured at right (click for bigger).

Anyone who’s ever used it will know that they’re taken from the monthly link to pages that simply show all entries from that month in full form (this time we’re talking about archive.php sportsfans). The format and contents of those pages doesn’t concern us now, as it’s a long-standing — even if unwise — tradition that clicking “February 2007” on the blog of anyone mildly prolific is a dangerous idea.

If you look very hard at improving the Archives page in WordPress, you’ll quickly come to understand why they tend to be so sub-par. WordPress’s native function to create archives (wp_get_archives) is frighteningly limited in it’s abilities. I’ll spare you the details, but suffice it to say that nothing it outputs is much better than what we’ve seen.

Since WordPress itself fails, a different application is needed. Having already found Justin Blanton’s Smart Archives plugin — which I used to make my archives at Frozen Toothpaste more presentable — I decided that was a good place to start.

As the Frozen Toothpaste archive shows (see left), the Smart Archive plugin allows you to cleanly display all the your writings from a given month listed chronologically. This, I decided, was the Archives page I wanted my themes to have.

But requiring plugins for a theme to work is fraught with problems. It requires more work than the average WordPress user can or wants to commit to. So however I made my archive, it had to be inside the theme. The easiest way to do that: include the plugin on the page that creates the archives — archives.php.

Though I’m neither a PHP or server-load “pro,” I couldn’t find much of a downside to to putting the code from the plug-in on the page (if you are such a person and can tell me that there is a problem, please do). And, better still, doing so would make the creation of a nice monthly archive as easy as the creation of a default poor one.

So essentially, that’s what I did. I did do a great deal of shrinking and modifying of Mr. Blanton’s plugin, but it meat of it is still intact. Most of my cuts were becuase I required it to do far less than the plugin can. I wanted the code as lean as it could be while still providing the necessary function, which I think it does. To see my archives.php page it in action, just head over to the Ikiru Demo Blog and look at it on any of my themes. (You can also see the Archives page on WordPress’s default theme for comparison.)

And if you’re looking for something even more fancy than the Archives pages provided by Smart Archives (in or outside of) my themes, I’d suggest that the best place to look is Clean Archives which is both flashier and larger than the Smart Archives plug-in. Though these characteristic were detrimental to my need here, they may be exactly what you’re looking for.

This is more a note to myself than anything else, but I bet some other aspiring WordPress theme designer will make the same error sometime, so it’s becoming a short tutorial.

OK, so here are the steps you should follow:

1. Make one WordPress theme. Be completely satisfied that nothing is missing from it and nothing is superfluous. Then move on to another theme.

And you’re done. Pretty neat, huh?

If you’re wondering why I feel the need to make a tutorial for something so obvious, consider my process:

1. Make one WordPress theme (BWO). Get it to OK, but fail to add all that’s necessary and remove all that is not.
2. Make a theme that’s based on the original (BWO_doodle).
3. Revise original theme by adding some things it was missing.
4. Make more themes based on the original, in my case four: BWO_one, BWO_space, BWO_invert, Carter’s Line.
5. Revise original theme, improving search.php and archives.php; removing the unused and unnecessary files (comment-popup.php, attachment.php, links.php).
6. Realize that these changes are important enough to by made in all previous version of the theme.
7. Spend far too much time making those changes to the previous versions.
8. Write a tutorial (another waste of time) about your foolishness.

I should also be clear that this is a (slight) oversimplification of the process. It glosses over the large number of alterations (usually but not always to the stylesheet) that’s I’ve had to make as well.

I guess this is probably part of the learning process, but it’s making me feel completely silly.