/images/header_2.jpg "Cutline Theme for WordPress")
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!
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!
Now there’s a ranger solution for ya.
Awesome work.
Now the only thing I don’t understand is why my blog will allow them during the posting process but not during an import…
Chris,
I’m not exactly sure what mechanism gets called when you import into WP. I’d guess that the problem you ran into is something similar, though. I conducted a little experiment and found out that there is seemingly no validation of the tag attributes in the excerpt section. I was able to enter and it saved the change. I guess that at least explains why your attributes stayed in your excerpts after your import and also why my problem didn’t manifest itself there.
Oops… forgot about html in my comment. I’d said that I could enter the attribute aaa=”xyz” in the img tag in the excerpt section and it would get saved. No validation (I guess).
Hi Chris,
I have a really good logo made up that I want to use on my website. How do I go about putting in the logo in place of the text logo for Cutline?
I got it figured out! Thanks for such a rocking site to work with!
Nice work, Scott. You may want to consider changing a bit of CSS that controls your navigation menu.
Right now, your links spill onto a second line, and that, of course, is not desirable. You could combat this by changing the horizontal spacing between the links.
In your
style.cssfile, locate the section that is delineated by this line:/*---:[ header styles ]:---*/Underneath that header, you’ll find a CSS declaration that begins with:
ul#nav li { padding: 0.85em 40px 0.7em 0; ...In that line of code, the
40pxcontrols the horizontal spacing between items in your navigation menu. Try tightening up that spacing to something like35px, and then save the stylesheet.Once you’re done, upload
style.cssto theCutlinedirectory in yourthemesfolder, and see if that doesn’t get your navigation menu items on one line.Hi Chris,
Thanks for the great tip. How does it look now? I changed the size to 35px as you suggested.
Muy bien! I think it’s great.
Hear Hear – a big round of applause for Chris and his fine work and support!
Party @ Cutline.
Chris,
I’m having some trouble integrating Gallery2 with Cutline. I’ve sorted out most of the issues, but there is still one nagging problem that I’m hoping you can help with. I posted the issue on the WPG2 forum with no luck. The Gallery2 navigation links are out of alignment when viewing Gallery 2 embedded images. http://www.janusit.com/wp/wp-gallery2.php?g2_itemId=1373
Finally, can you shed some light as to why the minor mods (width, background & border) that I made to your theme look ok in IE, but not so good in Firefox. Thanks for any help you may be able to offer.
Mark
Chris, Ed, the import issue you encountered is described in http://trac.wordpress.org/ticket/3290
hey I was wondering – can I put the other styling back? Cause I’d love to have it – maybe you can make it a widget or a plug in or something?
Hey – I was wondering how I could put the default styling that you removed from Cutline back in…
I really would like the option..
Do you have any suggestions for handling captions for pictures? I’d like to add little tag lines to some of my pictures, something that’s visibly different from the rest of the text of the post. I’ve never really figured out a great way to do this. Sometimes I’ve created tables with two rows, one for the image and one for the caption, but that gets to be annoying to code every time I want to do that. Any thoughts?
Nevermind, found some good stuff in the Wordpress codex. A little bit of CSS styling will work.
Amish,
You’d need to create a special
divand then place theimgreference inside thatdiv. After the image, you’d want to include apto contain the caption.It takes a bit of work, but I recommend checking out the markup behind some of ESPN’s captioned photos. Check out the code behind this page to see what I mean.
After struggling with the WYSIWYG default settings stripping the class attributes out of anything I put into the HTML editor, I was frustrated to not be able to get rid of said WYSIWYG editor in WP. Found the solution here: http://wordpress.org/support/topic/55175 There is a hidden (and bloody annoying) second place to look to get rid of the default “visual rich editor.” Thought posting this might save someone else the trouble I went through to find it.
My images at wordpress.com aren’t working well with Firefox 2.0 (but look o.k. in IE). Also, my stats smiley is appearing at the upper right on pages, rather than the bottom. Any ideas about how I could fix these problems?
Hi. I use your site and your expertise all the time. I have a ? and this is probably not the right spot… my site displays 2 titles in the browser bar ie: District73District73-One Day at a Time. Have I checked something I should not have or?..
Thanks for the reply in advance if you do.
Chris-
was wondering if i could get some styling help from you. i’m finally trying to implement divs for image captions (see earlier comments), and while i’ve got most of it figured out, i’m running into one minor setback.
the width of the divs i made seem to take on the width of their parent element (i.e. the width of the main post column). this causes a problem with borders…the side borders are at the far sides of the entry, instead of immediately around the image/caption contents (see the most recent post on my site for an example). i was hoping for something a little more dynamic, where the borders would wrap just around the image, the same way they do for the cutline image classes.
any suggestions??
Well if you look now, I’ve found a temporary solution. I’ve decided to include on-the-fly style declarations in the div tags in my posts.
<div class="caption" style="width: 400px">Its not the ideal solution for me, since it requires knowing exact image sizes and customizing the tag each time I want to use it.
Still open to suggestions!
How To Position Images in Blog Posts | Antbag.com // Feb 13, 2007 at 4:44 pm
[...] image will not display correctly. It gets even easier if you, like me, use a Wordpress theme like Cutline, because Cutline comes with some of these “tags” already worked in to the theme. At the [...]
Broken theme cutline 1.1 Stylesheet is missing??
I have just tried to change my theme to Cutline 1.1 and it comes up with a Broken Theme “stylesheet is missing”.
I realise CP has designed it to work a stylesheet – custom.css but WP doesnt seem to be taking it. I also have read the intro set out in the custom.css file but I am struggling to work out what to do!
Ive got the blog on theworldofspain.com/wordpress you obviously wont be able to see the warning but it explain something?
links for 2007-03-21 at Julians.name // Mar 20, 2007 at 11:29 pm
[...] Image Handling with Cutline | Cutline Theme for WordPress good image handling css styles for pics in cutline theme (tags: cutline-theme cutline css image-handling) Share and Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages. [...]
Hello Chris
Love the theme, pretty cool!
One question for you… I’m trying to insert my own images in the headers, the banners I want to use are not 770 width, how can I justify them to the center?
I tried the image class “center”, putting them in nested tables, etc. and still they align to the left always, is there to modify that?
Thank You!
Cutline is giving a best view to the pictures evr seen. Thank you for this great idea. Makes sense,… better than most other ideas.
Abazza
Coffee Break - New Wordpress Theme // May 24, 2007 at 1:57 pm
[...] the Cutline theme – more for it’s robust mark-up than for the default design. As Cutline has classes assigned to images, I’ve included that same idea in Coffee Break to make positioning an image [...]
Hi,
I am having a difficult time inserting and have the pictures in a cutline format, can you please help me out.
Morning muses over email with coffee and toast. | Coffee Muses // Aug 23, 2007 at 7:23 am
[...] Image Handling With Cutline [...]
Image layout in the blog // Sep 11, 2007 at 11:22 pm
[...] doesn’t do a great job with images and getting text to wrap. Low and behold I find out that this theme already has taken care of image layout issues for us. Check it out and maybe we can all start using more images in our posts. I think we all [...]
Your new image handling routine is good if one is just starting out with a blog, but what if one transfers to this theme from another? Must one go through each and every preceeding post and re-code?
I’ve been using the default WP image handler, and thus I’ve got spacing problems with your theme on each and every post in FFv2007. Your method works well in IE7 though, just not in FF.
Without a solution I’ll return to my previous theme.
BabeStud.com » Blog Archive » Why should you post images in your blog post? // Oct 28, 2007 at 11:07 am
[...] properly or the image will not display correctly. It gets even easier with Wordpress themes like Cutline,because Cutline comes with some of these “tags” already worked in to the theme. At the site for [...]
How to Post Like a Pro with Cutline // Nov 6, 2007 at 11:55 pm
[...] Whoooaaa, nelly! Images are so important that they got their own post. Read up on Image Handling with Cutline. [...]
» Image handling Adaptology OM4 Wordpress Theme // Nov 11, 2007 at 3:35 am
[...] aligned images are supported using Cutline alignment classes, such as this image with class = [...]
Hi there, i have this annoying blue border around my pictures that i’d really like to remove it permanently. I’m not sure if it’s Cutline becos my friends don’t seem to have this problem. Advice please? Thanks in advance!
Why can I not get hspace to appear on firefox? It shows up fine in the WP edit block. Surely there’s a fix. Here’s the lastest failed attempt:
http://www.fragmentsfromfloyd.com/2007/12/13/exterra-incognita/
Any tips much appreciated. This template is too elegant to have this achilles heel in such a widely used browser.
Thanks for the great theme and support.
I have a problem with my Cutline images.
I am using a series of images measuring 480px wide by 300px deep which are designed to span the blog post text column with the text starting underneath (almost identical to the image of the oranges on the green background at the top of your image handling post, except my images are 300px deep).
My problem is that I cannot get consistent spacing between the images and text, ie: one image will have the right amount of space above and below it before the text starts, but the next will be jammed hard right up under the text with hardly any space.
I would be grateful for any suggestions.
Regards,
Tim Squires
Hey, I need help bad. My site is okay. However, in IE 7 the archives page is all screwed up.
Anyone know of a fix for this. It works fine in FF.
Thanks
hi, i tried the use the code you provided above which is
and when i view the article the pic gets wider than it is on my blog.
Do you know why this happens?
January update « Let’s play math! // Jan 31, 2008 at 12:35 pm
[...] things can make a big difference. I learned how to handle images using the “class” attribute, so there shouldn’t be any more [...]
Hi Chris – I tried using your left class to wrap text around my images but it just doesn’t work. The class keeps getting moved around or disapears whenever I save it in my WP admin panel. I realize that Ed stated the same problem but I just don’t understand how you solved it. Edit my post in a text editor? How the heck do I do that? I used code-view to add the classes to my image post but it doesn’t stay there. It would be really be great if this option was a simple button like “indent left” or the other options on my WP edit bar. I’m sorry I’m such a newbie but I really want to make this work…Can you help?
Can someone confirm these classes are broken in the 3-column cutline? I’ve had to resort to span style=”float:right;padding:10px;” as the img class=”right” just doesn’t work on my stock setup.
Hi Chris
I’d like to make these changes:
I’d like to take the static header image from http://discount-holiday-resorts.com/test/ (my test site) and use it in my Cutline theme, and finish up like my test site. ie, no headline or tagline, just the header image with the page names BELOW the image, not above. Possible?
Thanks – (love the theme, though it’s far too “busy” with 3 columns! It would be better (3 cols) if I could make the whole thing wider – how would I do that?)
Warmly
Philip
Hi Chris
I’d like to make these changes if it’s possible:
I’d like to take the static header image from http://discount-holiday-resorts.com/test/ (my test site) and use it in my Cutline theme, and finish up like my test site. ie, no headline or tagline, just the header image with the page names BELOW the image, not above. Possible?
Thanks – (love the theme, though it’s far too “busy” with 3 columns! It would be better (3 cols) if I could make the whole thing wider – how would I do that?)
Warmly
Philip
Hi Chris
Each time I try to post a comment here I get an error message. Of course if this gets through then it isn’t each time! So this is a test!
Hi Chris,
I want to insert to my posts photos from flickr that point back to the photo’s position there. So I copied and pasted this piece of code from flickr:
and then clicked on the photo link and set it to align left. In the visual editor I see the photo aligned left with the text wrapped around it, as it should be, but when I save and view the page the text is not wrapped around. How can I fix that? I want the text wrapped around the image.
Please note that I’m an HTML illiterate… I’d rather not have to deal with the code…
Many thanks,
Maria
Freebies for Cutline « The WYSIWYG* Blog // Jun 1, 2008 at 1:46 am
[...] and WordPress’ HTML Write Editor is a friendly face, you might also be interested in reading this page on how to style your images in [...]
Im a real dummy at this Chris. I cannot upload my banner to my wordpress.org site (www.thehiphopchronicle.com).
I have no idea what to edit.
The banner I would like is at http://www.colonisedminds.com
I really really need help.
Thanks in advance
Hi Chris,
I switched over to the Cutline theme today (from the Misty theme), and I’m having a lot of inconsistency with my images — sometimes they show up, sometimes they’re replaced by a small blue question mark. I’m not sure if this means I have to go back through each post that includes an image and delete/re-post it, or if there’s a simpler solution? Sorry if this has already been discussed…