Which of Cascade's SPECIAL FEATURES would you like to learn more about?

Staff Listing/Directory Page - create a page to list all of your staff or faculty with standardized information

1. Before creating a Staff Listing page, you must have a Staff Listing block created.  We recommend creating a copy of the existing block in the block folder (_cms/xhtml/blocks) for each staff listing page.  See "Copying Blocks" below for more information.
2. Fill out the required information for each staff member such as Name, Phone, Position, and upload a photo. Click Save & Preview then Submit once you are finished.

3. Click Add Content - Page - Staff Listing Page.

4.  Find the section on the page called Staff Listing Information.  Click the arrow to open the section.  Leave Display set as Yes.  Add the new Staff Listing Block that you created in steps 1 and 2.

5. The completed staff listing page will look something like this:

Zip Archive - how to upload multiple files in a compressed folder using the Zip Archive.

To use this feature you must first have all the files compressed in a folder via Windows Zip software or Mac Stuffit software.  Once you have completed that step, you can use Cascade's Zip Archive feature to upload the compressed folder.

1. Simply click Add Content - Page > File or PDF or Image where you can upload your compressed file.

2. You will then be asked if you want to extract the file.  Select Yes and then click Unpack.

3. Once your folder has been successfully unpacked, you will be directed to the Zip Archive Report which will inform you if any of your files encountered an error while uploading.  If not, you can then go to the placement folder (named after the folder uploaded) where you can find the files.

zip archive report

Editing Blocks - learn how to edit blocks straight from the page.

Blocks in Cascade version 8 no longer display as icons on the page preview. Instead all share the same icon:  .

In Cascade version 8, the simplest way to edit blocks is through _cms/blocks. However, you can still access and edit blocks through your preview page. Click 'More' and then 'Show Regions.' 

Now as you hover your mouse over areas of the page, the name of the corresponding block will appear as a callout. If you click the call out, it will be selected in the region list. Right click the block to 'Edit'.

You will then be directed to the block's _cms/block location and you will be able to perform the required edits.

Once you have completed the block edit, you will not be automatically redirected back to the page from which you came.  If you want to see your changes on the page, you will need to return to it by clicking 'Site Content' at the top.

Column Layouts - Learn how to create a dividing line and organize your text in either two or three columns

Dividing Line

The dividing line is defaulted to span the width of its containing the div.  It is useful to divide large text into sections.

  1. Begin by clicking Edit.
  2. Once you have clicked where you want the line to be, click Insert - Horizontal Line.
  3. If you want to adjust the width of the line, click the source code and add <hr style="width:50%"> to the <hr> code. Increase and decrease the inline style as needed.

Two Columns

The 2-column layout can be used to run the content of your page in two distinct columns. Using this layout will shorten the length of your page and will display content in a visuallyappealing format.

The content placed in the "left column" and "right column" will appear in the left and right sides of the column accordingly. The sections can be treated as a regular content area (text, images, links, etc. can all be placed).

  1. Begin by clicking Edit on the page.
  2. Select the text you want and click Formats - Custom - left2column.  Then select the other section of text and click Formats - Custom - right2column.

  3. Click Save & Preview and then Submit to see the sections of the page divided into two columns.

Three Columns

 The three column layout can be used to run the content of your page in three columns. Using the three columns provides an option of structuring the content more efficiently. 

  1. Begin by clicking Edit on the page.
  2. Select the text you want and click Formats - Custom - left-3column.  Then select the other section of text and click Formats - Custom - center-3column and Formats - Custom - right-3column.



  3. Click Save & Preview and then Submit to see the text divided into three columns.

Grey Box - learn how to create a grey text box.

The grey box class is an effective way of drawing user attention to a specific message within the body of text, sidebar, or a left nav option.

  1. Click Edit and select the text that you wish to appear in the grey box.
  2. Click Format - Custom - grey-box.
  3. Click Save & Preview and Submit to see the text.

Random box - Learn how to create a random box in the left-nav optional or right sidebar block.

