Image Formatting Basics

When inserting images into the WYSIWYG editor there are a few different was to adjust their appearance.

Aligning the image with text by using “Float” styles:

  1. Select your image in the WYSIWYG editor
  2. In the “Styles” drop down button in the WYSIWYG toolbar, choose “Float Left” or “Float Right” depending on which side of the text you want it to display.
Move an image within the WYSIWYG editor:
  1. This can be done by clicking and dragging the image.
  2. A text cursor will move when you do this and it will determine where the image will be placed.
Resizing an image:
  1. Select the image by clicking it in the WYSIWYG editor.
  2. Click the “Image” button in the WYSIWYG.
  3. Enter either the desired Width or Height (you can only control one in order to retain the correct proportions of the image). Make sure the padlock to the right is locked in order to keep the proportions.
  4. Click OK
Placing your image in a Template:
  1. You can control where an image will appear by placing it in a “Template”
  2. Click the “Template” button in the WYSIWYG editor
  3. Select the desired template
  4. Insert your image where appropriate

Insert an Image from the File Browser

If you have uploaded an image to another page then it will live in the File Browser and you won’t need to re-upload it to insert it into another page. For more information about why it’s important to use the File Browser, take a look at this post: Why Should I use the File Browser?

  1. Place your cursor where you would like the image to go in the WYSIWYG editor.
  2. Select the “Image” button in the WYSIWYG editor.
  3. Select “Browse Server”, this opens up the “File Browser”
  4. In the “File Browser”, in the left hand pane under the “sections” folder, choose the folder/section where your image lives (your image will live in the section where it was uploaded initially).
  5. All the files uploaded to that section will show up in the right hand pane.
  6. Select your desired image and click “Insert file”
  7. If you know the dimensions for that image, insert the width or the height in the “Image Properties” popup box (make sure the padlock is locked to preserve proportions).
  8. Click OK
  9. Your image will now show in the WYSIWYG editor.

Upload and Insert an Image

To insert an image into your Webpage:

A. Upload the image

  1. Scroll down below the WYSIWYG editor to where you see “Inline Image”.
  2. Under “Add a new File”, select “Choose File”.
  3. Search on your computer for the image you would like to upload – select that image.

B. Insert the image you uploaded

  1. Place your cursor where you would like to have the image in the WYSIWYG editor
  2. Scroll down below to “Inline Image” where you uploaded the image
  3. Select the “Insert” button next to the image you would like to insert
  4. Scroll back up into the WYSIWYG and you will see your image there