海角社区

Skip to Main Content
Cascade CMS
twoColumn twoRight handbook

Photos and Files

Uploading Photos

Inserting a Photo or Image

  • Upload your image by clicking Add Content.
  • In the side bar select Upload Image.Cascade add content side bar menu
  • 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.
  • Click on the three dots in the top right corner and submit your image.Image upload tab in Cascade
  • 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.Insert/edit image icon
  • A small window will appear with a 2 tabbed menu. Choose the General tab.insert edit image window box
  • 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.

info icon 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.

Adding Photos to your Page

  • 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.Insert/edit image icon
  • A small window will appear with a 2 tabbed menu. Choose the General tab.insert edit image window box
  • 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.

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.

Making an Image Responsive

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.Insert/edit image icon
  2. While you are still in the Insert/edit image window, go to  Styling and select responsiveImageinsert edit image box with responsiveimage highlighted
  3. Or click on the image that has already been inserted and go to Formats then select the option for  Custom and choose responsiveImage.formats menu with custom and responsiveimage highlighted

Helpful Image Sizes

info icon Cascade will not resize images for you, you should resize your images with a photo editor prior to uploading. 
      • Banner images should be 1600 px wide and the height can range from 300 to 550 pixels tall. If you want to be able to see your first heading without scrolling, limit the height to 500 pixels or less.
      • Contact Page and the Slider of Three images are 200 x 200 pixels.
      • Menu images are 225 x 195 pixels
      • Parallax Images - please contact our office for assistance.
      • Pop-up Slider images are 350 x 350 pixels.
      • Image Blocks and Social Feed images are 320 x 320 pixels.
      • Sponsor Slider images are 200 x 50 pixels.
      • Teaser Thumbnail images are 450 x 300 pixels.
  •  

If you need assistance with Photoshop or a recommendation on a free photo editor, please contact Web and Digital.

Documents

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.

 

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

Videos

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.play video 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 html code 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="" title="Name of video"</iframe>