Ideally this is placed in a right sidebar or a left-nav optional block.

  1. Begin by clicking /_cms/blocks/xhtml/left nav optional  or /_cms/blocks/xhtml/right sidebar
  2. Write an optional title to appear above the text before selecting Formats - Custom - grey-box
  3.  Then, go into the Source Code and add the code <script src="js/random-box.js" type="text/javascript" language "javascript"></script> between your title and the final </div
  4. You can find and edit the script in your included js folder on your site. This way you only need to edit it on one page, and the changes will be made to each page that you are using the random-box script.  Your code should look something like this:

    <script>
    var item = new Array ();
    item[0] = "<p>This guy said \"some stuff\"?</p>";
    item[1] = "<p><img src='img/btn/right-banner/Web-Banner-Achieve1.jpg' alt='Help Students Achieve' width='220px' height='400px' class='image' /></p>";
    item[2] = "Western has twelve Faculties and Schools and three Affiliated University Colleges?";
    item[3] = "<p><img src='img/btn/right-banner/Web-Banner-Achieve1.jpg' alt='Help Students Achieve' width='220px' height='400px' class='image' /></p>";
    item[4] = "The University of <a href='www.uwo.com'>Western Ontario</a> is one of the oldest and most beautiful universities in Canada?";
    item[5] = "that Western has five Rhodes Scholars in the past nine years, as well as four Goldman Sachs award winners in the past four years?";


    var i = Math.floor(item.length*Math.random())
    document.write(item[i]);
    </script>
  5. All you need to do is edit the items. You can add as many as you wish, just remember to add the numbers in the square brakets. Also, use the proper format. Use single quotes in any place inside the initial double quotes or it breaks the Script.
    EXAMPLE:
    item[5] = "Western University is getting a new webpage design, check it out <a href='www.uwestern.ca'>here</a>"
    However, if for some reason you need double quotes, for instance you want to put in random quotes by past students, you need to use an escape character, so instead of:
    item[4] = "This guy said "some stuff"";
    it would have to be
    item[4] = "This guy said \"some stuff\"";
  6.  You then can insert the block into the page or confirguation sets.  See "Edit a left nav opt block or right sidebar block" on the Edit page for more information.

Triple Image Slider - Learn how to create and use a triple image slider.

This module allows users to rotate through a set of similarlysized images with / without descriptions, three images at a time. The triple image carousel can be used in the main content area and is most effective for presenting a gallery of news, faculty, staff, etc. All images in the banner should be the same size for visual balance. Only one of these sliders can be used per page. Change images, captions, and sub-captions. Place this code in your main content area.

WARNING : These don't always fit just the way you want, depending on image size, and the container you are trying to place it in. In some cases they need to be customized a little more in which case ask for help from an experienced coder.

  1. Begin by selecting and editing the page that you want to add the slider to.
  2. Click on the Source Code and copy the code below.  
  3. You can then change the images to ones that you have either uploaded previously or is available externally as well as changing the title and description.
  4. Click Save & Preview to view a draft of the page and then Submit if you are happy with the results.

Sample:

<div class="slider-container">
<div class="flexslider carousel" id="triple-slider">
<ul class="slides">
<li><img alt="" height="187" src="https://www.uwo.ca/img/academics/academics-dept.png" /><!--CHANGE IMAGE HERE-->
<h3>Title</h3>
<!--CHANGE CAPTION HERE-->
<p>In tincidunt dictum mi vitae lobortis. Vivamus id urna massa, eu tincidunt mauris.</p>
<!--CHANGE sub-Caption HERE--></li>
<li><img alt="" height="187" src="https://www.uwo.ca/img/academics/academics-dept.png" width="250" />
<h3>Title</h3>
<p>In tincidunt dictum mi vitae lobortis. Vivamus id urna massa, eu tincidunt mauris.</p>
</li>
<li><img alt="" height="187" src="https://www.uwo.ca/img/academics/academics-dept.png" width="250" />
<h3>Title</h3>
<p>In tincidunt dictum mi vitae lobortis. Vivamus id urna massa, eu tincidunt mauris.</p>
</li>
<li><img alt="" height="187" src="https://www.uwo.ca/img/academics/academics-dept.png" width="250" />
<h3>Title</h3>
<p>In tincidunt dictum mi vitae lobortis. Vivamus id urna massa, eu tincidunt mauris.</p>
</li>
<li><img alt="" height="187" src="https://www.uwo.ca/img/academics/academics-dept.png" width="250" />
<h3>Title</h3>
<p>In tincidunt dictum mi vitae lobortis. Vivamus id urna massa, eu tincidunt mauris.</p>
</li>
</ul>
</div>
</div>

Single Image slider - Learn how to create a single image slider.

