Collection Grid Block

example of a collection grid
Click to see a larger version

The Collection Grid block provides a way to display collection item pages that can be filtered based on the collection categories selected. For example, you could create a collection type for all your "Computer Science" program courses and create collection categories such as "Majors, Minors, and Certificates". Visitors may then filter the content to just view the courses for Computer Science majors.

Note: Start by creating your collection item pages.

Add a Collections Grid Block

  1. Navigate to the page you'd like to update, and enter the Edit mode for the page.
  2. Click on the Layout tab.
  3. Choose the Section you would like to add the collections grid block.
  4. Click on Add Block in that section.
  5. Click on Create content block in the Configuration Sidebar.
  6. Select Collection Grid from the list of options.
  7. Choose Inline or Reusable block option.

Add Collections Grid Block Content

  1. Title: this displays above the block when placed on a page.
  2. Display title: enabled by default, toggle the button to hide the block title.

Configure Content Display Tab

  1. Type: Select the Collection Type you would like to display in the collection grid. If you do not select a Collection Type, a collection item won't display in the grid even if it's category is tagged in the Collection Category Selection.
  2. Collection Grid Filter:
    1. Label: Add a Category label so users may filter by different category sets.
    2. Category: Select the Collection Categories you would like to display in the collection grid. Selecting more than one category will automatically add a filter for the displayed items.
  3. Multiselect:
    1. Single Select List: user may choose one category at a time to filter by.
    2. Multi Select List: allow the user to select multiple categories to filter the collection list.
Add content to collection grid
Click to see a larger version

Configure Content Filter Tab

  1. Display Summary: You can choose whether or not to include a summary of the collection items. If the collection item does not have custom preview text, a truncated version of body field text will display.
  2. Filter Effect: Select how filtered items are displayed for desktop and tablet users. The remove option is applied for mobile users regardless of the setting.
Click to see a larger version

Design the Collection Grid Block

  1. Click on Styles tab.
  2. Icon Settings: option to add an icon to the block title and configure the position, color, and size.
  3. Block Heading: heading style and alignment. This setting should be used to put your content in the proper reading hierarchy, not to change the font size of the title. Always make sure the page content is structured properly for accessibility.
  4. Block Style:
    1. Background style: option to add a colored background, outline or underline style.
  5. Block Typography: option to scale the font size on the title and content in a block.

Save Block

  1. Click Add Block.
  2. Click Save layout.