...
We have developed two page template solutions to make the process of creating a staff directory easier. Each page offers a different solution that allows users to filter directory content. Use this page to browse directory page styles.
Table of Contents
Table of Contents |
---|
...
Directory Page Template Overview
There are two types of directory pages. One features a on-page search functionality and the other utilizes the CubePortfolio library to add sort functionality. There is also a sample profile page if there is a need to create a consistent presentation of faculty and staff profile content. You can preview all of the directory page templates on our demo website.
...
The design and layouts depicted in the template examples above and in the demo include sample content and present an overview of layout ideas that are to be used as inspiration for your own web presentation needs.
...
Features of the Directory Page with Search
The directory page with search can be previewed on our Demo website. The search will filter data for any keyword in the profile card (names, departments, titles, etc.). Our recommended card layout is provided when you create a page using this template but you can choose to include additional content or remove the content that is provided.
...
➡️ View additional instructions on how to control cards for the search page in our knowledge base.
Features of the Directory Page with Sort
The directory page with sort can be previewed on our Demo website. The sort buttons will filter based off category. The sort filters can be customized by job type, department, etc. Our recommended card layout is provided when you create a page using this template but you can choose to include additional content or remove the content that is provided.
...
Note |
---|
The initial set up of this template requires knowledge of how to use Bootstrap classes and IDs. |
➡️ View additional instructions on how to control cards for the sort page in our knowledge base.
Features of the Profile Page
The profile page can be previewed on our Demo website. This page is not required but does off a way to present more information about faculty and staff in a consistent presentation. You can easily link the the name of a faculty or staff member to their respective profile pages. Profile pages templates include a Profile Contact Details section to make the editing process easier.
...
Create a Directory Page
In the Site Content tree on the left, click on the folder name where you wish to create the page.
Look for a red plus sign in the topmost header area of the page, and click on Add Content.
From the Add Content menu, click on Add Other Types of Content.
Click on Faculty and Staff Directory.
Select your template style and then select one of the Directory Page templates from the menu.
Include a Page Name. The page name will dictate your URL. You are not permitted to use spaces or special characters. You may use a dash or underscore.
Include the Profile Contact Details.
Fill out the rest of the page content and include related links. At a minimum you should include the link to the Academic Department and College or Reporting Unit.
Click Preview Draft. After previewing the draft, click Submit to save the page to CMS.
The page has been successfully saved to the CMS. You must now Publishyour page.
Info |
---|
It is recommended that you create a new folder for your Directory and name your directory page “index.” There should only be one index page per folder. |
...
Create a Profile Page
Follow steps 1 through 4 above.
Select the Profile Page - Directory template from the menu.
Include a Page Name. The page name will dictate your URL. You are not permitted to use spaces or special characters. You may use a dash or underscore.
Fill out the rest of the page content.
Click Preview Draft. After previewing the draft, click Submit to save the page to CMS.
The page has been successfully saved to the CMS. You must now Publishyour page.
Info |
---|
It is recommended that you link the full name of the profile from the directory page to the profile page. See insert a link using the WYSIWYG editor. |