Good to place in sidebars or bottom social media areas, this module allows users to rotate through a set of similarysized images with / without text descriptions, one image at a time. The images and descriptions should belong to the same information category (i.e. News, Reports, Profiles, etc.).  Only one of these sliders can be used per page.

  1. This code works best as either in the left nav otpional or social media blocks.
  2. Go to the _cms/blocks/xhtml and find either the left nav optional or social media block.
  3. Paste in the code below.
  4. Edit the code, replacing the images with the ones you desire and edit the text.
  5. Click Submit.
  6. Then, go to the page and go to the Configuration Sets and add the block to the correct section.  Visit the Edit page and the "Edit a left nav opt block or right sidebar block" for more information.

Sample:

<div class="grey-box">
<div class="slider-container">
<div class="flexslider" id="secondary-slider">
<ul class="slides">
<li><img alt="" height="187" src="https://www.uwo.ca/img/academics/academics-dept.png" width="250" /><!--CHANGE IMAGE HERE-->
<h3>Title</h3>
<!--CHANGE CAPTION HERE-->
<p>In tincidunt dictum mi vitae lobortis. Vivamus id urna massa, eu tincidunt mauris.</p>
<!--CHANGE sub-Caption HERE--></li>
<li><img alt="" height="187" src="https://www.uwo.ca/img/academics/academics-dept.png" width="250" />
<h3>Title</h3>
<p>In tincidunt dictum mi vitae lobortis. Vivamus id urna massa, eu tincidunt mauris.</p>
</li>
<li><img alt="" height="187" src="https://www.uwo.ca/img/academics/academics-dept.png" width="250" />
<h3>Title</h3>
<p>In tincidunt dictum mi vitae lobortis. Vivamus id urna massa, eu tincidunt mauris.</p>
</li>
</ul>
</div>
</div>
</div>

Image Gallery - Learn how to create an image gallery.

The image gallery presents images in a slideshow-like sequence in an overlay, without sending users to other pages. When users click on one image, it expands full-screen and users can click through or use a keyboard to navigate through the rest of the gallery images. This gallery is fully-responsive, which means that the images will scale up or down gracefully and swipe navigation will be available when viewed on mobile devices.

Gallery 1. An example of 3 images in one row

To Create an Image Gallery

  1. In /_cms/blocks/xhtml/ of your website, create a new block gallery-css
    You might find it easier to copy any of the existing blocks.
  2. In the html mode of the newly-created block, paste the following code:
    <link href="https://www.uwo.ca/web_standards/css/blueimp-gallery.css" rel="stylesheet" />
    Submit the changes
  3. In the page where you'd like to create the gallery, go to Edit > Configure.  In the list of regions, locate Extra Head Code. In the block line link to the gallery-css. Submit the changes.
  4. Create thumbnails of the images that you'd like to place on the landing page. Upload them to Cascade. Upload full-sized images that you'd like to use in the gallery.
    A good rule of thumb is to keep the same name convention for both small and large image with -s.jpg and -l.jpg at the end to differentiate them. For example, sunset-s.jpg and sunset-l.jpg.
  5. In the Source Code window of the page, copy and paste the galler setup code:
    <!-- The Gallery setup. Don't change anything below this point-->
    <!--#passthrough
    <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
        <div class="slides"></div>
        <h3 class="title"></h3>
        <a class="prev">‹</a>
        <a class="next">›</a>
        <a class="closeclose">×</a>
        <a class="play-pause"></a>
        <ol class="indicator"></ol>
    </div>
    #passthrough-->
    <!-- The Gallery. Don't change anything above this point-->

  6. In in the Source Code window of the page, copy and paste the gallery code under the code from step 5:
    <h3 style="color: #06f;">Gallery 1. An example of 3 images in one row</h3>
    <!-- Gallery #1 setup starts -->
    <div class="links" id="links">
    <!--add first image with caption -->
    <a href="http://farm9.staticflickr.com/8665/15613375844_99dc1e5dc0_b.jpg" title="Banana is a great source of potassium. The yellower the banana is, the better for you!">
    <!--add first thumbnail -->
    <img alt="image one" src="https://farm1.static.flickr.com/387/19071027264_92aaa2a2d2_s.jpg" /></a>
    <!--add second image with caption -->

    <a href="http://farm8.staticflickr.com/7501/15812584301_1d63602c58_b.jpg" title="Apples are bruised easily">
    <!-- second thumbnail -->
    <img alt="imshr" src="https://farm1.static.flickr.com/257/19502744658_4020ac67d1_s.jpg" /></a>
    <!-- third image with caption --> <a href="http://farm6.staticflickr.com/5584/15276294205_5a7ffe793c_b.jpg" title="Oranges contain as much vitamin C as three pills"> <!-- third thumbnail -->
    <img alt="Orange" src="https://farm1.static.flickr.com/538/19060161194_89d7b1dfb3_s.jpg" /></a>
    </div>
    <!-- Gallery #1 setup ends -->

  7. Replace the original images with your own and add captions in the title placeholders where needed.
  8. In the Source Code window of the page, add the following gallery declaration script below the code from Step 6:
    <script src="https://www.uwo.ca/web_standards/js/blueimp-gallery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    document.getElementById('links').onclick = function (event) {
        event = event || window.event;
        var target = event.target || event.srcElement,
            link = target.src ? target.parentNode : target,
            options = {index: link, event: event},
            links = this.getElementsByTagName('a');
        blueimp.Gallery(links, options);
    };
    </script>

