Portfolio: Filter Content
With the Portfolio widget you can showcase your work and optionally enable visitors to filter the items.
Different views are available for the content. The default view is a masonry card view made famous by Pinterest.com. Other views include a large image showcase view, a compact view with image, and a simple list view. For the showcase view, the
flip_alt_rows option can be set to
true to horizontally flip alternate rows - a style which is commonly seen on many popular sites and landing pages that showcase product features by placing large images and text side-by-side.
The widget is configurable in a one or two column structure by setting the
Associate your pages with tags by placing the tags option in the front matter of your pages (e.g.
tags: ["A Tag", "Another Tag"]). The Portfolio widget can then be configured to let visitors filter results by tags. To add a filter button, add or edit a
filter_button option (see below), where
name is the filter text and
tag is the name of the tag to filter by (type
* to show all items).
projects.md section in the demo uses the Portfolio widget.
To show the widget in a section, reference it in your section’s front matter:
widget: portfolio headless: true # This file represents a page section. # ... Put Your Section Options Here (title etc.) ... content: # Page type to display. E.g. project. page_type: project # Uncomment to only show content with specific tags # filters: # tags: # - featured project # Default filter index (e.g. 0 corresponds to the first `filter_button` instance below) filter_default: 0 # Filter toolbar (optional). # Add or remove as many filters (`filter_button` instances) as you like. # To show all items, set `tag` to "*". # To filter by a specific tag, set `tag` to an existing tag name. # To remove toolbar, delete/comment all instances of `filter_button` below. filter_button: - name: All tag: '*' - name: Deep Learning tag: Deep Learning - name: Other tag: Demo design: # Choose how many columns the section has. Valid values: 1 or 2. columns: '2' # Toggle between the various page layout types. # 1 = List # 2 = Compact # 3 = Card # 5 = Showcase view: 3 # For Showcase view, flip alternate rows? flip_alt_rows: false