Editor Session: Handout

Uploading Images and Documents

Images or documents (PDF, Word, etc.) are uploaded via the Content->Pages view. The easiest way to upload images and documents is by dragging and dropping them.

1. Open Chrome and type http://www.sc.edu for the URL and login to OU Campus. Select site “outraining” from the site dropdown.

2. Open a second tab in the browser and type http://www.sc.edu/oucampus/workshop. Click on the Google Doc link for the Editor Workshop Handout.

3. Navigate to the location where the image should reside (1) – either the “images” folder or one of its subfolders.

4. Click the “Upload” button (2). Images can be uploaded by dragging and dropping (described below) or by clicking the “Add” (3) button in the upload window and selecting one or more files to be uploaded at the same time. Steps 5-7 below are the same for both methods.

5. Navigate to a folder on the local computer and select one or more files by clicking on the files while holding down the Ctrl key.

6. Make sure the cursor is on the browser tab for OU Campus. Drag the files into the browser icon in the taskbar and then into the Upload window or directly into the Upload window.

7. Hover over each file and click the “Rename” button (4) for each image/document if its file name is NOT lowercase or has spaces or special characters. Type the new name and move the cursor outside the name box.

1

8. Click “Start Upload” (5).

9. Publish the uploaded image.

Before uploading an image, make sure it has the correct dimensions for its type - see page 25 of the Style Guide (available from the “Add-Ons” tab in OU Campus). If the image exceeds 500 KB, it cannot be uploaded. Visit http://sc.edu/toolbox/CMS_training_videos.php and view the video “Preparing Images for the CMS” to learn how to reduce the image size without compromising its quality.

Creating an Asset The setup wizard will change based on the type of asset but there are common fields for all assets. To create an asset:

1. Access the asset manager by clicking on the “Content” tab and selecting the “Assets” option.

2

2. Click the “New” button .

3. Choose one of the four available asset types from the list: Web Content, Plain Text, Image Gallery, or Form.

4. Provide unique “Asset Name” that will appear in the asset manager. Make sure the name

is unique and one you can remember or you will have difficulty identifying the asset later on.

5. Provide a “Description” of the asset. The asset description is not displayed anywhere except in OU Campus and is useful for other site editors that may need to update the same asset.

6. ALWAYS make sure the “Lock to site” (1) checkbox is selected to make the asset invisible to other sites in OU Campus and prevent other users from modifying it.

Be sure to lock assets to the site. Otherwise, users who may not have access to this site, will still be able to see, edit, and use the asset as it will appear on all sites in OU Campus.

3

Creating an Image Gallery Asset In addition to the common fields in the asset manager, there are additional "Images" and "Gallery Options" sections.

1. Repeat the steps from “Creating an Asset” selecting “Image Gallery Asset.”

2. Click the “Create” (1) button to begin adding images. The “Images” section will appear.

3. Navigate to http://www.sc.edu/oucampus/images.zip and download the images to the Desktop. Hold down the ‘Ctrl’ or ‘CMD’ key to select all images.

4. Drag and drop the images inside the icon for the active browser in the taskbar and then inside the “Images” section of the asset. Alternatively click the “Add” button inside the “Images” section to add the images without dragging and dropping.

5. Provide a description for each image in the third text box, “Caption”(2) field. The rest of the fields are not currently used.

4

Gallery Images Captions gallery_olympics_spte_students.jpg (with Olympic rings) Posing underneath the Olympic rings, these HRSM students visited venues across the United Kingdom and Ireland during a spring break trip abroad. gallery_milan_fashion_students.jpg (group inside building) Where better to learn about fashion than in Milan? This group of HRSM students took some breathtaking photos while on their food and fashion of Italy trip. gallery_england_palace_gates_students.jpg (group in front of gate) HRSM students take a minute to pose in front of England’s famous Buckingham Palace gates on their spring break trip visiting venues across Ireland and the United Kingdom. gallery_punta_cana_hrsm_students.jpg (group on boat) Delving into the depths of the Caribbean, this group of HRSM students got to experience all that Punta Cana had to offer.

6. Scroll up and choose “Crop” (4) for the “Thumbnail Aspect Ratio”. This will ensure all

thumbnail images in the gallery are the same size. Click the ‘‘Set” (5) button opposite the “Maximum Thumbnail Size.” Leave dimensions as 100 by 100 px unless the asset will be used in a single image gallery callout. In latter case, type 465 in the 'W' and H' text boxes. The thumbnail images will be generated by OU Campus.

5

7. Click “Save”.

8. Publish the asset.

6

Form Asset

1. Repeat the steps from “Creating an Asset” selecting “Form Asset” (1).

2. Begin creating the form elements by either dragging the desired element type into the

“Elements” section or clicking its sign.

The "Name" field will be generated dynamically and does not have to be typed.

7

3. Select “Single-Line Text Field” and type “Full Name” for the “Label.” Fill out the rest of the information as shown below (2). Do NOT type over the Name text box since it will be generated dynamically.

4. Select “Single-Line Text Field” and type “Email Address” for the “Label.” Fill out the rest of the

information as shown below (3). Do NOT type over the Name text box since it will be generated dynamically.

5. Select “Single-Line Text Field” and type “Company” for the “Label.” Fill out the rest of the information as shown below (4). Do NOT type over the Name text box since it will be

8

generated dynamically.

6. Select “Checkboxes” and type “Interested in hiring” for the “Label.” Fill out the rest of the information as shown below (5). Do NOT type over the Name text box since it will be generated dynamically.

9

7. Click the button to add the two check boxes.

