Skip to content

Image Slider

The “Image Slider” component is built using the Flexslider JQuery toolkit and is a great way to add rich, customizable image carousels to your web page. Below are instructions on how to use the component in Cascade CMS.

Set Up the Folder Structure
The first thing we want to do is set up the folder structure to house all of the different assets that work together to form the image slider. The easiest way to create this folder structure and the necessary assets is to navigate to “New > Image Slider > Image Slider Package”. This method auto-generates EVERYTHING you need to get up an imageSlider up and running quickly!:

Image Slider package

Below is a breakdown of the folders and assets that are included when you generate this package:

image slider package

1.) “_imageSliders” folder: This folder houses your imageSliders. In this case, “imageSlider1”.  (You can name this folder and its imageSlider  whatever you want, but the basic jist is that this folder holds imageSliders).

2.) “sliderImages” folder: This folder houses the images for your imageSlider. You can place as many images in this folder as you want, then selectively include those images in your imageSlider. Go ahead and upload some images by navigating to “New > Image File “. Name your images and upload either by hitting the “Choose File” button, or by dragging and dropping your photos into the specified area. Images for your imageSlider must be 688 px wide, and 324 px tall.

Creating the Assets Individually

Again, by navigating to “New > Image Slider > Image Slider Package”, you can auto-generate all the necessary folders and assets to get started with your imageSlider. However, if you ever need to create these assets individually, here’s how:

The necessary imageSlider assets are:

1.) The “Image Slider Page”:
 This is the page your imageSlider will appear on. To create the Image Slider Page, we are just going to create a regular default page: Navigate to “New > Page”. Name your Image Slider Page, then scroll down to the “Image Slider” area. This is where we attach our ImageSlider to the page!:

Image Slider section

Click “search”, then select your imageSlider. If you haven’t created one yet, proceed to the next step.

2.) The “Image Slider”
 Now that you have associated your Image Slider with your Image Slider Page, it is now time to give your Image Slider some content! To do this, click on your previously created “_imageSlider1” folder, then navigate to “New > Image Slider > Image Slider”. Name the imageSlider however you like, then adjust the settings for your slides:

The imageSlider form takes several elements:

a. Inline Metadata

    • Display Name – For our example (next page), we used “News Slider.”  This is just for references and will not be seen outside of Cascade
    • Title – Another unseen field.  Can be the same as the Display Name

b. ImageSlider

  • Slide – There can be multiple articles.  Each “News Article” corresponds with a different slide in the imageSlider.
    • Slide Link – an Internal or External Link you have created (or no link at all)
    • Top Banner Image – one of the images you have previously uploaded
    • Image Alt Text – Required descriptive text for accessibility purposes
    • Headline – the main headline for the article.  Should be short, 150 characters max
    • Subheading – A subheading for the article, no more than 200 characters

Inline and Slide Link sections

c. To create additional slides, click the “+” that appears directly below the “News Article” heading:

News Article section

d. Once you have created all of the news slides, hit the “Submit” button.

View Your imageSlider on a Page

1.) Navigate back to your Image Slider Page and preview your imageSlider

2.) Click on your Image Slider Page. You should immediately see your new imageSlider on the page preview. If you don’t, please go back through the steps and ensure you didn’t miss anything. Don’t forget to publish your
Slider Page!

Image Slider

Download PDF