How can I make both the headline, and not just an entry, wrap around an image in a WordPress post?

January 20, 2008 4:14 PM

How can I make both the headline, and not just an entry, wrap around an image in a WordPress post?

Using align="right" or similar in Moveable Type, Blogger, WordPress, and other blogs, anyone can format a post so that text wraps around an image. However, this always comes after the post title.

Is there a plugin or another way to force the image to wrap around a post title along with the entry? This would have be doable from within a post page, and only available as an option.

posted by Unsomnambulist to computers & internet (3 comments total)

The problem is that your image tag is in the body of your post, and the body of your post comes after your headline.

My first thought would be to use something like the More Fields plugin, placing the image filename in the extra field. Then in your layout, have the field containing the image name placed into an img tag that's in the header's div (or h1 or h2 or whatever) tag, floated to the right.
posted by bcwinters at 4:22 PM on January 20

If you have a little bit of experience coding WP templates you could add a function in your template that reads a custom field in your post and depending on that value adds a 'align="right' to your headline. It's not that difficult. There's a good page on custom fields in the WP Codex.
posted by husky at 4:51 PM on January 20

Well, to do it globally, you could just modify your template to move the title inside the body <div>. But to make it conditional, try this:

1) I would go into the single.php template file and move the <h2> inside <div class='entrytext'>. This should not have any immediate effect, because the h2 header is still a block element, so it will continue to push the content to a new line.

2) So, (while you are still in the single.php file) replace '<h2>' with this:
<h2<?php
isset(get_post_custom_values('wrap_title')) ) ? echo " class='wrap_title'" : '';
?>>

3) and in the css file (style.css) put this:

.wrap_title { display:inline; } /* or maybe align:right; ?? */


4) And then, in your "write" interface, when you want your title to wrap, scroll down to the bottom section called "custom fields" -- expand it, and in the "key" put "wrap_title" (without the quotes) and for the value put 'true' or something (shouldn't matter). And click the "add custom field" button.

(disclaimer: not tested. I looked at the template files to make sure I had the structure correct, but I would back up your theme folder before you try this. just to be safe...)
posted by misterbrandt at 10:27 PM on January 20