Pictures are one of the very few universal elements you can use to really seize the attention of your audience, and the more effectively you are able to display them, the better off you’ll be. With that in mind, Cutline comes with a set of pre-defined CSS classes that are dedicated solely towards image handling. When you want to include an image, simply add one of these classes and voila! Instant image presentation gratification!

Cutline comes with four main classes that you can use to make your images look even better:

• left – aligns the image to the left, adds a frame, and wraps text around the image
• right – aligns the image to the right, adds a frame, and wraps text around the image
• center – aligns the image in the center, adds a frame, does not wrap text
• off – removes the frame (more on this in a moment)

Using these classes is a snap, as you only need to add them into your post like so:

<img class="left" src="..." width="x" height="y" alt="The alt text for this image" />

In this snippet of code, the class addition is indicated in red. In order to make an image appear properly, you’ll need to specify the URL of the image in the src= declaration. Also, it’s always a good idea to include the width and height declarations as well as the alt text. By including the width and the height, you will enable faster page loads, and by including alt text, your code will validate per W3C specifications.

Finally, let’s say you want to include an image, and you want to align it to the right without a frame. Here’s what your declaration would look like:

<img class="right off" src="..." width="x" height="y" alt="Your alt text" />

Of course, no example would be complete without a live preview of the final project (hence the reason for this site’s existence!), so that’s why you see the right-aligned, bare naked (no frame) bell peppers at right.

Let’s take inventory for a moment…By using the included classes, you can now generate 6 different types of images – left, right, and centered; and you can go with or without a border in each location. Sweeeeeet.

What happens if I don’t style an image?

I’m glad you asked! Cutline has been constructed so that images that do not have classes applied to them will still be styled. In fact, they’ll receive the same styling as any image that receives the right class, meaning that the image will be right-aligned with a frame. Oh, and text will wrap around the image, just like it does here. See? You don’t even have to go out of your way to be fancy with Cutline, and that’s how we like it.

Update: As of September 28^th, 2006, Cutline has been revised so that unstyled images no longer receive default styling. This is a move that I hated to make on many fronts, but I also realize that it’s just really inconvenient to have every image styled by default.

Take, for instance, the Technorati tags links that many people like to include at the bottom of their posts. Before, Cutline would take the little Technorati logo image, put a frame around it, and then force it over to the right side of the content column. This was strange, annoying, and broken-looking. I can see you making your best Edvard Munch’s “The Scream” face now…

So, as much as I’ll worry about the fact that there will be unstyled images everywhere (the bane of my existence), I really had no choice but to remove this “functionality” from the theme.

I hope you understand the reasons for the change, but more than that, I hope that you style your images!

New Image Handling Class in Version 1.02

Let’s say you have two images that you want to stack horizontally. If all you had at your disposal were the original image classes, you’d be pretty much out of luck here. Fortunately, Cutline comes equipped with a new image class called “stack” that will allow you to publish images horizontally, like so:

In order to get the result shown above, you would insert code into your post that looks like this:

<img class="left off stack" src="image_url" alt="image alt text" /><img class="left off stack" src="image_2_url" alt="image alt text" />

So if that’s your cup of tea, start stackin!

Lists

Lists are easy for readers to digest, and because of that, most people love ‘em. With that in mind, you oughta start using more lists in your posts! Cutline comes equipped with three killer list styles, and your job is simply to choose the one that is best-suited to your particular needs. The first type of list is an unordered list, and it looks like this:

• List item 1
• List item 2
• List item 3
  • Nested list item 1
  • Nested list item 2
• List item 4

The second type of list is an ordered list, and it looks like this:

1. List item 1
2. List item 2
3. List item 3
4. List item 4

The third and final type of list is called a definition list. Although they are less common, they can be useful for presenting meanings, relationships, or simply for clarification. Check it out:

This is a definition list item title

This is the description text that is related to the title above

WordPress

A FREE and flexible CMS that you can use to run a killer Web site!

Sub-Headlines

Sub-headlines have already been used twice in this post…did you spot them? The first one says “Lists,” and the second one says “Sub-Headlines.” Thanks to the flexibility of Cutline, you can create similar headlines without having to do any styling on-the-fly. All you have to do is wrap your headline text in <h3> tags, and BOOM, you’ll get results like you see here.

If you’re using the Rich Visual Text Editor (which I absolutely do not recommend), you need to switch to the HTML viewer and enter your text between <h3> tags. When you’re done, click on the Update button, and you can continue writing your entry.

If you’re using the regular old text-based editor (cheers if you are!), then you could write a line that looks something like this:

<h3>My Headline Rocks!</h3>

and you’ll end up with this after you publish your post:

My Headline Rocks!

Blockquotes

This is one area where Cutline has no peers…

Every theme worth its weight in bandwidth comes with some sort of pre-defined blockquote styling, but how many themes do you know of that come with three different blockquote styles? This is one area where Cutline has no peers, and you can use these blockquote styles to your advantage as you liven up your posts for your readers. The quote at right is what is referred to as a “pullquote,” and you can create two types of these in your posts – one will be aligned to the right, and the other to the left. Use the following structure to make it happen:

<blockquote class="x">

where x is replaced by either “left” or “right,” depending on which side of the text you want your pullquote to display.

And naturally, no theme would be complete without the standard old blockquote, which comes out looking like this:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque pharetra velit vel purus. Nunc tempor, urna sit amet euismod elementum, erat tellus auctor erat, non condimentum dui wisi non orci. Nam fringilla leo sed dui. Vestibulum ac elit sit amet diam vehicula scelerisque.

To use these, simply wrap your quoted text in <blockquote> tags.

Front Page Post Display

You may or may not have noticed that only the four most recent posts display on the Cutline home page (in the main content portion of the page, not the sidebar). The WordPress default displays the ten most recent posts, so how did I constrain it to only show four posts?

1. In the WordPress Administration panel, click on the Options link in the navigation menu.
2. Next, click on the Reading link in the sub-navigation menu.
3. The default setting is likely “Show at most 10 posts.” You can make that number whatever you like. Again, I use 4 for this test installation.

Personally, I think it’s a good idea to limit the number of posts that show up on a page if your site is light on the content. If, however, you crank out articles in machine-like fashion, then you should either leave the number of posts at 10 or else raise it up to accommodate your rapid-fire style.

Update: I am now showing 10 posts on the front page. This has made the site easier to navigate, and it also makes the archives far more usable.

I’m almost to the point now where I think you ought to display as much information on the front page as possible without sacrificing loading times. So, if you post a lot of images or videos, you may want to limit the total number of posts that display on the front page in order to achieve faster loading times for the widest array of users. However, if you post a lot of text and only a few images, then 10 or more posts is a sound choice because it allows users to access more information at once.

Images

Whoooaaa, nelly! Images are so important that they got their own post. Read up on Image Handling with Cutline.