Cutline Theme for WordPress

One Giant Leap for Mankind

Cutline Theme for WordPress header image 2

Image Handling with Cutline

September 13th, 2006 · 109 Comments · How To, Styling

Kick it up a notch with snazzy images in Cutline

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" />

coffee beansIn 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" />

colorful bell peppersOf 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?

colorful bell peppersI’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!

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:

Stacked image 1Stacked image 2

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!

Cutline: Just add color!

Tags:


109 Comments so far ↓

  • Graham

    Lesley , I just went down thru your site and didnt see any of the question marks you talk of . So it might just be a caching issue and things have cleared now !!!

    Nice site though … next time you feel like a change have you seen Chris Pearson’s Thesis theme . It is just brilliant and I have used it on several sites I run !!! 8)

  • Graham

    Oh and Lesley , Chris has sold this theme to the guys at tubetorial and doesnt support it any more :-(

    When I found this out I just moved over to http://www.pearsonified.com and used the neoclassical theme . Very similar to cutline but a lot cleaner !!!
    -G-

  • ChristianShame.com

    I switched to the 3 column version and noticed that when I put a caption on an image, it did not have ANY formatting. I double checked my style.css and found that the entire section at the end concerning captions was missing from the 3 column version. Here is the code that it needed:
    .aligncenter,
    div.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    .alignleft {
    float: left;
    }

    .alignright {
    float: right;
    }

    .wp-caption {
    border: 1px solid #ddd;
    text-align: center;
    background-color: #f3f3f3;
    padding-top: 4px;
    margin: 10px;
    /* optional rounded corners for browsers that support it */
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    }

    .wp-caption img {
    margin: 0;
    padding: 0;
    border: 0 none;
    }

    .wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    padding: 0 4px 5px;
    margin: 0;
    }

  • alexandre.nedeek.com » Blog Archive » aa

    [...] not display correctly. It gets even easier if you use a WordPress theme like one of my themes or Cutline, that comes with some of these “tags” already worked in to the theme. At the site for Cutline [...]

  • nono

    i just find this theme from searching by google.. and i love it. thanks.

  • Joseph

    I have to admit I love the theme (although I seem to be a late adopter), but I cannot get photos to wrap properly to save my life. I’ve followed the advice of several message boards scattered over the tubes to no avail. I’ve tried the code on this page, but run into a variety of problems depending on how I tweak it.

    I’m trying to get my personal site off the ground. I freely admit to being a code novice, but I think I’ve done pretty well for myself browsing threads and picking through lines of CSS. If anybody can take a look and lob some advice my way, I’d really appreciate it.

  • Graham

    Joseph, this theme in its time a great theme but it has been superceded by Chris’s far superior Thesis theme. Just take a look at diythemes.com and i’m sure you will be pleasantly supprised. If you need any help with it drop me a mail …
    -G-

  • christian liang

    thanks. I am new to blogging and i find the solution to a very simple problem putting image side by side neatly.

  • Jessica

    I’ve searched the support forums on this, but since I can’t find an answer, perhaps its a theme thing? (I’m a novice.) In a Cutline gallery, I can’t get .pdf docs to display thumbnails like the .jpgs. The issue is that I have some multi-page .pdfs that I’d like to display, so exporting them as .jpgs won’t work. If this isn’t the right place to post this question, can someone tell me where I can find an answer? I’m baffled!

Leave a Comment (Need help? Visit our Support page and Forums first.)