Theme Documentation

Filterable Resources

A complex list of resource cards that can be pulled from blog posts, from HubDB, or manually populated. Other options include filters, search, list/grid view, and different navigational types.

Example 1 filterable-resources

Example 2

** filterable-resources-2 **

View a live demo of this module.

The following is a detailed listing of all the Content and Style fields available in this module.

Content

  • Listing Styles _[Multi Choice] [Required]
    _Selecting both styles will add buttons to the filter bar for users to choose which style want to view.
    Choices: Grid, List

  • List Style _[Choice] [Required]
    _If Listing Styles contains List, choose what style of list to display.
    Choices: Default, Detailed

  • Data Source _[Choice] [Required]
    _Choose what type of data will populate the listing,
    Choices: Manual, Blog, HubDB, CRM Objects

  • Blog Posts _[Repeater Group]
    _If Data Source is set to Blog

    • Post Type [Choice]
      Listing       can only be used on a Blog Listing page. All other types are limited to displaying 250 posts.
      Choices: Recent, Related, Popular, Listing
    • Blog _[Blog]
      _Leave unselected to use the default blog or blog this module appears in.
    • Blog Post Override _[Text Repeater]
      _If Post Type is set to Related, enter IDs of blog posts that should always show despite all other parameter values and query filters.
    • Relevant Blog Posts _[Text Repeater]
      _Enter the IDs of blog posts to use when finding relevant blog posts.This parameter should only be used when the module is appearing on a page. On blog posts, it will default to the post the module is appearing on.
    • Include: _[Multi Choice]
      _Select what data to include.
      Choices: Thumbnail, Date, Author, Tags, Read Time, Summary
    • Query _[Group]
      _Filter what data is pulled in.
      • Limit [Number]
        Max number of posts to pull in.
      • Query By: _[Choice]
        _Choices: None, Tags, Author
      • Time Frame _[Choice]
        _If Post Type is set to Popular, set the time frame for the analytics.
        Choices: All Time, Past Year, Past Six Months, Past Month
      • Tags _[Repeater Tag]
        _Select which tags to query by.
      • Tag Logic Operator _[Choice]
        _If Post Type is Recent or Popular, choose whether posts selected must contain all tags (AND) or any tag (OR).
        Choices: AND, OR
      • Author _[Text]
        _Enter the slug of a blog author to query posts by.
      • Start Date _[Date]
        _Query posts published after this date
      • End Date _[Date]
        _Query posts published before this date

  • Filters _[Repeater Group]
    _If Data Source is set to Blog

    • Filter Type _[Choice]
      _Choices: Tag, Author, Date
    • Icon [Group]
    • Tags _[Repeater Tag]
      _If Filter Type is set to Tag, select tags to show in the filter dropdown
    • Authors _[Repeater Text]
      _Add slug of specific authors to show in the filter. The slug is what displays in the URL of the author listing page (all lowercase with hyphens instead of spaces).
    • Make filter multi-select _[Boolean]
      _Allows multiple options to be selected within the dropdown (selected options of all multi-select filters will be displayed below the filters).
    • Filter Label
    • **Filter Placeholder
      **This is the text that shows in a non-multi-select dropdown when no option has been selected as well as the text for the clickable option to reset the filter.

  • HubDB _[Group]
    _If Data Source is set to HubDB, use this group’s fields to map columns to the appropriate data type.

    • Table _[HubDB Table]
      _Select the table to pull data from.
    • Thumbnail [Text]
      Must map to an Image column.
    • Date _[Text]
      _Must map to a Date or Date/Time column.
    • Eyebrow _[Text]
      _Must map to a Text column.
    • Title _[Text]
      _Must map to a Text column.
    • Summary [Text]
      Must map to a Text column.
    • Pill Tags [Repeater Group]
      (If List Style is set to Detailed these tags will be styled as Text Tags)
      • Tag _[Text]
        _Must map to a Text, Select, or Multi-Select column.
      • Color Setting _[Choice]
        _Choose how to color the pills tag. Set to a single color OR choose a selection of colors to alternate through per card or per tag (only for multi-select columns).
        Choices: Single, Alternate by Card, Alternate by Tag
      • Color [Color]
      • Do Not Display [Boolean]
        Allows the tag to be used as a filter without displaying it on the page.
    • Text Tags 
      • Icon [Flattened Group]
      • Tag _[Text]
        _Must map to a Text, Select, or Multi-select column.
      • Do Not Display [Boolean]
        Allows the tag to be used as a filter without displaying it on the page.
    • Link _[Text]
      _Must map to a URL or Text column.

  • Filters _[Group]
    _If Data Source is set to HubDB

    • Filter Type _[Choice]
      _Choices: Tag, Date
    • Date Type _[Choice]
      _If Filter Type set to Date
      Choices: Month, Day
    • Earliest Date _[Date]
      _Set the earliest date allowable to be filtered by (leave blank to allow any date in the past to be chosen).
    • Latest Date _[Date]
      _Set the latest date allowable to be filtered by (leave blank to allow any date in the future to be chosen)
    • Icon [Group]
    • Make filter multiselect _[Boolean]
      _Allows multiple options to be selected within the dropdown (selected options of all multiselect filters will be displayed below the filters).
    • Filter Label
    • **Filter Placeholder
      **This is the text that shows in a non-multi-select dropdown when no option has been selected as well as the text for the clickable option to reset the filter.

  • Manual _[Repeater Group]
    _If Data Source is set to Manual

    • Thumbnail [Image]
    • Date [Date]
    • Eyebrow [Text]
    • Title [Text]
    • Summary [Text]
    • Pill Tags _[Repeater Group]
      _(If List Style is set to Detailed these tags will be styled as Text Tags)
      • Tag [Text]
      • Color [Color]
      • Filter _[Text]
        _The name of a filter this tag should be associated with.
      • Do Not Display [Boolean]
        Allows the tag to be used as a filter without displaying it on the page.
    • Text Tags [Repeater Group]
      • Icon [Flattened Group]
      • Tag [Text]
      • Filter _[Text]
        _The name of a filter this tag should be associated with.
      • Do Not Display [Boolean]
        Allows the tag to be used as a filter without displaying it on the page.

  • Filters _[Group]
    _If Data Source is set to Manual

    • Filter Type _[Choice]
      _Choices: Tag, Date
    • Date Type _[Choice]
      _If Filter Type set to Date
      Choices: Month, Day
    • Earliest Date _[Date]
      _If Filter Type set to Date, set the earliest date allowable to be filtered by (leave blank to allow any date in the past to be chosen).
    • Latest Date _[Date]
      _If Filter Type set to Date, set the latest date allowable to be filtered by (leave blank to allow any date in the future to be chosen)
    • Icon [Group]
    • Make filter multi-select _[Boolean]
      _Allows multiple options to be selected within the dropdown (selected options of all multi-select filters will be displayed below the filters).
    • Filter Name _[Text]
      _Identifier to set on tags to associate them with this filter.
    • Filter Label
    • **Filter Placeholder
      **This is the text that shows in a non-multi-select dropdown when no option has been selected as well as the text for the clickable option to reset the filter.
    • Filter Options _[Repeater Text]
      _If Filter Type set to Tag, set the options to list in this filter.

  • CRM Objects _[Group]
    _If Data Source is set to CRM Objects, use this group’s fields to map columns to the appropriate data type.

    • CRM Object Source _[Choice]
      _Choose the CRM Object to pull from. Note: All but Product, Marketing Event, and Custom can only be used on pages that require either a password or a membership login.
      Choices: Product, Marketing Event, Custom, Contact, Company, Deal, Ticket, Quote, Line Item.

    • Custom Object Name _[Text]
      _If Custom is selected in CRM Object Source, enter the internal name of your custom object.

    • Thumbnail [Text]
      If Listing Styles includes Grid. Must map to a property containing and image URL.

    • Date _[Text]
      _Must map to a Date or Date and Time picker property.

    • Eyebrow _[Text]
      _Must map to a Text/Values input type, select, or single checkbox property.

    • Title _[Text]
      _Must map to a Text/Values input type, select, or single checkbox property.

    • Summary [Text]
      If Listing Styles includes Grid. Must map to a Text/Values input type, select, or single checkbox property.

    • Details [Group]
      If Listing Styles includes List.

      • Text _[Text]
        _Must map to a Text/Values input type, select, or single checkbox property.
      • Text Size _[Choice]
        _Changes paragraph text to match on of the body presets in the Theme Settings.
        Choices: Default, Medium, Small, Tiny
      • **Lists Columns
        **Split lists into columns.
      • List Column Count (Desktop)
      • List Column Count (Tablet)
      • List Column Count (Mobile)

    • Aside [Text]
      If Listing Styles includes List.       Must map to a Text/Values input type, select, or single checkbox property.

    • Pill Tags [Repeater Group]
      (If List Style is set to Detailed these tags will be styled as Text Tags)

      • Tag _[Text]
        _Must map to a Text/Values input type, select, or checkbox property.
      • Color Setting _[Choice]
        _Choose how to color the pills tag. Set to a single color OR choose a selection of colors to alternate through per card or per tag (only for multi-select columns).
        Choices: Single, Alternate by Card, Alternate by Tag
      • Color [Color]
      • Do Not Display [Boolean]
        Allows the tag to be used as a filter without displaying it on the page.

    • Text Tags 

      • Icon [Flattened Group]
      • Tag _[Text]
        _Must map to a Text/Values input type, select, or checkbox property.
      • Do Not Display [Boolean]
        Allows the tag to be used as a filter without displaying it on the page.

    • Link _[Text]
      _Must map to a property containing a URL.

  • Query _[Group]
    _If HubDB or CRM Objects is selected in Data Source.

    • Limit _[Number]
      _If you have multiple resource modules pulling CRM Objects on the same page only 1000 can be called in total on the page across all modes. This is a HubSpot limitation.
    • Order By _[Text]
      _Set the column/property to order by.
    • Reverse Order _[Boolean]
      _If Order By is set, choose to reverse the order.
    • Filter _[Group]
      _Filter the results by a specific value.
      • Column/Property _[Text]
        _The name of the column/property to filter by.
      • Query Type _[Choice]
        _Choose the type of query to apply. Note: Some query types are only applicable to certain column/property types.
        Choices: EQUAL, NOT EQUAL, GREATER THAN, LESS THAN, GREATER THAN OR EQUAL, LESS THAN OR EQUAL, CONTAINS, IS NULL, NOT NULL, IN, NOT IN
      • Value _[Text]
        _

  • Layout [Group]

    • Show Search [Boolean]
    • Navigation Type _[Choice] [Required]
      _Choices: Infinite Scroll, Infinite Load, Pagination
    • Number of items to show at a time: [Number] [Required]
    • Grid _[Group]
      _If Listing Styles contains Grid
      • Text Tags Position _[Choice]
        _Choices: Top of Content, Bottom of Content
      • Truncate Summary [Number]
        Cut off text after a certain number of character. Leave blank to display entire text.
      • Desktop, Tablet, Mobile [Responsive Groups]
        • Thumbnail Position _[Choice]
          _Choices: Top, Bottom, Hide
        • Date Position _[Choice]
          _Choices: Left of Content, Right of Content, Right of Tags, Left of Tags, In Tags
        • Spacing Between Image and Text [Number]
        • Grid [Common Module Fields]
    • List _[Group]
      _If Listing Styles contains Grid
      • Text Tags Position _[Choice]
        _Choices: Top of Content, Bottom of Content
      • Truncate Summary [Number]
        Cut off text after a certain number of character. Leave blank to display entire text.
      • Desktop, Mobile, Tablet [Responsive Groups]
        • Thumbnail Position _[Choice]
          _Choices: Right, Left, Hide
        • Date Position _[Choice]
          _Choices: Left of Content, Right of Content, Right of Tags, Left of Tags, In Tags
        • Spacing Between Rows [Number]
        • Spacing Between Image and Text [Number]

  • Strings [Group]

    • Read Time Text _[Text] [Required]
      _Use % to indicate where the dynamically generated number should be placed within the text.
    • Date Format _[Text] [Required]
      _Must be a pattern following Unicode LDML.
    • Month Format _[Text] [Required]
      _Must be a pattern following Unicode LDML.
    • Day Format _[Text] [Required]
      _Must be a pattern following Unicode LDML.
    • Show Filters Button Text _[Text] [Required]
      _This button appears on mobile screens.
    • Hide Filters Button Text _[Text] [Required]
      _This button appears on mobile screens.
    • Clear Filters Label [Text] [Required]
    • Search Label _[Text] [Required]
      _This element does not display visually.
    • Search Placeholder [Text] [Required]
    • Search Toggle _[Text] [Required]
      _This element does not display visually. Only used for the Toggle type search set in the Styles tab.
    • Search Submit _[Text] [Required]
      _This element does not display visually when using the icon-only submit button.
    • Load Button Text [Text] [Required]
    • Pagination Label _[Text] [Required]
      _This element does not display visually.
    • Pagination Previous Label _[Text] [Required]
      _This element does not display visually.
    • Pagination Next Label _[Text] [Required]
      _This element does not display visually.
    • Pagination Numbers Label _[Text] [Required]
      _%s is the variable used to input the number of the page. This element does not display visually.
    • Pagination Current Page Number Label _[Text] [Required]
      _%s is the variable used to input the number of the page. This element does not display visually.
    • Loading Message _[Text] [Required]
      _This text is what screen readers will hear while posts are loading. Visually a dot loader will display.
    • End of Content Message _[Text] [Required]
      _Message that appears when user has reached the end of the content.
    • No Results Message _[Text] [Required]
      _Message that appears if the selected filters or search returns 0 matches.

  • Advanced [Common Module Fields]

