SwimOffice Admin - Email/Print/Calendar

To upload and add photos/images to a web page, follow the steps below. Note: If you have a large image, such as from a smartphone or camera, please resize before uploading.

  1. Go to the page where you want to add an image.
  2. Click the Edit link in the upper right. This will open the content editor.
  3. Click in the content where you want the image and then click the Image button. This will open the Image Properties screen.

    CKEditor toolbar

  4. Click Browse Server. This will open the CKFinder screen.
  5. Click the folder on the left where the image resides or you want it to reside.
    1. To add a subfolder to stay organized, right click a folder and click New Subfolder.
  6. If you have have not uploaded the photo to the CKEditor follow these steps:
    1. Click Upload.
    2. Select the .gif, .jpg or .png file(s) you want to upload and click Open.

      CKFinder

  7. Double click the desired image you wish to add.
  8. This will insert the image into the Preview Screen located in the bottom of the editor. From here you can adjust:
    • Alternative Text (label the image for both search engines and visually impaired users)
    • Width
    • Height
    • Border (how many pixels wide to make a border around the image)
    • HSpace (the number of pixels of space to add to the left and right of the image)
    • Vspace (the number of pixels of space to add to the top and bottom of the image)
    • Alignment (use this have content flow beside the image; Left will put the image to the left of the content)
  9. You can optionally link the image to a page or website. Perhaps you have a registration button that, when clicked, takes people to your registration.
    1. Click the Link tab.
    2. Fill in the URL field with the full URL of the site or page to which you want to link the image, such as http://www.google.com.
    3. If it links to an external website, you may click the Target dropdown and click New Window (_blank) to open the site in a new browser tab.
    4. Click the Advanced tab and fill in the Advisory Title with a tooltip that appears when someone hovers the cursor over the image, such as Click to register.
  10. If you selected Left for Alignment, click the Advanced tab and enter this at the end of whatever is in the Style field to add a 10 pixel margin to the right of the image:
    margin-right: 10px;

    Image Properties Advanced tab

  11. If you selected Right for Alignment, click the Advanced tab and enter this at the end of whatever is in the Style field to add a 10 pixel margin to the left of the image:
    margin-left: 10px;
  12. Click the OK button and the picture will appear in the designated space.
  13. Click Save Changes when finished editing the page.

__________
See Also
Edit or resize images and photos, add text to images
Embed a YouTube video
Upload and link a document