You are here

Inline Images

Here is how to insert an image into a text area.  When a visitor clicks on an inline image, it will expand, with a dark shaded box around it ("Colorbox") until the visitor clicks the closing "X" or hits the escape key.

  1. Select any page where you want to put an in-line image and click the edit button. 
  2. Full HTML.  Find the Body field where you are going to insert the inline image. Find the Text Format drop-down menu, and select "Full HTML."  Images will be stripped out of pages that are "Filtered HTML" or some other format.
  3. Use the "Inline Image" field.  On many pages, there may be both a Headline Image field and an Inline Image field.  Headline images go at the top of the page.  Inline images go somewhere in the Body text.  If you want an image to appear in the Body text, be sure to use the Inline Image field.  (Technically, you can use a Headline Image image as an inline image, but it will then appear twice on the page.)
  4. Upload the Image.  In the Inline Image field, find Add a New File, click the Choose File button, find your file, then click Upload.  Fill in the alt text, title and caption areas.  Repeat this process for all the inline images you want to use on this page.  The Style dropdown should say something like "Colorbox Standard Page, 542 x 360" or  "Colorbox middle_column_514".  If it is a vertical image, choose "Colorbox Standard Page Portrait" instead.
  5. Where the image will go.  Now for the fun part.  Go back to the Body field, place the cursor where you want the image to appear -- typically at the beginning or the end of a paragraph -- and click there.  Without clicking anywhere else, scroll to the Inline Image field, find the image you want, make sure the size/style you want is selected from the Style dropdown menu (the default is full column width, but you can choose something smaller), and click the Insert button.
  6. That's it!  If you decide you don't like the image in your text -- in the wrong place, wrong size, whatever -- just use your cursor to delete the image.  Then repeat step #5, making the adjustments you desire.

If you want to fine-tune how the inline-image looks, take a look at these advanced steps.