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!
Do you like this article? Submit it to Blogosphere News!
98 responses so far ↓
1 Olaf // Sep 14, 2006 at 8:23 am
Great, cutline brings more form into the blog.
2 April // Sep 14, 2006 at 10:09 pm
Oh snap, this is a very stylish lil’ theme here. Excellent work!
3 kew // Sep 14, 2006 at 11:11 pm
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…
4 Mike // Sep 15, 2006 at 8:46 pm
Christoblogger,
What’s the maximum width image that can be used without boinkin’ your blog with this here theme ?
5 Chris // Sep 15, 2006 at 11:14 pm
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.
6 Mike // Sep 15, 2006 at 11:27 pm
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.
7 Doug Karr // Sep 18, 2006 at 10:32 am
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!
8 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 […]
9 qurqle.wordpress.com // Sep 24, 2006 at 4:26 pm
[…] Cutline Tutorial […]
10 V // Sep 25, 2006 at 10:01 pm
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!
11 Tom // Sep 26, 2006 at 5:41 am
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.
12 Chris // Sep 26, 2006 at 7:22 am
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.
13 Tom // Sep 26, 2006 at 11:32 am
Thank you so much Chris. I shall be adjusting and updating my site this coming weekend!
14 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. […]
15 leyna // Sep 29, 2006 at 9:24 am
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!
16 Paul // Oct 2, 2006 at 12:57 pm
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.
17 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/. […]
18 Chris // Oct 4, 2006 at 10:54 am
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!
19 Angela // Oct 7, 2006 at 12:04 am
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?
20 Chris // Oct 7, 2006 at 12:14 am
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!
21 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? […]
22 Anthony // Oct 11, 2006 at 11:14 am
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.
23 Chris // Oct 11, 2006 at 11:34 am
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!
24 Anthony // Oct 11, 2006 at 11:37 am
It’s the top post about building websites. The image location is “http://antbag.com/wordpress.jpg”. Thanks for the compliment.
25 Chris // Oct 11, 2006 at 11:45 am
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…
26 Anthony // Oct 11, 2006 at 11:49 am
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.
27 Chris // Oct 11, 2006 at 11:58 am
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!
28 Anthony // Oct 11, 2006 at 12:26 pm
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.
29 Chris // Oct 11, 2006 at 12:37 pm
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…
30 Anthony // Oct 11, 2006 at 12:42 pm
Valid or not, it worked! I appreciate you wasting part of your day for me. Thanks for making such an awesome theme available!
31 Chris // Oct 11, 2006 at 12:47 pm
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.
32 Brandon // Oct 12, 2006 at 3:36 am
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.
33 Chris // Oct 12, 2006 at 9:38 am
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?
34 Rick Beckman // Oct 14, 2006 at 12:33 am
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!
35 Chris // Oct 14, 2006 at 12:48 am
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.
36 Shane // Oct 15, 2006 at 1:56 am
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?
37 Chris // Oct 16, 2006 at 10:24 pm
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?
38 Shane // Oct 17, 2006 at 2:20 am
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
39 Island in the Net // Oct 20, 2006 at 12:25 pm
Thanks for the tip! This had greatly improved my use of the template.
40 Jeff Blaine // Oct 31, 2006 at 5:13 pm
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.
41 Chris // Oct 31, 2006 at 5:19 pm
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.
42 Jeff Blaine // Oct 31, 2006 at 5:24 pm
Indeed indeed. Thanks.
43 Ed // Nov 17, 2006 at 11:20 pm
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.
44 Chris // Nov 17, 2006 at 11:39 pm
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.45 Ed // Nov 18, 2006 at 12:00 am
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.
46 Chris // Nov 18, 2006 at 12:04 am
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?
47 Chris // Nov 18, 2006 at 12:08 am
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.
48 Ed // Nov 18, 2006 at 12:38 am
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
49 Chris // Nov 18, 2006 at 12:46 am
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.
50 Ed // Nov 18, 2006 at 11:24 am
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
51 Chris // Nov 18, 2006 at 12:08 pm
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…
52 Ed // Nov 18, 2006 at 2:58 pm
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.
53 Ed // Nov 18, 2006 at 3:29 pm
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).
54 Scott Secor // Nov 21, 2006 at 9:01 am
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?
55 Scott Secor // Nov 21, 2006 at 12:13 pm
I got it figured out! Thanks for such a rocking site to work with!
56 Chris // Nov 21, 2006 at 12:35 pm
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.57 Scott Secor // Nov 21, 2006 at 2:01 pm
Hi Chris,
Thanks for the great tip. How does it look now? I changed the size to 35px as you suggested.
58 Chris // Nov 21, 2006 at 2:10 pm
Muy bien! I think it’s great.
59 Scott Secor // Nov 21, 2006 at 2:23 pm
Hear Hear - a big round of applause for Chris and his fine work and support!
60 Chris // Nov 21, 2006 at 3:11 pm
Party @ Cutline.
61 Mark // Nov 28, 2006 at 2:43 pm
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
62 Lloyd Budd // Nov 28, 2006 at 7:48 pm
Chris, Ed, the import issue you encountered is described in http://trac.wordpress.org/ticket/3290
63 Raquita // Dec 1, 2006 at 6:16 pm
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?
64 Raquita // Dec 2, 2006 at 12:20 pm
Hey - I was wondering how I could put the default styling that you removed from Cutline back in…
I really would like the option..
65 amish // Dec 8, 2006 at 12:29 pm
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?
66 amish // Dec 8, 2006 at 12:37 pm
Nevermind, found some good stuff in the Wordpress codex. A little bit of CSS styling will work.
67 Chris // Dec 8, 2006 at 12:40 pm
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.
68 Jared // Jan 18, 2007 at 11:01 pm
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.
69 Mike // Jan 23, 2007 at 7:27 pm
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?
70 Rod // Jan 29, 2007 at 7:30 pm
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.
71 amish // Feb 12, 2007 at 1:40 am
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??
72 amish // Feb 12, 2007 at 11:21 am
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!
73 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 […]
74 Hallas // Feb 17, 2007 at 6:49 pm
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?
75 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. […]
76 Daniel // Mar 21, 2007 at 10:46 pm
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!
77 Abazza // May 13, 2007 at 10:33 am
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
78 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 […]
79 Ashly // Jun 15, 2007 at 10:51 pm
Hi,
I am having a difficult time inserting and have the pictures in a cutline format, can you please help me out.
80 Morning muses over email with coffee and toast. | Coffee Muses // Aug 23, 2007 at 7:23 am
[…] Image Handling With Cutline […]
81 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 […]
82 Twolane // Sep 28, 2007 at 9:28 pm
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.
83 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 […]
84 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. […]
85 » 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 = […]
86 ron // Dec 10, 2007 at 11:04 am
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!
87 fred1st // Dec 13, 2007 at 9:34 am
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.
88 Tim // Dec 20, 2007 at 5:35 pm
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
89 Deb // Dec 30, 2007 at 11:40 pm
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
90 Emirhan // Jan 23, 2008 at 12:04 pm
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?
91 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 […]
92 Tim // Mar 9, 2008 at 12:52 pm
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?
93 JKarp // Apr 3, 2008 at 4:22 pm
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.
94 Philip Langley // May 2, 2008 at 11:24 pm
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
95 Philip Langley // May 2, 2008 at 11:25 pm
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
96 Philip // May 2, 2008 at 11:30 pm
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!
97 Maria // May 27, 2008 at 2:07 am
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
98 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 […]
Leave a Comment