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 28th, 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!
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!