Portfolio

Here is the process for creating a Portfolio page with filter buttons:

1. Categories, a.k.a. taxonomies (filter buttons). Decide which categories you would like to use for the filter buttons on the Portfolio page, designate a "top-level" (pre-filter) category, and create the categories. These categories may be the category types that are available for each content type (see step #2, below). If you will be displaying a mix of content types in your Portfolio, consider using sitewide Topics as the chosen category, as Topics can be used on all content types.
   
   • The "top-level" category will be used as the pre-filter for the Portfolio (if you would like all of the content items in the Portfolio to connect with the filter buttons). For example, if your Portfolio page will be about fruits and vegetables, your top-level category may be "Produce" (see "Portfolio Example", below). 
2. Content types and items. Decide which content types and items you would like to feature on your Portfolio page. You may create new content items, or choose from your existing content items.  You must use at least one content type for a Portfolio, and you may use several (or all) of the available content types. The following content types are allowed in a Portfolio:
   • Content Page
   • Landing Page
   • News Item
   • FAQ
   • Person (optional feature)
   • Department (optional feature)
   • Publication (optional feature)
   • Service (optional feature)
3. Tag your Content Items. Once you have decided which content items and categories to use, edit your content items to tag them with the categories that you created in step #1. 
4. Featured Image and Summary. Consider adding a Featured Image to your content items If you will be using the "Card" or "Expanding Grid" display options, and consider using the Edit Summary option on the content items if you will be using "Expanding Grid" or "Legacy" display options in your Portfolio.
   
   • See "Display Options" below for examples of "Card", "Expanding Grid", and "Legacy".
5. Create your Portfolio. Select "Dashboard" in the upper left corner, and then select "Portfolio", or hover over "Content" and select "Add Portfolio" from the flyout menu. Follow the steps below to configure the Portfolio. 
   • If you do not see "Portfolio" available as described, please email web-platform@berkeley.edu to request the Portfolio feature for your site. 

Figure 1 (below) shows a Portfolio page using the "Card" display type, with the following content types: Content Pages, FAQs, and News Items. The content items are tagged with sitewide Topics: Produce, Fruits, Vegetables, and other specific produce types (e.g., Apples, Broccoli, etc.). The "dynamic filtering" is by Topics, and the "pre-filter" is the "Produce" Topic.

Since the content items are all tagged with "Produce", and also tagged with other specific Topics, the Portfolio displays the specific Topics as the filter buttons. See Figure 1, below.

Figure 1: Portfolio page with content items tagged with "Produce" and other Topics

Once a site visitor selects one of the filter buttons, the grid of content items will update to only show items tagged with the filter button category. See Figure 2, below, where the "Vegetables" filter button is selected, and content items tagged with "Vegetables" are displayed.

Figure 2: Portfolio with "Vegetables" filter selected

There are three display options available for Portfolio pages:

• Card (photo and title of content item)
• Expanding Grid (photo, title of content item, and expandable/collapsible area with summary)
• Legacy (title of content item and summary). We recommend switching your portfolios to either Card or Expanding Grid to more closely align with the Berkeley Brand standards and harmonize with the rest of your site's content.

The following examples use the "Portfolio Example" above (a Portfolio about fruits and vegetables). 

See Figure 3, below, for an example of the "Card" display. This display utilizes the Featured Image for the photos, which means that a Featured Image should be added to the individual content items:

Figure 3: "Card" display

See Figure 4, below, for an example of the "Expanding Grid" display (one item is expanded). This display utilizes the Featured Image for the photos, which means that a Featured Image should be added to the individual content items. This display also includes a summary, which shows up when an item is expanded. This summary will be generated automatically. If you would like to add your own summary, use the Edit Summary option on the individual content items. 

Figure 4: "Expanding Grid" display

See Figure 5, below, for an example of the "Legacy" display. (This is the original display for the Portfolio feature. "Card" and "Expanding Grid" were added with release 1.0.0.) This display includes a summary, which will be generated automatically. If you would like to add your own summary, use the Edit Summary option on the individual content items. 

Figure 5: "Legacy" display

As outlined above in the "General Process" section, you must have some categories created in one or more "taxonomies". You may choose to use the taxonomy option for an individual content type (if the Portfolio will only feature that content type), or to use sitewide Topics (if the Portfolio will feature multiple content types). The available vocabularies are:

• Topics
• FAQ categories
• News types
• Person types (optional feature)
• Services (optional feature)
• Department types (optional feature)
• Publication types (optional feature)

On the Site Builder dashboard (the "dashboard" link in the upper left corner), you will see a table called "Administer Taxonomy". In this table, the taxonomy type is referred to as a "vocabulary" (e.g., the taxonomy vocabulary for News items is called "News Types", and the taxonomy vocabulary for all content items is called "Topics"). 

Select the "Manage Categories" links to find the categories (and edit them if necessary, if any have been created) for the vocabularies, and select the "Add new category" links to add new categories. When you save, you may be redirected back to the dashboard. See Figure 6, below. 

Figure 6: "Administer Taxonomy" section on Site Builder dashboard

Category Display on Portfolios (Filter Buttons)

By default, the categories are displayed alphabetically as the filter buttons at the top of the Portfolio. You may change the display order of the filter buttons on your Portfolio by going to the "Manage Categories" links in the "Administer Taxonomy" table (as mentioned above), and dragging and dropping the categories into your preferred order. See Figure 7, below.

Figure 7: Drag-and-drop categories on the "Topics" page

As outlined above in the "General Process" section, you will need to decide which content items you would like to feature on your Portfolio page. Once you have determined your category setup (see the "General Process" and "Categories" sections), check that the content items have been tagged with the appropriate categories. You can do this by selecting the "Edit" tab on the individual content items. See Figure 8, below.

Figure 8: Check if a page is tagged with Topics

As outlined above in the "General Process" section, select "Dashboard" in the upper left corner, and then select "Portfolio", or hover over "Content" and select "Add Portfolio" from the flyout menu. (If you do not see "Portfolio" available as described, please email web-platform@berkeley.edu to request the Portfolio feature for your site.) See Figure 9, below. 

Figure 9: Select the "Portfolio" option on the Site Builder dashboard

A brand-new Portfolio will already have some default settings enabled (Content Page, Card display, etc.). When configuring your Portfolio, you will need to enable several settings ("dynamic filtering" and "pre-filter") in order to connect the filter buttons with the corresponding grid of content items. If a pre-filter is not applied, then other content items that are not tagged with the filter categories will show up on the Portfolio page as well. A Portfolio page may also load slowly if there are many content items in the Portfolio with no pre-filter.

Steps for configuring your Portfolio

1. Enter a title and a description.
2. Content Types: Select which content types you want to use in your Portfolio (see "General Process" and "Content Items", above).
3. View Mode: Select a display option (see "Display Options", above).
4. Enable Dynamic Filtering (keep this checked).
5. Allow filtering by: Select which categories you want to use for the filter buttons in your Portfolio (see "General Process" and "Categories", above).
6. Pre-filter by: A pre-filter is not required, but will be helpful for streamlining your filter buttons, and for performance. (More information about pre-filters below). Select which category you want to use for the pre-filter.
   • Only show items tagged with: Once you select a category type, select your top-level category from the drop-down.
7. Default sort: Select how the content items should be sorted in the Portfolio (by Updated Date, Created Date, or Title)
   1. Additional sort options may become available, depending on which Content types are used for the Portfolio. For example, if the Portfolio is only sorted by News Type, then "Publication Date" will become available as a Sort option in this section.
8. Default order: Select either Ascending or Descending. 
9. Number of items to display: This is the maximum number of items to display at once. (Find more information below about performance and the number of items in the Portfolio.)

See Figure 10, below, for a screenshot of the above process.

Figure 10: Configure the Portfolio page settings

If you have selected more than one content type, you will see all of the available vocabularies for the types you've selected. For example, if you choose Content page and FAQs, you will have the option to choose Topics (sitewide) or FAQ categories. Clicking one of the category types will exclude content items that don't use either Topics or FAQ categories.

Pre-Filter

There are two reasons to use a pre-filter on your Portfolio page. If a pre-filter is NOT used:

• Other content items that are not tagged with the filter categories will show up on the Portfolio page as well; and
• The Portfolio page may load slowly if there are many content items in the Portfolio

Once you select the desired category for the pre-filter ("pre-filter by"), a drop-down will show up ("Only show items tagged with"). Select your desired pre-filter (top-level) category from the drop-down.

In general, you may have a different set of sitewide Topics and want to feature only a subset of content items in a Portfolio. You can configure the Portfolio to pre-filter by a specific Topic. The resulting page will only show items tagged with that Topic, and will display filter buttons for other Topics with which you've tagged those items.

You can also choose to use different sets of tags for the pre-filter and the dynamic filter. For example, if you have News types of "Research News" and "Department News," and multiple sitewide Topics that might apply to News of each type, you can create a Portfolio page of News items and pre-filter it by "Research News," then set up the dynamic filter to use Topics. The resulting page will show only News items of the type "Research News," and will display filter buttons for each applicable sitewide Topic.

Portfolio Performance

Depending on which categories and content items you would like to use, the Portfolio may have a large number of content items. In this case, to ensure that your Portfolio page loads quickly, select a number between 12 and 120 in the "Number of items to display" field. The recommended maximum number is 50. 

When the display number is set, there may be more content items available that will not display on the page until a site visitor selects one of the filter buttons. 

Total Eligible Items

When creating/editing a Portfolio, there is a "Total Eligible Items" at the bottom of the page. This is the total number of content items available in the Portfolio, which is different from the number that are displayed at one time. If the total number of content items is more than 50, the Portfolio may load slowly. The "Total Eligible Items" section will tell you the total number. See Figure 11, below.

Figure 11: "Total Eligible Items" on a Portfolio pagem which may differ from the number of displayed items

If the total number is more than 50, consider adding a pre-filter (or updating an existing pre-filter to be more specific/streamlined) to reduce the total number of content items in the Portfolio (see information abot pre-filters above).

Additionally, if the total number is more than 50, and you select the "Save" button, you will see a pop-up window that warns you about the large total number. This window will also suggest adding a pre-filter. You may still save your Portfolio if this window comes up.