Web Services Blog

Cascade Upgrade

School of Accountancy homepage edit screen
Screenshot of content editor in the new version of Cascade Server

OWS recently completed upgrading the Cascade Server content management system service to version 8.1. This long-awaited upgrade allows us more functionality, a new UI with a faster feel, as well as the ability to easily locate documentation.

If you experience any issues with your content please reach out to ows@g.clemson.edu and we’ll help you sort it out.

Cascade CMS Knowledge Base can be found here at hannonhill.com/cascadecms/latest

Customize your lists

You need to create an ordered or unordered list and you are tired of seeing the same old list characters like the ones below.

  • line one
  • line two
  • line three
  1. line one
  2. line two
  3. line three

How can you customize your lists?

Apply list styles like these:

  • circle
  • square
  1. lower alpha character
  1. upper alpha character
  1. leading-zero
  1. lower roman numeral
  1. upper roman numeral

by doing this:

<ul class=”circle”>
<li>circle</li>
</ul>

<ul class=”square”>
<li>square</li>
</ul>

<ol class=”lower-alpha”>
<li>lower alpha character</li>
</ol>

<ol class=”upper-alpha”>
<li>upper alpha character</li>
</ol>

<ol class=”decimal-leading-zero”>
<li>decimal leading zero</li>
</ol>

<ol class=”lower-roman”>
<li>lower roman numeral</li>
</ol>

<ol class=”upper-roman”>
<li>upper roman numeral</li>
</ol>

Create a reference asset

Suppose you have an asset in Cascade you want to display in the left navigation of more than one site. You can copy the asset over and over again into each of the folders for the site, but you don’t want to duplicate an asset multiple times. What do you do? Create a reference asset! A reference asset is a special asset in Cascade that represents an existing asset in another location. This means a single asset can appear to exist in multiple locations.  The asset will appear in the left navigation as if it had been copied to multiple folder but in actuality, it just links to the original asset.

To create the reference:

  1. Select the page you want to create a Reference for from the asset tree.
  2. Go to the Advanced menu and choose Reference. The Reference window is displayed.
  3. Enter a system name for the reference. The system name should be different from any other asset in the same folder as the reference asset. The display name of the asset being referenced will be retained. You may change it after the reference has been created.
  4. Navigate to the folder where the reference will be displayed. Submit the asset.
  5. The Reference is now created!

Notice the reference asset in the asset tree. Select the reference asset and the referenced page will be displayed.

Home page feature – rotate image on refresh script

This is how to add rotating images to the feature area on your home page.

Create a new text file and copy the content in red below into it. Save the file as rotateImageOnRefresh.js and upload it to Cascade. Place it in the same folder as your index page.

<!-- SET THE MAX FEATURE COUNT (Total -1) -->
var maxFeatureNo = 4  <!-- 5 total - 1 = 4 -->

var featureNo
var myFeature = new Array()
<!-- CHANGE img src= to the file path of your image --!>
<!-- MAKE SURE YOU HAVE ONE FOR EACH FEATURE IMAGE -->
myFeature[0] = '<img src="images/features/01.jpg" width="688" alt="Put your ALT tag here" border="0">'

myFeature[1] = '<img src="images/features/02.jpg" width="688" alt="Put your ALT tag here" border="0">'

myFeature[2] = '<img src="images/features/03.jpg" width="688" alt="Put your ALT tag here" border="0">'

myFeature[3] = '<img src="images/features/04.jpg" width="688" alt="Put your ALT tag here" border="0">'

myFeature[4] = '<img src="images/features/05.jpg" width="688" alt="Put your ALT tag here" border="0">'

<!-- DONT TOUCH --> featureNo = Math.round(Math.random() * maxFeatureNo) document.write(myFeature[featureNo])

<!-- IF NOTHING DISPLAYS ON THE PAGE THEN SOMETHING IS WRONG -->

Edit your index page. Copy the following content in red where you want your images to be displayed.

<script src="pathToFile/rotateImageOnRefresh.js"></script>

Submit your index page. Publish the rotateImageOnRefresh.js file, your index page and all the images that will rotate when the page is refreshed.

