Create a Directory Sort Page

The directory page with sort capability 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.

On this page:

 Code Structure Overview

There are two sections of code to keep note of when working with the directory sort page. The filter code section contains the filter buttons and identifies filter categories. The profile card “items” code contains all of the profile cards and their respective details. The cards contain a class that corresponds to the filter categories.

Open

Code Structure

 Filter Code Snippet Overview

The filter capability is powered by the Cube Portfolio jQuery grid plugin. The sample directory page contains an audience based category for filters. You may choose to adopt these categories or create your own. The most important element to note is that every filter category should be included as a unique data-filter attribute and that the unique filter categories for the desired target item is added to it's class attribute.

Open

• Each code filter is included in a <a> HTML element with the class "cpb-filter-item"

• Each category includes the data-filter attribute and the title of the category.

• The All category must include the data-filter attribute of "*" to function properly.

 Instructions

Editing Filters

1. Click on the Source Code <> icon.

2. In the Source code editor, click on the Format Code icon and then Toggle Fullscreen Mode icon to expand the window size.

    

3. Locate the code comments <!--Filter--> to identify the filter section of the code to edit.

4. In each <a> element, locate the data-filter attribute and include a new filter name. Do not remove any punctuation from the filter.

   data-filter=".category-name"

5. Update the text in-between the <a> tags to update the filter button text.

Adding New Filters

1. Follow steps 1 through 3 above.

2. Copy the following code snippet below and paste in the list.

3. Update the data-filter attribute and the button text.
   
   

   <a class="cbp-filter-item btn btn-sm btn-soft-secondary shadow-none py-2 px-3 m-1" data-filter=".category-name" href="javascript:;">Category Name</a>

 Profile Card Code Snippet Overview

Each card item comprised of the following code sections:

1. The Parent Div Wrapper - This the parent element. The parent element contains a series of CSS classes.

   1. Required Classed: cbp-item and category-filter - in the example above the category filter class is “staff”. This is required to trigger the sort functionality.

   2. Design Classed: card, card-bordered and px-2 - are all of the required classes that control the design of the card.

2. The Avatar Image - This is the photo element for the card. To remove the image, select the entire Avatar Div depicted in the HTML Code to delete.

3. The Profile Details - These are the main details for the profile card.

4. The Social Media Buttons - These are optional social media icons. From the code view you can quickly identify this section by the code comment: <!--Social Network-->

   1. To remove all social media links, select all of the code between the code comments to delete.

   2. Social media links use the Font Awesome library.

   3. To link to a social media profile include the full URL in place of the # in the link tag <a href="#">

 Instructions

Editing Profile Cards

1. When adding a Directory Sort page, the content for the sample profile cards are provided in the second row. Click on the Column Content.
   
   

    

2. If you are satisfied with the content provided in the card, you can use the WYSIWYG editor to change the content in the sample cards.

Using the Code View to Edit Profile Cards

1. If you would like to remove content from the card or edit the card using the code view, click on the Source Code <> icon.

2. In the Source code editor, click on the Format Code icon and then Toggle Fullscreen Mode icon to expand the window size.

    

3. Locate the section of the card you would like edit using the code comment notations.

4. If you are removing a section of a card, make sure to remove the entire HTML element.
   
   

Creating New Profile Cards

1. Copy the Code Snippet below to add a card to the list.

2. Include the proper category after the cbp-item class.

3. Edit the sample content.

 Related articles