Basic Training: How to Build a Test Site in Cascade – Part One

Posted on February 12, 2019 by svb458

STAs, learn how to populate the content in a Cascade site, and how to use the COLA Web Editor for news, events and faculty/staff photo IDs!

The purpose for this practice is to familiarize yourself with components of Cascade. This will prepare you when edits are needed for COLA departments, which you’ll be able to make now that you have administrative access to both editors. It is also a practice of systematically laying out a design with a theme and style in mind.

EDIT/DESIGN content for your own Cascade site! It will be based on a theme of your choosing or about you.

  • TRAINING RESOURCES
    BASECAMP COMMUNICATION
    • Ask your STA buddies for feedback on basecamp
    • Ask your STA buddies for help if you cannot find the answer through the Chat-bot.
    • Post links to your Basecamp To-Do from your Cascade test site each time you finish a couple of tasks.
    CASCADE TEST SITE

STA here is your task:

1. ADD IDENTITIES (2 logos)

Steps:

  1. Navigate to the directory: units/sta-1/unit_info_laits_only.

2. Press ‘Edit’ at the top of the page (picture below for reference). You will be changing the logo_official and logo_identity images.

3. For the logo_official, use the UT word mark image stored at: units/_internal/images/cola_deptbranded.jpg It will automatically be positioned in the top left corner of your Cascade site after you add it.

4. Then you also need to add the identity icon, the “STA” logo image at: units/_internal/images/identity/identity_sta.gif. It will automatically become positioned in the top right corner of your site, after you add it. 

2. MAIN IMAGE (the banner or hero image) 

Change out the generic placeholder banner that is already in Cascade. Your banner design should relate to the content you “make-up” for this site that you are creating in Cascade.

Steps:

  1. Make your own banner in PS or other photo-editing software

2. Upload your own  870×385 banner image, that you designed, into the Cascade site folder called: units/_internal/images/banners/sta-test-site-banners

TIP: Hover over the folder you want to access. Then click on the small arrow that appears to the right of it.

3. Go to your own Cascade site training folder (sta-1, sta-2, etc.) and hit “index”

4. Hit the “edit” icon (located in the  top horizontal menu)

5. Change the “section” drop-down menu, to say “main image”

6. Navigate to the banner image you uploaded & load your new banner image

7. Then, add text to your banner THROUGH CASCADE like this:

  • Type in text headline that says “This is an STA Training Site”
  • Type in text sub-head that says “This is [your name] practice site”

8. Hit the “submit” button

9. A publish button will appear that you need to press afterwards to make the changes live.

10. Link to your STA blog with a screenshot of progress and do the same for Basecamp as well.

 

 

OTHER TASKS:

Note: Different sections of the index can be accessed by the ‘select-section-to-edit’ field in the Edit popup.

3. EVENTS (body-content)

