Hi all -

I am trying to figure out how to place a 300x250 image in the middle of a block of text that ranges in length from 750 to 1,000 words. The block of text is held in the {body} field of our weblog. The problem is, I can’t figure out how to place the image in the middle of the text, only at the top of the body of text, or at the bottom.

If I do this:

the image displays at the top.

And if I do this:

the image displays at the bottom.

I want the image displayed in the body—float: left—so that the text wraps around it. I tried using absolute positioning to force the image down into the page by 700 pixels, like this:

but this plops the image right on top of the text, hiding it. The position was correct, though.

Does anyone have a suggestion?

Thanks!

Image should really be in the body it self but to go along it should be nested layer with position of Relative using a box (padding, margin) concept of positioning.
eg.

Even this will not guarantee that text will “wrap” around the image…so really why not inset an image as part of the body since it sounds like an image is part of the content/text.
All the best!

You need to put it in right in the middle of the actual body text (where you want it to appear) in the entry and apply a css class (with appropriate margins/padding/etc) to it….
—————
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat < img src=”” class=“floatLeft” > lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.
——-
< img src=”” class=“floatLeft” > Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.
—————
Or you’d need to use javascript, php, etc. to do it programatically (automatically after so many words).

lebisol - 13 June 2008 09:22 AM

why not inset an image as part of the body since it sounds like an image is part of the content/text.

I assume by this you mean insert the <img> tag within the body field on the Publish page? We don’t want to do this because we need the images to have their own custom fields.

PXLated - 13 June 2008 09:26 AM

....Or you’d need to use javascript, php, etc. to do it programatically (automatically after so many words).

This was going to be my next suggestion…..you will have to dig for trim functions etc.
Quite nasty for ‘small’ visual effect…
All the best!

It’s not a full blown solution but I had to do something similar for a site a while back: insert an image (actually a thumbnail link for a lightbox) after the second paragraph in a body of text.
See this thread for a rough start of a php solution.
Another way would be to use javascript (big fan of jQuery myself0 to remove the img from the dom and reinsert it (roughly) in the middle of the text.

How does your {body} look by the way, just 1 paragraph holding the entire block of text or several paragraphs?

e-man -

Thanks for that thread. It was helpful. I ended up doing something similar.

For the record, I don’t think this is possible without resorting to PHP.

Basically what I did was estimate roughly how far into the article I wanted the box ad to appear. I chose 1000 characters (somewhat arbitrary). Using PHP’s strpos function, I find the exact position of the first instance of “</p>” after this 1000th character starting point. This position represents where the paragraph that contains that 1000th character ends. I then stick all the text before that position into one string variable, and all text after it into another, and I “echo” my ad text between them. Like so:

That’s it, roughly. Note that this solution assumes the body field is XHTML.

A few live examples:
http://www.urbanturf.com/articles/news_trends/dc_has_4th_highest_median_rents_in_country/
http://www.urbanturf.com/articles/news_trends/should_friends_buy_property_together/
http://www.urbanturf.com/articles/news_trends/credit_score_do_you_know_yours/

Thanks for everyone’s help!

Will

Glad it helped! I actually had to check those pages in Safari as in FF the adblock plus extension blocked the ad completely
Nice-looking site BTW!

Thanks!

You could always use LG Replace (http://expressionengine.com/forums/viewthread/76788/) rather than php. Of course it would still involve some work from the editor which might not be what you want.

Nice plug.    LOL