How to Use the Image Module

Video Training

This lesson picks up exactly where the lesson Layout Using Content Rows and Columns left off. That lesson was placing an Image Module into the second column of a row, but an Image Module can be used in almost any layout, so feel free to use your own page to work on if you need to place an Image Module.

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.

Select the page you wish to add an Image Module to and click the Edit button.

Scroll past the top text module to the bottom of the page. Click anywhere on the collapsed row which reads "Template 2015" to expand it.

A Row must have a specific layout selected before any modules can be placed into the columns. If continuing from the Layout with Content Rows and Columns lesson, you can skip this step. If not, select whichever layout you prefer. The examples use a 2 Column (even columns) Row Layout.

Under the Image section header is the Image Source option. Click the Choose File button under it.

Navigate to the picture asset you want to use. In the example, it is conveniently under the Recent tab. If you are unfamiliar with how to use the Internal Asset Navigator (IAN), then you should review that lesson now. Select the image you want to use by making sure the blue selection circle is filled.

You can make sure you have the correct image by checking its thumbnail. When correct, click the Choose button.

For the Title and Subtitle fields, these are optional, though the Title field is highly recommended. On the live site, they appear as text directly underneath the image. If you wish to add either a title or subtitle, click into the corresponding field(s) and type in a title and/or a subtitle. The example uses "Optional Title" and "Optional Subtitle." If you prefer, you can leave these blank.

Click into the Image Caption / Blurb field and type something in. For an Image Module, this field is also optional. And, like all other Text Modules, this field can do anything a normal Text Module can do (e.g. link, attach images, etc.). The example uses the text “Optional Blurb.”

The bottom of the Image Module deals with turning the image into a link. This is also optional. The first option is for how the link should open. For this example, click the New window dot so the link will open in a new tab. The link should open in the same window if you are linking to a page within your own site, or it should open in a new window if the link is to anything else.

Scrolling down, under the Image URL (optional, choose one) section, there is an Internal URL field. To add an internal link, click on the Choose File, Page, or Link button. IAN will display.

If you had wanted to add an external link, you would copy and paste the target URL into the External URL field (include https://) instead. You cannot use both the internal and external links at the same time, so this example does not display any data in that field since we used an internal link.

Those are all the options for the Image Module. Click the Preview Draft button to view your changes.

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