News/events won’t be displayed in the body of a website until you go to Cascade, which is also where you choose the number of news and events that will be displayed.

  1. Gather all 4 images for your events right now before starting and editing them to the dimensions of (282x188px).
  2. Navigate to the COLA Web Editor (https://webeditor.la.utexas.edu/). You will be asked to sign in with your UT EID and password
  3. Find the section on the dashboard that corresponds with your STA-# folder in Cascade.
  4. Select ‘events’ from the bottom bar.

5. Press the ‘add’ button in the top right corner to add a new event. 

6. Check to see if your events are working at your test link: https://liberalarts.utexas.edu/sta-#/. Remember to replace the ‘#’ in the link with your appropriate folder number.

4. NEWS (body-content)

News/events won’t be displayed in the body of a website until you go to Cascade, which is also where you choose the number of news and events that will be displayed.

  1. Gather all 3 images for your events right now before starting and editing them to the dimensions of (282x188px). (optional reading: http://liberalarts.utexas.edu/web-admin-help/graphics/news-and-events.php)
  2. Making news stories is similar to making events. See the instructions above for reference.
  3. Go to Units > sta- (your #) > index and click to edit the page. When you open the edit box, make sure your settings show both the News & Events page. (Shown in photo below)

4. To make sure that your news events show up refer to Cascade. This is done by adding a max number to news and events. If you don’t do this, it won’t show up in the body when you check your Cascade site.

 

 

5. BODY CONTENT (body-content) — Any extra information beyond news & events.

  1. Find an image and two webpages you want to link. Before starting the other steps open your sta folder > click on “Add Content” > “Upload file or image” > in the placement folder make sure “_files” is under the “Placement Folder”. > CLICK SUBMIT BEFORE LEAVING PAGE OR IMAGE WILL NOT SAVE!

2. Go to edit on your index. Then, navigate to content > content-editor.

3. Use a headline (h2 or h3)

4. Hint: use the ‘Formats’ button to choose a heading within the content-editor

5. Place an image

6. Use a horizontal rule

7. Hint: use the ‘Insert’ button

8. Use a link on an image

9. Use a link on text

 

 

6. RE-ORDER BODY (body-content)

  1. News, Body Content, Events (See the highlighted sections below and reorganize them)

 

 

7. RIGHT SIDE BAR (right-sidebar)

  1. Before starting you will need to place a button for one of the steps. Please find a button of your choosing off the web and save the image to Cascade the same way you did for step 1 in Body Content.

2. Place a YouTube video

3. Give video a title

4. Give video a descriptive paragraph with links (2)

Note: if you video has an error code 102630 (“This video cannot be played”), it is likely that the player has been deprecated. You can work-around this issue by following these steps:

  1. Navigate to the YouTube video you wish to embed, and click “Share.” 
  2. Click “Embed.”
  3. This iframe HTML code will appear. Note the “width” and “height” within the code.
  4. This width will be too wide to be displayed within the right side-bar and therefore will be cut-off. Change the width to 270 and height to 150.
  5. Click “Copy.”
  6. Navigate back to your Cascade site. Click “Edit,” then scroll down to the “Right Column” section. Under “Body Content,” click “Source Code.”
  7. Paste the copied code snippet and click “Ok.”
  8. Save > Submit > Publish. Your video should look like this. Feel free to add text description underneath the video in the Text Editor as well.

5. Place 4 color bar links (2 internal and 2 external). Internal will be to other pages in Liberal Arts and External whatever you choose.

6. Place a graphic button/widget into the arbitrary editor and have it link to your news article. Any button you like from the Web. 

 

 

8. BLOCK: unit_information

  1. Before you begin you will need to upload of photo of Suloni for one of the steps. Go to the box where you find photo IDs and download her picture. Resize it to 90×50
  2. Navigate to the ‘unit_information’ block in your folder

3. Enter your info and another STAs info

4. Create 3 related links (to other STA training sites)

5. Add 3 social media links

6. Make Suloni Chair/Head with a short descriptive paragraph

7. Ignore donations

 

 

9. MAP LINK

  1. Update the ‘Map’ link to your favorite museum location (or the Blanton works)
    1. You will need to go to the ‘unit_information’ block to do this
    2. Place the address in the “address” box shown below
    3. Find your favorite location in Google Maps and copy and paste the link here:

 

10. CONTACT US PAGE

  1. Put fake contact info on the page
  2. Create a mailto link with an email

3. Publish the page and view results

 

 

11. CREATE A NEW FOLDER WITH 2 PAGES (go to: new -> units -> [folder, page])

  1. Select your sta-# folder as the placement folder

2. Set the folder’s display name to “Magic”

3. Create a visible page called “abra” in the folder

4. Create an invisible page called “cadabra” in the folder

  • Invisible means it is published but not included in the index/navigation of the site (you can only get to it with a URL link). Go to the configure tab and uncheck “include when indexing”

5. Publish parent folder of new material

6. Check that folder Magic shows in the navigation

7. Click Magic and make sure only abra page is visible in the navigation of the site. Do not do this on Cascade it will not show. You have to go to the actual live site.

8. Make a link on abra body content that says click here for “neat magic trick” and have it link to the cadabra page

9. Go add something fun in the Cadabra page like so:

 

 

12. STAFF

  1. Add all training STAs to your site as staff using the COLA Web Editor. Staff will be given access to edit your site in the COLA Web Editor, plus they will be publicly displayed on the staff list of your site.
    1. There are two ways to do this:
      1. Click on the staff button beside your test site to add a user, or
      2. Click on the people tab from the drop-down menu and add a new affiliation (choose staff + your office)
    2. If you don’t know somebody’s EID, use this link to look it up: https://utdirect.utexas.edu/webapps/eidlisting/

2. Then add Suloni as faculty to your site. Unlike staff, faculty don’t have access to edit your site, plus they have a full profile page that can be customized.

  1. Click on the faculty button beside your test site to add a user, or
  2. Click on the people tab from the drop-down menu and add a new affiliation (choose faculty + your office)

3. Create a new custom page called Videos using the COLA Web Editor in Suloni’s profile and place/embed a YouTube video.

4. Verify they are up on the site. The video should change every STAs site. If yours changes down the line, it is supposed too. This part of the practice is to know where to go to upload videos in the web editor. 

TRAINING RESOURCES
BASECAMP COMMUNICATION
  • Ask your STA buddies for feed back on basecamp
  • Ask your STA buddies for help if you cannot find the answer through the Chat-bot.
  • Post links to your Basecamp To-Do from your Cascade test site each time you finish a couple of tasks.
CASCADE TEST SITE

This entry was posted in Basic Trainings, Cascade. Bookmark the permalink.

Comments are closed.