Styles

  • Dark Mode _[Boolean]
    _Check to use the Dark Mode colors set in Theme Settings.

  • Module [Group]

  • Filters [Group]

    • Filter Icon [Group]
      • Size [ Number]
      • Color _[Color]
        _Only affects non-custom, SVG icons.
      • Box Styles [Common Module Fields]
    • Filter Label [Group]
    • Filter Placeholder [Group]
    • Style Toggles [Group]
      • Size [ Number]
      • Color _[Color]
        _Only affects non-custom, SVG icons.
      • Color (Hover) _[Color]
        _Only affects non-custom, SVG icons.
      • Box Styles [Common Module Fields]

  • Search [Group]

    • Type [Choice]
      Choices: Bar, Toggle, Box
    • Submit Icon [Group]
      • Size [Number]
      • Color _[Color]
        _Only affects non-custom, SVG icons.
      • Color (Hover) _[Color]
        _Only affects non-custom, SVG icons.
      • Box Styles [Common Module Fields]
    • Placeholder Text [Group]
    • Input Text [Group]
    • Box Styles [Common Module Fields]

  • Grid [Group]

    • Animation _[Choice]
      _Load in animation for the listing items.
      Choices: None, Fade In, Fade In Up, Fade In Right, Fade In Down, Fade In Left
    • Card [Group]
    • Thumbnail [Group]
      • Width [Number]
        Give the thumbnails a set width
      • Aspect Ratio _[Choice] [Required]
        _Crop thumbnails to a specific aspect ratio
        Choices: None, 1:1, 3:2, 4:3, 16:9, 9:16, 3:4, 3:2
      • Hover Animation [Choice]
        Animate the thumbnail on hoverChoices: None, Zoom In, Zoom Out, Grayscale, Colorize
      • Border [Border]
      • Radius [Number]
    • Date [Group]
      • Minimum Width _[Number]
        _Unless in tags, give date box a minimum width
      • Month [Group]
      • Day [Group]
      • Box Styles [Common Module Fields] (Not applicable to In Tags date)
    • Eyebrow [Group]
    • Title [Group]
    • Summary [Group]
    • Pill Tags [Group]
      • Minimum Width [Number]
      • Font Styles [Common Module Fields]
      • Padding [Spacing]
    • Text Tags [Group]
      • Divider symbol between links _[Choice] [Required]
        _Choices: None, Slash, Vertical Bar, Bullet, Caret
      • Font Styles [Common Module Fields]

  • List [Group]

    • Animation _[Choice]
      _Load in animation for the listing items.
      Choices: None, Fade In, Fade In Up, Fade In Right, Fade In Down, Fade In Left
    • Card [Group]
    • Thumbnail [Group]
      • Width [Number]
        Give the thumbnails a set width
      • Aspect Ratio _[Choice] [Required]
        _Crop thumbnails to a specific aspect ratio
        Choices: None, 1:1, 3:2, 4:3, 16:9, 9:16, 3:4, 3:2
      • Hover Animation [Choice]
        Animate the thumbnail on hoverChoices: None, Zoom In, Zoom Out, Grayscale, Colorize
      • Border [Border]
      • Radius [Number]
    • Date [Group]
      • Minimum Width _[Number]
        _Unless in tags, give date box a minimum width
      • Month [Group]
      • Day [Group]
      • Box Styles [Common Module Fields] (Not applicable to In Tags date)
    • Eyebrow [Group]
    • Title [Group]
    • Summary [Group]
    • Details _[Group]
      _If List Style is Detailed
    • Aside _[Group]
      _If List Style is Detailed
    • Pill Tags [Group]
      • Minimum Width [Number]
      • Font Styles [Common Module Fields]
      • Padding [Spacing]
    • Text Tags [Group]
      • Divider symbol between links _[Choice] [Required]
        _Choices: None, Slash, Vertical Bar, Bullet, Caret
      • Font Styles [Common Module Fields]
    • Button Style _[Choice]
      _If List Style is Detailed
      Choices: Primary, Tertiary, Quaternary, Text Link, Text Link (Dark)