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

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

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!

• Rate this Post!

  Select Your Rating:

  • 5 Stars (Excellent!)
  • 4 Stars
  • 3 Stars
  • 2 Stars
  • 1 Stars (Poor)

• Share this Post

  Share With A Friend:

  Your Name Your Email

  Friend's Name Friend's Email

  Optional Message

  Send

• Print
• Social Bookmarking

  Add to Bookmarks: