Editor Session: Handout

Transcription

1 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 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 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

2 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 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

3 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

4 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 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

5 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

6 7. Click Save. 8. Publish the asset. 6

7 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

8 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 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

9 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

10 7. Click the button to add the two check boxes. 8. Fill out the Messages section as shown below (6). To generate the dynamic From field, type {{ followed by any letter and select the address text in the popup. 10

11 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

12 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

13 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

14 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

15 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

16 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_stud y 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

17 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

18 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

19 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

20 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 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

21 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 Inser t and then Ok. 21

22 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

23 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

24 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