Your REW Site: How to Format Image Placement so it Looks Professional

10,193 Views

Ever place an image on your page and have it look like this in relation to the text?:

Not only is it towering over the text (instead of "floating" within it like in a magazine), but there should be a margin separating it from the text (see the word "As" almost getting ink on it?).

If you're familiar with inline CSS, you can do something like this: <img src="/images/lab.jpg" style="width: 200; float: left; margin-right: 6px; margin-bottom: 6px;" />

But in case that doesn't work, read on...

REW Shortcuts

There are two options for easy image formatting in our Content Management System.

In the WYSIWYG (the page editor buttons)

Login to your backend and go to the page you want to add a photo to. See the square icon that looks like a polaroid? (see below)

When you click on that icon, you get the image formatting options, which look like this:

Select an image from the list, or upload a new one, using the button I've circled in red.

Then, click on the "Properties" button on the left to get to the "Image Properties" menu, shown below:

Remember that lamb above? It was supposed to be "aligned" to the left. See the red oval above? That's where you would select for the image to be "aligned left". Then, you just need to make sure that you start typing your text right after the image (on the same line).

Try it!

Our Built-in CSS Styles

The other quick way to format your images nicely is to use the CSS styles that come with all REW sites.

First, get the photo onto the page, with the paragraph of text appearing right after it (on the same line). If it looks bad, like the lamb image above, don't worry.

The next step requires you to be able to access the html code of your pages as you create/edit them. In the CMS, just look for the "HTML" button in the WYSIWYG buttons:

After you switch to html view, you need to be able to find the spot where your image and paragraph are. It'll look like this:

<p><img src="/images/filename.jpg" />Your paragraph text......

Explanation:
The <p> just begins the paragraph, and this part (below) is the html code that displays the image:

<img src="/images/filename.jpg" />

Here's the html code that would display the lamb image and text at the beginning of this post:

<p><img src="http://www.domain.com/images/imagename.jpg" />As a town with bored teenagers.....</p>

Now, let's apply the CSS classes, "floated" or "floated alt", to make the image "float" among the text (see resulting image below):

Here's the html code that displays an image floated left within a paragraph of text:

<p><img class="floated" src="/images/lamb.jpg" />As a town with bored teenagers.....</p>

If you want the image to float on the right side instead of the left, you would use this code:

<p><img class="floated alt" src="http://www.domain.com/images/imagename.jpg" />As a town with bored teenagers.....</p>

Forcing Text to Appear Under the Photo (not squished beside it)

Sometimes you'll post a photo which is fairly wide, so you don't want any text beside it (because there isn't any room). But the text shows up there anyway. This happened to me when I first posted the lamb image at the top of this post. It looked like this:

Here's what I did to prevent this:

In the html code, I placed this between the image and the paragraph that I wanted to follow beneath the image:

<p style="clear: both;">&nbsp;</p>

It's just a paragraph block with a non-breaking space inside (&nbsp;). The style attribute I added ("clear: both") tells the browsers that the paragraph block should clear any floated elements (should appear beneath them). You're supposed to use "clear: left" when the floated element is floating to the left - but I wanted to make things easier for the tutorial.

Please comment below if you have trouble with any part of this tutorial, and I will improve it accordingly!

Comments (12)

Enjoy this post? Why not share with friends or add a comment of your own?

Carolyn Gjerde-Tu

Gerry you need to blog more often. While I haven't added that many images to my website this looks to be useful inforomation to know also for images on blogs. I swear I end up spending almost as much time trying to get the photo the way I want as the time it takes to write the post.

mikey

Thanks for the info Gerry. Another problem I've had is when my photo is fairly large and text wraps on the side of it when I don't want it there. Clicking the return button several times is easy but doesn't always get the results I want.

My fix is to insert a table with two columns. I insert the photo in the left box and then figure out how wide to make the table (through trial and error) so that the next sentence appears below the photo.

GerryThomasen

Thanks folks!

Mikey, sounds like your solution works - but I've updated the post above with a new section at the end, which demonstrates a slightly faster remedy.

Jim Sparrow

Great post Gerry. As Carolyn mentioned (suggested?), you really need to blog more often :)

OCTeam

Nice post as we all run across this problem and we can use these great tips from the experts.

Can't you just use the "H-space" where on red oval screen shot is to separate the horizontal text? Like put a 6 or 8 in that box?

mikey

Hi Gerry,

Thanks for the tip. Like you said, that's easier than creating a table.

Mike

GerryThomasen

Drew, you can use "hspace" to add a margin to either side of the image, so that there is no room at all for the text to squish in beside the image - true. But that is risky because of the differences between browsers and resolutions - it's better to have a sample of that "clear" code I provided.

thataway61

You need to do a weekly tip Gerry! Good post.

jolenta

Hi Gerry, where's this week's tip (hint, hint)?

Robert Worthington

This fixed the picture text alignment issue. Thanks so much

FindCRE

Thanks for the tips Gerry!

Is there a way to add sometype of boarder so that the pic somewhat matches the site. When I add pics many times the boarder is white and it doesnt match the site.

GerryThomasen

Hi Richard - which site?

This page has a bunch of examples of CSS styles:
http://www.w3schools.com/css/css_reference.asp

You would just go to your body content's source code in the CMS's WYSIWYG (http://www.realestatewebmasters.com/blogs/uploads/wysiwyg-cms2.jpg), then you would implement the CSS code where I have placed asterisks below:

<img src="/images/general-han-soto.jpg" style="****;" />

For instance:

<img src="/images/general-han-soto.jpg" style="border-color: red;" />

Share your thoughts…