Image Modules

Table of Contents




Image Modules

Click here to view an example of an Image Module.

An image module has the following fields:

Image Source
Make sure to upload your image before creating your image module. Images should be 620x460.

How to Upload an Images

Image Description (alt)
This describes the subject matter of your image. It is the image alt (alternate) text for accessibility.

Title
Add a title to the image.

Subtitle
Add a subtitle to the image.

Image Caption/Blurb
Additional content to display under the image.

Open URL in...
Same window opens the link in the same browser tab and same windows when a user clicks on it. New window opens it in a new tab.

Internal URL
Browse to a page internal in Cascade if you want your image to link out to a web page. If you use this field, do not use External URL.

External URL
Use this field when you want your image to link to either a page external to Cascade or to a video. Be sure to use the full URL. If you use this field, do not use Internal URL.

Is this a video URL? 
Make sure to toggle this to Yes if your external URL is to a video. This will tell the browser to open your video in a lightbox. This should only be used when including an External URL. If you are embedding a video from YouTube, be sure to use the Embed Link rather than the Source URL or the entire Embed Code.

Color
If the option for Is this a video URL is marked as Yes, then this modifies the color of the play icon that overlays the image on the page. Options for White, Gray (medium), Gray (dark), and Black can be selected to provide greater contrast with the still image.

Video Types

There are three types of video codes that are used in Cascade. The difference between Source URLs, Embed Codes, and Embed Links are covered under the section on Videos.

When using an external video in the Image Module, only use the Embed Link.

To get the embed link, there are two ways to accomplish this. You can use whichever way seems easiest.

Option 1

Take the video URL like this example:

https://www.youtube.com/watch?v=Lkz7Iyt2Gt8

... and replace watch?v= with embed/ so it becomes

https://www.youtube.com/embed/Lkz7Iyt2Gt8

... or you can use method 2.

Option 2

Go to the video on YouTube.

Right-click on the video to bring up the shortcut menu.

Select "Copy embed code."



This will copy code to your "clipboard" (content on the clipboard is what is pasted when doing a copy & paste). It looks like the following:

<iframe width="854" height="480" src="https://www.youtube.com/embed/Lkz7Iyt2Gt8" frameborder="0" allowfullscreen></iframe>

The only part that Cascade needs from that embed code, is the actual source. You can find it between the quotes after src=. In the example above, all that's required is https://www.youtube.com/embed/Lkz7Iyt2Gt8.

Copy and paste ONLY that portion of the embed code into the External URL field for the video in Cascade and you'll be good to go.