All Collections
For All Admins
Website Design
How to Add a Photo to a Website Page
How to Add a Photo to a Website Page
Updated over a week ago

You must have Admin Level - Webmaster access to add a photo to the website.

NOTE: If you have a large image from a smartphone or camera, please resize it before uploading.

  1. In the side menu, click Website Design.

  2. Go to the page where you want to add an image.

  3. In the upper right, click the Custom Page overlay (or the Main Text overlay on the home page). This will open the content editor.

  4. Click on the content where you want the image and then click the Image button. This will open the Image Properties screen.

    Image button
  5. Click Browse Server. This will open the CKFinder screen.

  6. Click the folder on the left where the image or you want it to reside.

    • To add a subfolder to stay organized, right-click a folder and click New Subfolder.

  7. If you have not uploaded the photo to the CKEditor, follow these steps:

    • Click Upload.

    • Select the .gif, .jpg, or .png file(s) you want to upload and click Open.

      CK Finder
  8. Double-click the desired image you wish to add.

  9. This will insert the image into the Preview Screen at the editor's bottom. 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 to have content flow beside the image; Left will put the image to the left of the content)

  10. 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.

    • Click the Link tab.

    • 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.

    • 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.

    • 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.

  11. 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;

    Advanced tab, Style field
  12. 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;

  13. Click the OK button, and the picture will appear in the designated space.

  14. When finished, click Save.

Did this answer your question?