/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!
Great, cutline brings more form into the blog.
Oh snap, this is a very stylish lil’ theme here. Excellent work!
I’ve been doing this on all the theme I port to my blog. It is good to see that Cutline is already define a set of image styling css. I hope this can be a trend for other theme designers.. so that I dont have to do my own addition all the time…
Christoblogger,
What’s the maximum width image that can be used without boinkin’ your blog with this here theme ?
Mike,
IE 6 simply won’t show the image if it’s larger than the content area (anything wider than the content area is “hidden”). The size that will “break” depends on the type of image styling used.
For instance, if you include a picture with the frame and center it, then the maximum picture width is 478px. However, if you include a picture with no frame, then the maximum width is 500px.
Also, if you right or left align a picture and include a frame, then the maximum width goes down to a paltry 463px. And yes, I say that half jokingly.
Considering that I have to stay at 350 or below now, that’s more than good enough and that was a well thought out response.
Thanks for the info and I’ll give it a try.
I added a set of flickr images and put a nice hover class in addition to the double border that you have. It’s at I Choose Indy!
Here’s how:
a:hover img {
display:inline;
border:3px solid #0af;
float:none;
clear:both;
width:75px;
height:75px;
margin:5px;
padding:8px
}
Great theme!
Cutline and Images « Frequently Asked Questions // Sep 23, 2006 at 1:10 pm
[...] If you are using Cutline and want to have more image control, check the author’s page for some useful information: Image Handling with Cutline [...]
qurqle.wordpress.com // Sep 24, 2006 at 4:26 pm
[...] Cutline Tutorial [...]
I really like how simple you made the theme.
I love it!
I am using it now, and have utilized the images as a pullqoute that I have worked up in photoshop.
I love the clean look of the theme too!
What do I need to edit to make sure that it doesn’t automatically align format my pictures at all? Because I am currently trying to use it on my blog and all the pictures that I list at the end of a post gets aligned vertically on top of each other to the right.
Just ugly.
I would LOVE to use this theme though. Just need to get rid of the minor irritation.
Tom,
You have two choices here:
Look for the following line of code in your stylesheet (I recommend using a find function):
.entry img.right, .entry img { padding: 8px; margin: 5px 0 5px 15px; border: 3px double #bbb; float: right; clear: right; }By removing the code in red from the line above, any images that do not receive a class will be “unstyled,” and they will likely behave as you expect them to.
Thank you so much Chris. I shall be adjusting and updating my site this coming weekend!
Cutline 1.02 Released, Upgrade Now! | Cutline Theme for WordPress // Sep 28, 2006 at 2:43 pm
[...] One particular user pointed out that he was unable to produce a horizontal row of images at the bottom of his posts, and given the old set of image handling classes, this would have been impossible to accomplish. Check out an in-depth look at this new class on Image Handling with Cutline. [...]
dear chris,
i am very hopeless with uploading images using cutline. evrytime i uploaded images, i only see an empty thumbnail.
i read the comment regarding the size of the image.. if the a picture with the frame and center it, then the maximum picture width is 478px. how about the picture height?
do u think it will be easier if i upload the picture in flickr first?
can u please give a guideline like in this post by dr.mikes
thanks chris!
How can I remove the images completely? I tried to rename the file names of said images, but the empty space is still there.
I want the main content to be very close of the horizintal navbar.
Wordpress Theme Review: Pool, Cutline, Rounded, Day Dream « //engtech // Oct 4, 2006 at 1:10 am
[...] bug042: Images: Cutline handles images differently than all other themes. Most people will be frustrated with the way it handles them. http://cutline.tubetorial.com/image-handling-with-cutline/. [...]
Paul,
In order to remove the images from the header, you would need to make the following changes:
header.phpfile, completely remove the<div id="header_img">...</div>code, which includes the references to the different image files (it’s a bunch of PHP andimgtags).Next, in your
style.cssfile, you’ll need to locate the navigation styling by using a “find” function on the following phrase:ul#navThe first result will be the correct one, and you’ll need to add this declaration to the existing styles on the
ul#nav:margin: 0 0 30px 0;Try it out and let me know if it works!
Okay, I have added the code to my images. But I am having trouble getting it to apply to all of them. On one post it worked like described but on the two below that post it won’t add the frames. If you look at my site you can see that. What could I be doing wrong?
Angela,
The reason why some of your images are appearing without frames is because you’ve specified the classes as “middle” instead of “center.”
Change ‘em and you’ll be good to go!
Resconto del Linux World Summit: Il mio punto di vista | Paolo Mainardi WeBlog // Oct 7, 2006 at 9:53 pm
[...] From now on, whenever you include an image without styling, it will just sit there and look out of place unless you apply an image handling class. The onus is now on you to make sure that your posts look as nice as I want them to, so don’t let me down, ok? [...]
I absolutely love this theme. I’m having a little trouble with an image though. It’s cutting out some of the text of my blog entry. I’ve tried moving it around to different parts of the post. ….not sure what to do short of removing the image from the post.
Anthony, which post is the image in? I’ve just given your site the once-over (which looks great, by the way), and I didn’t find anything that looked troubling.
Show me the image, and I’ll show you the answer!
It’s the top post about building websites. The image location is “http://antbag.com/wordpress.jpg”. Thanks for the compliment.
Anthony, that image is behaving properly. The text of your post reads just as it should, at least on my end, and I’m using FireFox…
I’m also using Firefox, and what I’m seeing is that the majority of the first line in the second paragraph isn’t showing up. The line is “I’ve come to believe that the best way to build a website, is by using this CMS(Content Management System) platform called WordPress.”. In my browser, The second paragraph begins with “WordPress.”. I appreciate you taking the time to help me out.
Anthony,
If you’re using the rich visual text editor, switch away from it and just use the basic editor (this avoids issues like the one that is currently causing your problem.
Alright, your first “paragraph” isn’t really a paragraph at all — there is a
<br />(line break) after “…limited use.” In reality, this should be a closing paragraph tag (</p>).Your second paragraph should begin like this:
<p><img href="..." ... />Second paragraph text</p>Once that markup is all correct, things will be fine. From the looks of it, this appears to be a WYSIWYG editor issue.
Try fixing up that markup and let me know if it works!
I’m still having the issue. I’ve tried following all directions. I tested in Firefox, IE7, and Opera, and I’m getting the same results. I have the “Visual Rich Text Editer” turned off. I’m starting to wonder if I screwed up something in the CSS when I modified the theme.
WordPress seems to think that your
width="200"declaration is not being close-quoted, and therefore, everything after that 200 is viewed as part of the width declaration and not part of the paragraph.Try removing everything from your image reference except for the URL of the image itself, and see if that works. I realize it’s not “valid,” but you may as well try it for testing…
Valid or not, it worked! I appreciate you wasting part of your day for me. Thanks for making such an awesome theme available!
Hey, I’m just glad it worked. I’m not sure why your end quote wasn’t being recognized as a valid character — I’ve never seen that before.
Although I have noticed some inconsistencies with handling end quotes in both comments and also entries.
It’s possible that WordPress just doesn’t handle those things perfectly yet.
I can’t seem to get images to be larger, in other words, the width of the text below the image. they only show up in thumbnailish size. pls help. amazing template.
Brandon,
The CSS does not control image sizing — that’s entirely up to you. I have a sneaking suspicion, though, that your images may be:
offclassleft,right, orcenter.If your images are within size constraints, make sure that your
imgdeclarations contain the dimensions of the image that you’re trying to embed. For instance, if you wanted to display a picture that was 400px wide by 300px high, centered in your text and without a frame, yourimgdeclaration would look like this:<img class="center off" src="http://path/to/img.jpg" width="400" height="300" alt="Image alt text" />Ya dig?
Still using and enjoying Cutline on my blog; great theme as always. And I just ran into it on accident as well. A Google search for css image handling lists this page second. Congrats!
Rick, I have to believe that this is a testament to the built-in SEO characteristics of the theme. Although I realize that your search term was pretty specific, showing up #2 after only being online for just over a month is pretty huge in my book.
Having recently switched my personal site over from MovableType to WordPress (and basing my new design’s architecture on the Cutline framework), I have been able to witness firsthand the SEO benefits of operating with Cutline.
I conducted a preliminary analysis yesterday, and I think this topic deserves an in-depth look on this site as well.
There’s certainly more to this than meets the eye, and the ramifications could be huge for just about any type of blogger.
Really nice theme. Well organized. The image handling is very well done.
But one thorn in the side of every theme I’ve looked at is how to handle lists on the right side of a left-side image, and how to get them to line up the way a paragraph does … any advice, theme tweaks?
Shane, without actually testing this scenario, I would think that Cutline would be able to handle it gracefully.
An image with the
leftclass applied to it would have text wrap around its right side, so in theory, things ought to work out just fine.Now, without the
leftclass, I think some screwy things might happen…Do you have a live example of this that I could check out?
Chris,
I don’t have an online example for you, but I did find a short discussion here: http://www.thescripts.com/forum/thread440672.html
This is a cross-browser bug. There are 3 solutions discussed and each require additional styling. They all have their drawbacks and are not perfect solutions.
This might be one of those CSS battles best left unfought
Thanks for the tip! This had greatly improved my use of the template.
Chris,
This is a great and simple way to handle images (in this theme). Kudos for that. Along the lines of “off” and “stack” as flags, wouldn’t it also be worthwhile to add “nowrap” (or “noflowtext”) with the corresponding CSS to handle that?
I just found myself wanting “left” but without wrapping text on the right side. I can figure this out on my own for this particular case, but I think this would be something good to fold back into the theme’s CSS for a later release.
Jeff,
If you were to write something like this in your post editor:
Some text here…
<img src="..." />Some more text here…
You would end up with the very situation you’ve described.
Essentially, a “classless” image (no, not a nudie pic, heh) will be floated left without wrapping text, but only if you set it apart like it’s an independent paragraph, as shown above.
Indeed indeed. Thanks.
Chris,
First of all I wanted to say thanks for creating (and making available) a great theme like Cutline. I’ve just started using it on my fledgling blog. I’ve also been reading your tips on how to write a successful blog and I’ve started to change my writing habits accordingly. I only have a few posts right now but I plan to start writing a bit more (I know — that’s what they all say).
Anway, I’ve run into a bit of an issue when it comes to formatting images on my blog. I really don’t think it’s a problem with Cutline but I thought that maybe you’d run across this before.
My problem is that I can’t seem to get the class=”left” tag to “stick” when I edit my post in WP (on my own server). I hit the “html” button in the rich editor to bounce to the pure-html view and add the tag. When I save the post the tag disappears. If I add align=”left” instead of class=”left” everything’s OK. It just seems like the editor doesn’t like to see the class attribute in an tag.
If I go into the mysql database and edit the post there everything displays properly so I don’t think it’s a problem with the theme or the CSS itself.
Have you ever seen that before?
Anyway, thanks for taking the time to put out such a great theme and such great blogging advice.
Ed,
Crazy, inexplicable tomfoolery like you’ve described here is precisely why I don’t recommend using the Rich Visual Text Editor when writing a WordPress post.
If you use the regular text editor, you lose a tiny bit of the plug ‘n play functionality, but you get a really nice return in terms of formatting control.
I actually hand-code all of my image and link references, and I suppose this is largely because I’d simply prefer not to take my hands off of the keyboard.
However, I could just as easily use the quicktags to insert
<img src="..." />in my posts, and you could do this, too. Once your image code is there, you should go back and insert the proper Cutline image handling classes to get the output you’re after.Finally, I do not recommend the use of the
alignelement when placing images. It’s very Web 1.0, baby, yeah.Wow, Chris, thanks for the quick reply. You must live in front of that keyboard.
I should’ve mentioned that I’d tried turning off the GUI editor with the same results. I add the class=”left” attribute, hit either “Save” or “Save and Continue Editing” and — boom — the class attrribute just vanishes. Seriously.
I did find another soul who seems to be experiencing the same problem here:
http://wordpress.org/support/topic/66083
Anway, I was just hoping that it was something that’d you’d seen before.
Thanks again.
Ed,
I’ve got a handy USB feeding tube that I can plug into the ports on my keyboard, so that’s my secret.
Anyway, what version of WordPress are you running?
Oh also, I wanted to suggest that you try something a little bit kooky here.
When I ported my blog from MovableType to WordPress, the database dropped all additional class attributes from
img,span, andblockquotedeclarations.Strangely enough, however, it did not drop those attributes from text contained in the Optional Excerpt field.
So, just for sh*ts and giggles, why don’t you try formatting an image within the Optional Excerpt of one of your posts, and then try viewing that excerpt through the appropriate archive page.
If you do try this, please let me know how it turns out.
Chris,
Up until about 3 hours ago I was running 2.0.3, but now I’m at 2.0.5. I was hoping that the upgrade would magically heal my WP editor.
I tried editing one of my excerpts and was quite stunned to see that the class attribute survived the save.
http://www.techwandering.com/2006/10/
I’m not exactly sure what that means, but it is interesting.
I appreciate the help, Chris, but please don’t feel obliged to troubleshoot something which is obviously not a problem with your theme. Once I figure it out I’ll post back here. Hey, maybe I’ll even write a post about it on my blog. Now there’s an idea…..
Thanks again,
Ed
What a strange bug. I’d love to just forget about this issue and move on, but it’s one of those things that you like to figure out simply because it just doesn’t make any sense.
Hey, Chris,
I know exactly what you mean. I have the same “issue” — I just can’t let things drop. Ever. Sometimes it’s a blessing, but sometimes….. well, I don’t need to tell you.
It took most of my morning (case in point) but I think I’ve fixed my problem. I had to do a little tracing through the WP post code (not too easy since I don’t know php).
There’s a file named “kses.php” in the “wp-includes” directory. That file looks like it creates arrays of all of the valid attributes for a given tag. I added an entry for the “class” attribute under the “img” tag and — presto — the class attribute sticks to the post.
I have no idea if that’s the best way to fix the problem but it worked for me, at least for now.
Thanks again for the help (and the theme, and the great articles).
Ed