8. Fill out the “Email Messages” section as shown below (6). To generate the dynamic “From” field, type {{ followed by any letter and select the emailaddress text in the popup.

10

9. Fill out the “Form Settings” section as shown below (7). Make sure that the “Save Results in Database” checkbox is selected.The Success and Failure Message text areas CANNOT be left empty.

10. Publish the form asset.

Form Callout

1. Navigate to “internships” from the “study_training-{yourlastname_yourfirstname}” section via the “Content” tab and and click on the ‘index.pcf’ page.

2. Access page properties by: a. Clicking the light bulb (1). b. Clicking the “Properties” tab (2).

11

c. Select the “Callout Column” and “Local Callouts” checkboxes (3).

d. Click Save

3. Click the grey “Edit” tab at the top.

4. Access the callout editable region by clicking the right “Edit” button above the orange text

“Callouts are enabled but none has been added.”

5. Insert a form callout (4). Category: Industry Partners Headline: Put us to Work for You Description: We're always looking for industry partnerships. Let us connect you with students or graduates who can fill your need for quality interns or dedicated employees.

12

6. Click the icon and insert the form asset created earlier inside the “Managed Form Asset” (5) cell.

7. Save the changes and publish the page.

8. Submit the form on the published page OUTSIDE OU Campus.

9. Choose “Assets” from the “Content” tab. Click on the “Modified” column to show the most recent assets at the top. Click on the form asset created earlier and then on “Form Submissions”. The form submissions will appear.

Image Gallery Callout

1. Navigate to “internships” from the “study_training-{yourlastname_yourfirstname}” section via the “Content” tab and and click on the ‘index.pcf’ page. .

13

2. Insert an Image Gallery Callout OR Single Image Gallery Callout.

3. Click the icon and insert the image gallery asset(1) created earlier

4. Click the to save the changes and preview the page . 5. Click on a thumbnail to view the image gallery.

Quick Fact Callout

1. Access the callout editable region in the study_abroad section. 2. Insert a quick-fact callout (1).

Category: Study Abroad Headline: See the World Number: 62% Description: Of our students study abroad before they graduate

14

Place the cursor in the 'Quick Facts' table, right-click and select Row->Insert New row (2) to add additional rows to the snippet table.

3. Click the to save the changes and preview the page.

Creating a New Section

15

The new section template creates a new directory with an index page, a left navigation file, and a section properties file.

1. Click on the “Content” tab.

2. Navigate to the assigned “study_training-{lastname_firstname}” section and click on the “New” (1) button.

3. Select the “New Section” template (2). The new section form will appear. Provide information in its fields as described below:

● Folder Name (3): used to create the site directory structure and will be visible in the

URL. It should be lowercase letters with no spaces or special characters: Type: areas_of_study

● Section Title (4): serves several purposes and is visible on the live site. Creates the following elements:

○ The main page title for the index page of the new section.

○ The path to this section in the breadcrumb.

○ A link in the left navigation.

16

Type: Areas of Study

● Index Page Keywords (5): type one or more meta keywords separated by comma.

● Index Page Description (6): type the meta description for the index page.

● “Index Page Type” (7): Select the page type for the index page of the new section. Choose Grid Page.

● “Intro Paragraph” (8): Select this checkbox to enable an introductory paragraph for the new section’s index page.

● “Local Callouts” (9) and “Callout Column”(10) Do NOT select. Callouts are not used with grid pages and the callout region will NOT be enabled even if these checkboxes are selected.

17

● Index Page Banner section (11). Leave as it is. No banner images are used on grid pages.

4. Click "Create." A preview of the page will appear.

5. Click the "Edit" tab and access the main editable region.

18

6. Update the first image grid item.

a. Delete the placeholder image in the first row and click on the icon. Navigate to the image /images/grid_images/area_study_grid_international.jpg.

b. Type International Travel in the “Title” column and Enhance Foreign Culture in the “Description” column.

c. Click the and insert the image gallery asset in the "Link or Asset" (12) column.

19

7. Update the second image grid item.

a. Delete the placeholder image in the second row and click on the icon to navigate to the image /images/grid_images/leehong_video.jpg.

b. Type Learn by Studying Abroad in the “Title” column and Learn about one student’s experience in the “Description” column.

c. Visit YouTube https://www.youtube.com/watch?v=AjGA6MyXe5Y and generate the streaming link (13) after clicking on Share, Embed, and copying the string after “src=”

d. Highlight the word “Link” (13) in the “Video Link” column. Click the icon and paste the copied URL in the “Link URL” field. Click ‘OK.’

20

8. Update the third image grid item.

a. Delete the placeholder image in the third row and click on the icon to navigate to the image /images/grid_images/ grid_main_frame.jpg.

b. Type Internships in the “Title” column and Many Internships are offered every year in the “Description” column.

c. Highlight the word “Link”(14) in the “Link or Asset” column. Click the and then

to navigate to the “internships” section in the {yourlastname_yourfirstname} directory. Click “Insert” and then “Ok”.

21

Creating a Callout as a Web Content Asset

When the same callout would be displayed on more than one pages, the best way is to create it as a web content asset.

1. Access the callout editable region in your study_training_{mylastname_myfrstname}/study_abroad section.

2. Change the color for the “Contact Information” callout if desired.

3. Place the cursor inside the “Contact Information” callout and then click on “table” (1) in “Path:”. The entire snippet table will be selected.

4. Press Ctrl+X on the keyboard to cut the snippet table.

5. Choose “Assets” from the “Content” tab to access the Asset Manager.

6. Repeat the steps from “Creating an Asset” selecting “Web Content Asset.”

7. Don’t forget to select the “Lock to Site” check box.

22

8. Place the cursor inside the “Asset Content” text area (2). Press Ctrl+V to paste the snippet table. This is one of the few instances where you do NOT want to paste as text.

9. Click on the icon (3).

10. Remove mce-item-table and the space after “info” (4) and click “Update”

11. After the change is made the source code should look like the one below:

23

12. Click “Create”(5) .

13. Publish the asset.

14. Access the callout editable region in your study_training_{mylastname_myfrstname}/study_abroad section and insert the web content asset (6).

24