OU Campus Training. Part 2

Transcription

1 OU Campus Training Part 2

2 Login to OU Campus To get started you need to login to OU Campus. While work on your website just use the page last updated date located in the footer: This will take you to the OU Campus Login Screen to enter your username and password Advanced Functionalities Part 2 training will go over the advanced functionalities offered by OU Campus. We will go over four topics today: 1. Widgets 2. Assets 3. Snippets 4. Gadgets and Dashboard 2

3 Widgets A Widget is a piece of content that has formatting built in that can be inserted in the right sidebar of one page, multiple pages, or all webpages in the section. Widgets allow you to single source information and make updates in one location. Use a widget when you have one piece of content/information that you wanted repeated on multiple pages. Example Contact Us information in the right sidebar of the Web Support website ( Create a Widget To create a new Widget, follow these steps: 1. Open widgets folder 2. Select the green New button 3. Select a widget from the New Content modal 4. Name widget and click Create a. Remember Filenames are always all lower case with dashes anywhere a space would typically be 5. To add content to a widget, select the green Side Region button or the orange MultiEdit button a. The edit button will vary depending on the widget you have selected 6. Click Save 7. Publish the Widget Insert a Widget There are two ways to insert a widget: Page Properties > Parameters _props.pcf file: The _props.pcf is automatically created with every subsection and controls multiple components of an entire section and its webpages. It is the only file that does not need to be published. 3

4 Page Parameters Insert a Widget via the Page Parameters if you want it to display on a specific page. To insert a widget just follow these instructions: 1. Open webpage you want widget inserted on 2. Check-out the webpage (make the lightbulb yellow) 3. Select Properties in the Page Actions toolbar to access the Page Parameters 4. Scroll to the bottom of Parameters webpage to Sidebar Content a. Make sure the Right Sidebar Region is toggled on b. Browse to the widgets folder and select Widget 5. Select Save 6. Publish webpage _Props.pcf Insert a Widget via the _prop.pcf file if you want the widget to display on all webpages of a specific section. To do so just follow these instructions: 1. Open the _props.pcf file 2. Check-out the file (make the lightbulb yellow) 3. Select Properties to access the Parameters 4. Scroll to the Widgets portion and browse to the widgets folder and select the widget 4

5 5. Select Save 6. The _props.pcf file does not need to be published but webpages affected by the Parameters do a. Don t forget to double check that the right sidebar option is toggled on for those webpages Widget Tips The order of the widgets in the _props.pcf file and/or the Page Parameters determine the order of the widgets on the webpage o Widgets inserted via the Page Parameters will always display above widgets inserted via the _props.pcf file. Don t forget to turn on the right sidebar on every page that should display a widget. If the right sidebar isn t toggled on users will not be able to see the widget or its content. When you edit and republish a widget it updates on all webpages it is inserted on (you do not have to republish the individual webpages) Assets An asset allows you to create and manage reusable content in one location and place that content on an unlimited number of pages within any editable region. When an asset is edited/updated and publish the corresponding webpages are also republished. Example An evaluation form link that is placed on multiple webpages but the Qualtrics URL changes each semester. Create an Asset To create and/or edit an asset hover over Content in the Global Navigation toolbar and select Assets from the dropdown and follow the instructions below: 1. Select the New button 2. Select Web Content 5

6 3. Fill out Asset Info fields a. Name: All lowercase, insert a dash anywhere you would normally insert a space b. Description: Something to help people know what that asset would be used for c. Tags: Make it easier to find the asset in the asset library d. Access Settings i. Access Group: People who are able to edit the asset ii. Available To: People who are able to insert the asset on their webpages e. Content 4. Click create 5. Publish the Asset Insert Asset To insert an asset just follow these instructions: 1. Navigate to the webpage you want to insert the asset on 2. Open an editable content region 6

7 3. Click the Insert Asset icon in the JustEdit Toolbar 4. Find and select the asset from the Asset list 5. Select Insert 6. Click Save and Exit and republish webpage Image Gallery Assets Image galleries are created as an asset and inserted in the editable content region of designated webpages. You can learn more about image galleries in the Web Style Guide: The type of image gallery displayed on the page is set in the Page Parameters via the Gallery Type dropdown under Row and Content Modifications. There are four types of image galleries: Sliding images only Sliding images with thumbnails Sliding images with captions Content slider: This image gallery is a snippet (page 10) Create an Image Gallery 1. Navigate to the Asset library via the Global Navigation toolbar 2. Select the New button and select Image Gallery from the Asset options modal 7

8 3. Fill out the image gallery webpage a. Name gallery b. Add description c. Add tags d. Set Access settings e. Leave gallery options portion as is and click Create 4. The images panel will display below Gallery options, click +Add to select images from your desktop 8

9 5. Drag and drop images to reorder them as well as add captions and alt tag descriptions 6. Click Save and publish image gallery Insert Image Gallery See Insert Asset on page 7 Image Gallery Tips Use images with the same aspect ratio Resize images before creating the image gallery All image must be under 300K in file size Think about where the gallery will be inserted 3 or 4 columns rows are too narrow to properly display image galleries in high quality Video Videos are inserted in editable content regions using the Insert Video icon. All you need is the video URL. Just follow these instructions: 1. Open editable content region 2. Click the Insert Video icon 3. Paste URL in the Source Field and click OK 9

10 When in an editable content region, the video preview will not render properly. However, after you click Save & Exit the video will display the preview and expand (or shrink) to the width of the column it s inserted in. Snippets Snippets are a type of editable content in OU Campus used to organize and format content within an editable content region. When you insert a snippet in an editable content region you will see a table. After you add content and save the changes the table will be stripped and the formatting will automatically populate on the webpage because the Snippet code has become a part of the webpage s html Snippets are a great alternative to formatting needs not met by the Properties > Parameters (see pt. 1 handout) You can learn more about Snippets in the Web Style Guide: Insert a Snippet To insert a Snippet on your webpage just follow these instructions: 1. Open editable content region 2. Select the Insert Snippet icon in the JustEdit Toolbar 3. Select a Snippet from the Snippets list and click Insert 10

11 4. Enter content into appropriate regions 5. Click Save and Exit 6. Publish (or republish) webpage Snippet Tips The phrase Press enter to add more content does not need to be deleted Do not change, add or manipulate the blue portions of a Snippet table You can insert a Snippet inside a Snippet To add additional snippet rows hit tab on your keyboard or right click and select Row > Insert Row Before or Row > Insert Row After To delete Snippet rows right click and select Row > Delete Row Profile Pages A Profile Page is the biography page for an individual faculty or staff member Profile List Page: The preformatted list of all faculty and staff members created when a Profile List Snippet is inserted Profile Group: Assign individuals to a profile group in order to separate them into categories on the Profile List Page. Just assign each group a unique profile group number between 1 and 5. Learn more about Profile Pages on the Web Support site: Requirements and Standards Learn more about Profile Page Standards and Requirements on the Web Support Site: The following regions are required by the Provosts office: Education (do not included date for degree awarded) Academic/Professional Experience Publications 11

12 Research The following regions are optional for Faculty members: Awards and Honors Other Experience Additional Formatting Standards: List only the most relevant or recent 4-5 items PDF format of CV/Resume can be available for full information Create New Profile Page All profile pages much be created in the same section as the profile listing page (aka: index.pcf) with the profile list snippet inserted on it (see below) 1. Select the green New button and select New Profile Page 2. Fill out new Profile Page modal information a. Filename: Lastname-firstname b. Enter first and last name i. If you want to add degree, insert a comma after the last name and add credentials c. Fill out remaining fields i. All are optional so pick and choose as you see fit 3. Click Create 12

13 4. On resulting page select Properties > Parameters (make sure the lightbulb is yellow before selection Properties). The Parameters control: a. Title and Metadata details b. Optional Additional Regions c. Dynamic Profile Page Listing Options: These are the values that will impact how the profile displays on the Profile Listing Page i. Show in Profile List: If this option is toggled on the faculty/staff member will display on the Profile Listing Page 13

14 ii. Add Link to Profile List: If this option is toggled on (or to Alternate URL) there will be a link that says Read More about John Smith iii. Alternate Link field allows you to have the Read More about link go to an already existing profile page iv. Set Profile Group v. Select Sort Value vi. Add optional additional text d. Right Sidebar Content 5. Anytime you make changes to the Page Parameters click Save 6. Select the orange MultiEdit button to: a. Add image (profile images must be sized 160X160) b. Update contact information c. Add (or remove) Mailing address d. Upload vita e. Toggle on/off any editable content regions 7. Any time you make changes to the MutilEdit fields click Save 8. Publish profile page Profile Page Tips Remember there are two places to edit Profile Pages: 1. Properties > Parameters 2. MultiEdit Profile Listing Page The Profile Listing Page is the webpage that displays the list of your faculty and staff members. This list is automatically generated and formatted using the Profile List Snippet. The snippet creates a list of all faculty and staff based on their profile page settings and information. See example below: 14

15 Create a Profile Listing Page To create a profile listing page just follow the instructions below: 1. Open index.pcf webpage of the faculty subsection you have created 2. Open the editable content region 3. Select the Insert Snippet Icon (page 10) 4. Click Insert 5. Set the number of columns (1-3) and Profile Group (1-5) a. Each profile group requires its own Profile List Snippet 6. Select Save and Exit 7. Publish Profile Listing Page (aka: index.pcf webpage of the faculty and/or staff sub section) 15

16 Gadgets Gadgets are little programs that provide additional functionalities and/or shortcuts to additional tools available in OU Campus. Some gadgets are content-specific, meaning they are only available when you view a webpage or are already inside an editable content region. You, as a user, are able to choose which gadgets to display (or hide) in your gadgets sidebar or one your OU Campus Dashboard. Display (or hide) Gadgets in Sidebar To pick and choose which gadgets display in your gadgets sidebar just follow the instructions below: 1. Select the Gadgets icon in the upper right-hand corner this will open the gadgets sidebar 2. Click on the gear icon to select your gadgets 3. Place a checkmark in the box to the left of the gadgets you want to utilize 4. Click Save Experiment with all the gadgets you might find some are useful! Display (or hide) Gadgets on your Dashboard To configure your Dashboard Gadgets, follow the instructions below: 1. Select Dashboard in the Global Navigation Toolbar 16

17 2. Select Configure Dashboard 3. Place a checkmark in the box to the left of the gadgets you want to utilize 4. Click Save Web Communications suggests utilizing the Check-in Gadget it will make checking in all pages checked out to you easy! Additional Training Topics OU Campus Blogs Forms Contributors Getting Help Submit any requests for help via the Request Help Gadget (see pt. 1 handout) Refer to the to the Web Support Site ( and Web Style Guide ( for more information on self-help instructions and formatting tips/tricks. 17