How can I add an image to a post and have it "float" so the text wraps around it?
 

This seems really basic but with how this theme works I cannot seem to figure out where to put the coding or how exactly to write it. In my current situation, I want to be able to add multiple pictures to a post. The first will be top left (3 lines down from top), the second, middle right and the third, bottom left. The text of my post will write around these pictures. The way I understand it, you have to set the pictures so that they "float" so that the text doesn't push them around but wraps around them.

Am I totally off here?

Anyone have a suggestion for me?

My site is http://www.InspirationalParenting.com

I think you just need to put some CSS into the IMG tag. For example:

<img class="some_class" style="float: left;" src="some-image">

This will float the image to the left of the column or page that contains your text. Notice I have included the 'style' attribute after the 'class' of the HTML tag because the browser will render the information in order. If you put the 'style' attribute before the 'class' attribute the content of the 'class' attribute will be rendered after the style attribute and you will not see your styling.

I'd also include some padding around the image so the text does not look as though it is colliding with the image. For example:

<img class="some_class" style="float: left; padding-top:10px; padding-right:10px; padding-bottom:10px;" src="some-image">

You can float an image left or right.

Hope this helps but others might want to add more.

Cheers

Jeremy

use class="alignright" or class="alignleft'

What's wrong with just using the built-in photo editing tools in Wordpress? Once the image is inserted into the post, you just click on it and click on the little edit image icon that appears, and from there you choose alignment, add caption, etc. Then click Advanced, and under Image Properties you can add horizontal and vertical space. Just put in 5 or 10 or whatever (without the px), to give some nice white space around the image. Works fine. You can also scale the image nicely.

If you add the Scissors plugin you can do more. The next release of WP, 2.9, will have more image editing built-in.

Wow, paulae that's great! I didn't know you could do that. I guess I've been spending so much time with Atahualpa, I haven't been playing with all the WordPress features.

See, you can teach an old dog new tricks!

:)

I thought you were going to tell the other person "this is not a theme question!" and send him to wordpress.org. ;)

I'm really excited about what's in the pipeline for WP 2.9. A lot of the things we're having to do with plugins now will be part of the new Wordpress.

I guess theme developers will have to make sure their themes will work with 2.9. Do you know if Flynn has taken that into account for Atahualpa and Themeframe?

Atahualpa 3.4.4, Wordpress 2.8.6, php 5.2.5

This is probably another rookie error on my part, but a thump on the head here would be appreciated.

I put my first image into a post. On the category pages, where the image should appear in the post, I get the caption showing below the little blue box with the (?) inside it, but if you go to the event calendar in the right sidebar and click on November 21, you get the whole post with the image showing.

(It's at peacefresno.org, the upcoming event for Nov 21.)

How do I get the image to show on the category page posts as well?

Thanks,

casahac

try using the full html address so instead of
use
tin the post

I uploaded the image by URL, inserting this:

http://www.peacefresno.org/wp-conten...kbookcover.jpg

When I open the upcoming events page, I get the blue question mark again. When I click on the block where the image should be appearing and copy the image address, it gives me this:

http://www.peacefresno.org/category/...kbookcover.jpg

It adds the category/ into the address...... I need to keep that from happening somehow.

Thanks,

casahac

check the post itself, it is generating

<p style="margin: 0.0px 0.0px 12.0px 0.0px; text-align: center; font: 12.0px Helvetica;"><span style="font-family: Verdana, Arial, Helvetica, sans-serif;"><strong><span style="font-weight: normal;"><a href="../wp-content/uploads/2009/11/daybreakbookcover.jpg"><img class="alignleft" title="Daybreak Cover" src="../wp-content/uploads/2009/11/daybreakbookcover.jpg" alt="" width="200" height="308" /></a></span>Da</strong><strong>ybreak:&nbsp; Undoing the Imperial Presidency</strong></span></p>

notice the '../wp-content'? change that to teh full url

I think we're getting to the root of the problem here.

When I click on the "Edit HTML Source" button, I get an open, empty box that I can't do anything with. No HTML Source showing and no ability to put any HTML code into it.

Do I need to reinstall something here?

Cheers,

casahac

what is in the post when you use the visual editor? What is your 'role' (i.e. administrator, editor etc)

Bingo!

I am the admin, but the problem here is that for whatever reason Safari won't let me edit the html. When I switched over to Firefox I can edit the html. Everything is working the way I want it now.

Thanks so much for your help and patience!!

casahac

What version of Safari? I use it all the time.

Wow, now THAT was unexpected!

I'm running Safari 4.0.4 and Snow Leopard 10.6.2. When I open a post to edit it, it shows me the html for a second or two, then it switches over to WYSIWYG. If I click on the "edit html" button, as noted before, I get a big empty box that I can't do a diddly dang thing with.

Cheers,

casahac

If you would like. I'll take a look to see if it happens to me also. If so, send me a PM with an id and pw.

Done.

casahac

see my PM to you