While the WYSIWYG Editor has a preset Insert/Edit Image tool, Web & Digital Communications has created alternative tools for adding images to your web page, accessed through the Snippets. The Snippet tool allows you to add a stylized design block to the web page without having to customize the HTML. Using the Snippet tool, you can easily create clean faculty listing pages, photos with captions, and navigation images. We have a number of image-related Snippets for you to choose from, including:
- Image with Description
- Image with Titles and Description
- Image on Right (with caption)
- Image on Right (with no caption)
- Image on Left (with caption)
- Image on Left (with no caption)
- Faculty/Staff Listing
- Image with Content and Header
- Image with Content
- Image with Label (Translucent)
- Image with Label
This article will cover adding an image either directly through the Insert/Edit Image tool or adding an image into an inserted Snippet. If you are trying to insert a Snippet, please see the help section dedicated to Snippets.
This article also expects the reader to already be familiar with uploading images into folders in the CMS. If you need help learning to upload files please visit How do I upload images to be used on my site?.
To insert an image:
- Open the WYSIWYG Editor for the desired editable region.
- Position the cursor where the image should be inserted in your text. This may be over the top of an example photo used in the Snippet.
- Click the Insert/Edit Image icon.
- A dialog box will appear prompting you to provide further information.
- Click the Browse icon to select your image.
- A second dialog box will appear prompting you to select an image. Please ensure you are in the Staging environment.
- Navigate the folder structure via the breadcrumb links. You will only be able to select images uploaded to sites that you have access to.
- Click on the image once to preview it. Click twice to select. Alternatively, you may click Insert.
- The image will be added to the Insert dialog box and a dependency tag will be used to refer to the image. The dependency tag will ensure your image displays regardless of where it is moved within the CMS folder system.
- Enter a clear description in the Image Description. For more on this please see Web Accessibility, Images.
- Click Insert
- Once you have finished, save and publish your page. If you experience rendering problems on the live page visit Why aren't my edits taking effect on the live page?.
The Insert/Edit Image tool includes the Appearance tab, which allows users to customize the display dimensions for an image. This does not affect the actual image dimensions, but only alters the size it will be displayed as. For information about image dimensions, either actual or display, please visit Image Size Guidelines.