Create a link to an email address (mailto: link)

The WYSIWYG editor does not have a built-in mailto: option but you can still easily create a link to an email address.

  1. Highlight what you want to become a link (preferably the person’s name or their full e-mail address spelled out).
  2. Choose the Insert/Edit link button from the WYSIWYG toolbar.
  3. Choose the External Link tab.
  4. In the Link field enter mailto: followed by the e-mail address (mailto:web_services-l@clemson.edu).
  5. Add a title to describe the link (Email Web Services).
  6. Choose the Insert button.
  7. Choose Submit.

Insert and upload at the same time

You can upload a file into Cascade as you are inserting it into your page. (Be sure the appropriate extension is part of the file name: pdf, .jpg or .doc.)

Insert an image:

  1. Click inside the content region where the image will be placed. For example, if you would like the image to be in line with the top of the text, you will place your cursor before the first sentence.
  2. Choose the “Insert/Edit Image” icon  from the WYSIWYG editor.
  3. Click the file chooser icon.
  4. Select the folder where the image will be saved (such as the image folder). The Upload option is now available from the Browse menu in the upper left corner.
  5. Click Upload.
  6. Select the image to be uploaded and choose Open.
  7. The Select File box in Cascade will contain the path of the file you have chosen to upload.
  8. Choose the Upload button.
  9. Choose the Confirm button and confirm that the file has been uploaded to Cascade.

Inserting a link:

  1. Select the text or image to link from
  2. Choose the “Insert/Edit link” icon  from the WYSIWYG editor.
  3. Click the page chooser icon.
  4. Select the folder where the file will be saved (such as the documents folder). The Upload option is now available from the Browse menu in the upper left corner.
  5. Click Upload.
  6. Select the file to be uploaded and choose Open.
  7. The Select File box in Cascade will contain the path of the file you have chosen to upload.
  8. Choose the Upload button.
  9. Choose the Confirm button and confirm that the file has been uploaded to Cascade.

What are the display name, title, keyword and description?

Display name
This is the information used as a breadcrumb trail and in the left navigation. When adding the Display Name, consider how the name will affect the breadcrumb trail and navigation performance. A very long display name will cause text to wrap to multiple lines in the left navigation.

Title
This is the name that appears as the headline in your page and at the top of the Web browser window when viewing the published page. This is also the name that is recorded when someone bookmarks your page. The title plays an important role in Search Engine Optimization (SEO). The title should describe what your page is about, in just a few words. Spaces and upper case are acceptable. Avoid generic page titles such as “Welcome.”

Keyword
Keywords are also used by search engines to return accurate search request results.

Description
Descriptions are snippets of text, displayed below the links on search results pages, that provide details about the results.

Align text around an image

Images can be placed either before or after your text has been added.

  1. Click inside the content region where the image will be placed. For example, if you would like the image to be in line with the top of the text, you will place your cursor before the first sentence.
  2. Choose the “Insert/Edit Image” icon  from the WYSIWYG editor.
  3. Choose the internal tab to insert an image from Cascade. You can also upload images to Cascade during the insert image process.
  4. Select the file icon to browse to the image folder.
  5. Select the image  and choose confirm.
  6. Add the alternate text for the image including “Clemson University, Clemson, SC” at the end of each entry.
  7. Do not enter anything in the width/height boxes since your image should already be sized correctly.
  8. Choose insert.

The image alignment styles are available from the WYSIWYG editor’s Styles drop down menu.

  1. Select the image you have placed on your page.
  2. Select the Styles drop down menu from they WYSIWYG editor’s top row.
  3. Select the left or right style.
  4. Submit the page.

The left and right styles automatically add the correct amount of vertical and horizontal spacing around the image so you don’t have to do anything extra to add that. The left and right styles do not however, add a border around the image. To add a border around your image you must edit the html.

  1. Take your page into edit mode
  2. Select the html button from the WYSIWYG toolbar to bring up the html editor
  3. Find the paragraph tag in front of the image tag – it should look like this: <p><img
  4. Edit the paragraph tag and insert the border information – it should look like this: <p><img
  5. Select the Update button to update the html
  6. Submit the page