Website Editing: Add photo/image/picture to website page
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.
- Go to the page where you want to add an image.
- Click the Edit link in the upper right. This will open the content editor.
- Click in the content where you want the image and then click the Image button. This will open the Image Properties screen.
- Click Browse Server. This will open the CKFinder screen.
- Click the folder on the left where the image resides or you want it to reside.
- To add a subfolder to stay organized, right click a folder and click New Subfolder.
- If you have 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.
- Double click the desired image you wish to add.
- 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)
- 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)
- 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.
- 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:
- 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:
- Click the OK button and the picture will appear in the designated space.
- Click Save Changes when finished editing the page.