Inserting Images

 

Step by Step Instructions

Follow these directions to insert an image in a page in Modern Campus CMS that is already uploaded into the system. Refer to this guide for instructions on how to upload images.

Note: These instructions are how to insert free form images in content sections of page templates that use a flexible snippet such as in a One Column Text snippet. When inserting images into page templates with prepopulated snippets, you will replace the default placeholder image and the snippet helper text will provide requirements such as size recommendations. When inserting images into components, the component editor will provide fields to link the images, image size recommendations, enter image alt text, etc.

  1. From inside the snippet content region, click the Insert/edit image button on the WYSIWYG toolbar.

    insert images step 1 screenshot

  2. When the Insert/Edit Image window is displayed, click the Source button.

    insert images step 2 screenshot

  3. Once the Select Image window is displayed, locate and select the desired image in the file browser list. Then, click the Insert button.

    insert images step 3 screenshot

  4. After the Insert button is clicked, you will be taken back to the Insert/Edit Image window and the unique image ID (dependency tag) number will appear in the source field. 

  5. Type a description in the Alternative description field. All images are required to have alternative text, or "alt text," that briefly describes its content or purpose in order for your page to be accessible to all page visitors. 

    Note: From here you can also adjust the size the image will appear on the page. You can only decrease the size, though. Do not increase the size here or your image will appear pixelated. Always leave the lock icon to the right of the height field locked to ensure you do not stretch or distort the image. 

    insert images step 5 screenshot

  6. Click the "SAVE" button when ready to insert the image.

  7. The image has now been inserted into the selected content region. Save your edits and view the page in the Preview tab to see how it will appear when published. 

    Note: If your image appears in the preview tab like the one below, with only a small broken image icon and the alt text showing, this means that the image wasn't published. Review the uploading an image guide for more information about properly uploading and publishing images. 

    insert images step 7 screenshot