How to Use Images in a Text Module

Video Training

Typically, images should be added to a page using the Image Module. However, there are times when you may need, or prefer, to add an image into a Text Module.

Prior to uploading your image, you should resize and crop it to be the exact dimensions you want it to appear on the page.

If you have already completed Cascade training and you have a live asset with which to work, please follow along using your real asset. If you are using this guide for practice, please always use the _playground site. Yes, it starts with an underscore. It is a test site specifically meant for practicing.

Find any page in Cascade you can edit. You can use the _playground site if you do not have a current page to edit. If you already had a draft saved, click the Edit button, then click the "resume editing" link to continue with your last changes. If starting a new edit, click the Edit button.

Images can also be added into a text module. In this example, we want to add an image after the last line of text (“Do NOT use external links for any of our pages in Cascade!”) by pressing the return key to create a return break. Then, click the Insert/Edit Image icon.

The screenshot example here may be confusing. The object highlighted on the left is not the letter “l” or a vertical line, it is the cursor “blinking,” but frozen in place in the image.

In this example, we are linking to the image we uploaded during the Uploading Images lesson. Make sure to leave the Internal checkbox selected. Then, click the Choose File button to open the Internal Asset Navigator (IAN).

Your image may be found under the Recent tab. If it is not, you can navigate to it the long way. Click the Browse tab. Click the _playground root link or select the site where your image is uploaded. Then click into the images folder, and then click into the folder where your image is saved. The example uses the websites folder from the _playground site. It also depicts the breakcrumb trail rather than the different folders that would have to be selected. Once the location is correct, click the correct image's selection circle. You will see a thumbnail image of it appear. Finally, click the Choose button.

Click into the Image description field and type out a description of the image. This is for accessibility so that screen readers can describe the image to someone who is visually impaired. Use this link if you are not sure how to compose alt text for images. Finally, click the OK button to insert the image.

When attaching an image to a text module, you can unselect the image by clicking in the text module's white space. You can re-select the image by clicking on it. When the image is selected, you can click and drag on any of the corner "handles" to resize it.

Links can also be added to images. Make sure your image is selected, then click the Insert/Edit Link icon. Here, we add the link exactly as in the internal link lesson. Click the Choose File, Page, or Link button. Under the Recent tab, click the selection circle. Click Choose. Leave Target as None. Finally, click the OK button.

If you have any questions or concerns, please contact the Web Team by going to sandiego.edu/web-requests.