Photos and Files

Inserting a Photo or Image

• Upload your image by clicking Add Content.
• In the side bar select Upload Image.
• In the Upload Image window, click the option to choose a file from your computer and select the image you'd like to upload. Once your image has been chosen your file name box will update.
• Check your placement folder for the correct destination. 
• Describe the image you've chosen within the image Title box. All images need a Title (alt tag) to be ADA compliant.
  • NEW ADDITION: If your image is AI Generated, there is a checkbox you can click and mark it with the appropriate tag. An overlay text box will sit on the image and display "AI Generated". 

Example:

• Click on the three dots in the top right corner and submit your image.
• Publish your image.
• After returning to the page you want to insert the image into, click Insert > Image or click on the little picture of the mountains within the editing toolbar.
• A small window will appear with a 2 tabbed menu. Choose the General tab.
• Click Internal. An image that exists with UNF's image bank already is an internal image.
• Click Choose File within the Image Source field to find the image you'd like to use.
• A new window will appear to the right of the screen that generates files from which to choose. If you do not see the file you'd like to choose under Recent, click on Browse and find the folder by scrolling down that menu. You may need to look inside a folder to find your image.
• Once you have selected the image you'd like to use, click Choose at the upper right hand part of the window.
• Decorative images not conveying any meaning can be inserted by clicking on the "Decorative" box.

Both images and other documents are added to Cascade the same way.

Images and files can either be added individually or by selecting multiple items (bulk uploading). If you bulk upload your images, please go back and add in the Title section a description of the image. Submit and Publish again. You will also need to update the photo on all your web pages. All images need a Title (alt tag) to be ADA compliant.

Cascade will not resize images for you, you should resize your images with a photo editor prior to uploading. If you need assistance with Photoshop or a recommendation on a free photo editor, please contact Web and Digital.

• Click on the three dots in the top right corner and submit your image.
• After returning to the page you want to insert the image into, click Insert > Image or click on the little picture of the mountains within the editing toolbar.
• A small window will appear with a 2 tabbed menu. Choose the General tab.
• Click Internal. An image that exists with UNF's image bank already is an internal image.
• Click Choose File within the Image Source field to find the image you'd like to use.
• A new window will appear to the right of the screen that generates files from which to choose. If you do not see the file you'd like to choose under Recent, click on Browse and find the folder by scrolling down that menu. You may need to look inside a folder to find your image.
• Once you have selected the image you'd like to use, click Choose at the upper right hand part of the window.
• Decorative images not conveying any meaning can be inserted by clicking on the "Decorative" box.
• NEW ADDITION: If your image is AI Generated and you want to add to the site, if you scroll the styling custom formats section you'll find an option for genAI. Click on genAI and you should see an overlay text on your image displaying "AI Generated" on your image. 

Example:

Note: Images and files can either be added individually or as a zip file containing multiple items (bulk uploading). If you bulk upload your images, please go back and add in the Title section a description of the image. Submit and Publish again. You will also need to update the photo on all your web pages. All images need a Title (alt tag) to be ADA compliant.

A responsive image will rescale an image that is in a Basic Text Tier to mobile size and back. There are two ways to make a responsive image:

1. Insert an image, click Insert > Image or click on the little picture of the mountains within the editing toolbar.
2. While you are still in the Insert/edit image window, go to  Styling and select responsiveImage. 
3. Or click on the image that has already been inserted and go to Formats then select the option for  Custom and choose responsiveImage.

Uploading Files

1. Click Add Content > Upload File.
2. In the Name field, enter a name for your file. Note: Make sure that the file extension is present as part of the name.
3. In the Placement Folder field, choose the folder where the file(s) should be uploaded.
4. Select one or more files to upload by clicking the Choose link or by dragging and dropping files from your computer into the dotted drop zone...
5. In the Metadata tab (available for single file uploads only), add any necessary metadata for your file (title, author, etc.).
6. Click Save & Preview and > Submit.

Both images and other documents are added to Cascade the same way.

All documents must be certified by the ADA Compliance Office before you can upload them into Cascade.

Inserting Videos

All videos added to the website should be embedded videos, such as YouTube or Vimeo.

If you already have a video posted to YouTube, you can find the embed code on the video's page.

1. Click Share > Embed.
2. Copy the code that appears in the box.
3. Inside the <iframe> Tag look for title="YouTube video player"
   1. Replace YouTube video player with the name of the video.
4. When it is correctly done your code should look like this: <iframe width="560" height="315" src="https://www.youtube.com/embed/S_k1WBX_xe4?si=I8MMTLqaffPv4jrx" title="Name of video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Add The Video To Your Page

1. Navigate to your content item where the video should be added and open the editor
2. Click the Insert/edit media icon.
3. Click the Embed tab.
4. Paste your embed code from above into the box.
5. Click Ok.

Changing Video Size

1. After embedding the video click the carot icon  to view the section source code.
2. Inside the <iframe> tag press space after the word iframe and type class="".
3. Inside the quotation marks type in the class needed for sizing.
   1. Small sized video = video-sm
   2. Medium sized video = video-md
   3. Large sized video = video-lg
4. When it is correctly done your code should look like this: <iframe class="video-md" width="560" height="315" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen" frameborder="0" src="https://www.youtube.com/embed/3hI_z9nFgP8" title="Name of video"</iframe>