Adding Images, CSS, Scripts, and Files in the CMS

Uploading

  1. To complete the configuration and presentation of the web site, the developer will need to upload some additional files. To start, click New | Default | File from the drop down menu.
  2. Enter the file name into the System Name field.
  3. Browse to the folder in the Parent Folder image link to choose a location to where the uploaded file should be saved for use in the CMS.
  4. Leave the File Contents field blank and skip down to the File Upload field. Click on the Browse button to locate the file on your local computer or network. Do not click Submit yet.
  5. Select the Metadata tab from the navigation bar. Complete the applicable portions of the User Metadata fields.
  6. Click Submit. A green bar at the top of the page should indicate the Asset was created successfully.

Creating New Files

  1. To complete the configuration and presentation of the web site, the developer will need to upload some additional files. To start, click New | Default | File from the dropdown menu.
  2. Enter the file name into the System Name field.
  3. Browse to the folder in the Parent Folder image link to choose a location to where the uploaded file should be saved for use in the CMS.
  4. Type or copy/paste the text or code into the File Contents area.
  5. Click Submit. A green bar at the top of the page should indicate the Asset was created successfully.

Inserting Images into CMS-Generated Pages and Blocks

  1. In the Edit tab of the page, place the insertion bar/ mouse point in the location where the image should be added.
  2. While in WYSIWYG view, click on the Insert/edit image photo icon beneath the Format dropdown box.
  3. A dialogue box will appear:
    • Under no circumstances should the External link be used. All images should be uploaded to the Cascade system and used internally.
    • For internal images, click the “Internal” radio button.
    • Click the image link and browse to the location of the desired image.
    • Completing the Alternate Text field is required for accessibility purposes. Provide a brief description of the image.
    • Enter the width and height information in pixels.
    • Click on the Advanced tab.
    • Selection the image’s alignment to the surrounding text.
    • If the picture should have a border around it, indicate it here. A normal border would be ‘1’. Otherwise, leave this field blank.
    • Vertical and Horizontal spacing refers to the white space between the image and the text around it. A suggested spacing might be ‘10’. Otherwise, leave this field blank.
    • Click Insert to proceed.
  4. Click Submit. A green bar at the top of the page will indicate the Edit was successful.
    Insert Image

Images

What is this Render Code in My Image?

Cascade uses its own proprietary pathway code to link to images stored in your site. If you wish to work with the HTML code manually and with the image code specifically, you will see something resembling the following:

<img alt=”URP at night” src=”/images/URPcentercol.jpg”/>

Most of the snippet will look familiar to those who have worked with HTML. If it doesn’t, speak with your Web Content Group liaison. Two portions of this piece of code are of interest: 1) the /render/file.act?path= , and 2) /images/URPcentercol.jpg. The first part is the proprietary code which must be present in order for Cascade to find the image directory, retrieve it and render it properly on the screen. The second part is the image directory created by the developer earlier in this manual.

Troubleshooting–

Once a directory and image are created or uploaded, the information in this line is static and won’t change even if the directory name or image name DO change. If a change is made, remember to review image pathways in your pages, blocks, and templates if they won’t show up.

Linking Images from Cascading Style Sheets (CSS)

Unlike the above code snippet, links to images from .css files are still written in the standardized, relative-path fashion:

#content .banner {background: url(‘../images/urp_banner.png’) no-repeat;}

The above example is based on the file structure as built in this developers’ guide:

– Base Folder
+ _cms
– css
stylesheet.css
– images
urp_banner.png
+ scripts

Anchor Links

In whatever preview screen the content is in, use the mouse to highlight the word or phrase to be used in the link. In the WYSIWYG view, click on the connected chain icon image beneath the Styles dropdown box.

A dialogue box will appear.

  1. For internal links:
    • Make certain the “Internal” radio button is checked
    • Click on the page link icon and browse to the internal file to which this link should point
    • In the Anchor field, type the anchor name
    • Leave the Target dropdown as “same window” unless the system setup requires a new window.
    • Provide a descriptive phrase in the Title field. If “New Window” is chosen for the target, also indicate the link will open in a new window.
    • Leave the Class dropdown as “—Styles—“; the CSS should render this appropriately.
      Internal links
  2. For external links:
    • Click the “External” radio button.
    • Provide the complete url for the Link field.
    • In the Anchor field, type the anchor name.
    • Leave the Target dropdown as “same window” unless the system setup requires a new window.
    • Provide a descriptive phrase in the Title field. If “New Window” is chosen for the target, also indicate the link will open in a new window.
    • Leave the Class dropdown as “—Styles—“; the CSS should render this appropriately.
      External links
  3. Click Insert to proceed.
  4. Click Submit. A green bar at the top of the page will indicate the Asset was created successfully.