To create several galleries on one page

  1. For the second gallery, copy and paste the code in Step 6 and the id to "links2" (or 3, 4, 5, etc.)
    <div class="links" id="links2">
  2. Add a second declaration by copying the script in Step 8 and the call from links to links2:
    <script src="https://www.uwo.ca/web_standards/js/blueimp-gallery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    document.getElementById('links').onclick = function (event) {
        event = event || window.event;
        var target = event.target || event.srcElement,
            link = target.src ? target.parentNode : target,
            options = {index: link, event: event},
            links = this.getElementsByTagName('a');
        blueimp.Gallery(links, options);
    };
    </script>
    <script type="text/javascript">
    document.getElementById('links').onclick = function (event) {
        event = event || window.event;
        var target = event.target || event.srcElement,
            link = target.src ? target.parentNode : target,
            options = {index: link, event: event},
            links = this.getElementsByTagName('a');
        blueimp.Gallery(links, options);
    };
    </script>
    <script type="text/javascript">
    document.getElementById('links2').onclick = function (event) {
        event = event || window.event;
        var target = event.target || event.srcElement,
            link = target.src ? target.parentNode : target,
            options = {index: link, event: event},
            links = this.getElementsByTagName('a');
        blueimp.Gallery(links, options);
    };
    </script>

Make one image open a slideshow

There may be cases when you'd like to have one in-page open a gallery/slideshow of images.

To accomplish this:

  • List all slideshow images BEFORE the in-page image, including their locations and captions.
<div class="links" id="links">
<a href="http://farm9.staticflickr.com/8665/15613375844_99dc1e5dc0_b.jpg" title="Banana">
<img alt="something gloomy" data-description="This is a banana." src="http://farm8.staticflickr.com/7501/15812584301_1d63602c58_m.jpg" title="Banana" /> </a>
<a href="http://farm6.staticflickr.com/5584/15276294205_5a7ffe793c_b.jpg" title="Orange"> </a>
</div>

Image Flip Cards - Learn how to create image flip cards.

Note: this script works for all browsers except for IE 9 and lower. You may have up to three flipcards in one row.

  1. In /_cms/blocks/xhtml of your website, create a new block flipcards-css
    You might find it easier to copy one of the existing blocks.
  2. In the html mode of the newly-created block, paste the following code:
    <link href="https://www.uwo.ca/web_standards/css/flipcards.css" rel="stylesheet" />

    Submit the changes.
  3. On the page where you'd like to create the flipcards, go to Edit > Configure. In the list of regions, locate Extra Head Code.
    In the block link to flipcards-css. Submit the changes.
  4. In the source code mode of the page where you'd like the flipcards to go, paste the code below. Make adjustments to customize the card: replace the image with the one you'd like to use, change the text in the <div class="back">, etc.
    <!--first flip card-->
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');" style="float: left;">
    <div class="flipper">
    <div class="front" style="background: url('http://communications.uwo.ca/comms-test/img/eng.png');">
    <p>Discovery Western</p>
    </div>
    <div class="back">
    <p>Discovery Western recently celebrated 25 years of sharing the fun and interesting sides of science, engineering and technology.</p>
    <a class="blue-box" href="http://www.google.com" style="width: 40%; float: right; margin-right: 10px;" target="_blank" title="blue-box example">More</a></div>
    </div>
    </div>
    <!--end of first flip card -->

Discovery Western

Discovery Western recently celebrated 25 years of sharing the fun and interesting sides of science, engineering and technology.

More

Published on  and maintained in Cascade CMS.