Campus alert status is yellow: For the latest campus alert status, news and resources, visit umassmed.edu/coronavirus

Search Close Search
Page Menu

Episerver CMS Blog

Filtered Taxonomy Search Block

Tuesday, August 03, 2021
|

The Taxonomy Search Block displays a list of items that have been tagged with taxonomy categories. This list displays in a card grid view with an image, title, teaser. The layouts shift slightly depending on what you have chosen to display: faculty, labs, blog posts or UMassMed News pages. 

Creating a new block

When creating a new block, choose "Taxonomy Listing Block with Filtering"

imagel8m.png

Type of list you wish to display

On the List Settings tab, you can choose thish type of list to diplay.

  • Faculty
    • The block will display with an image and the title of the page. Upon hover, the teaser text will display over the item. Ex:

imagewta9r.png

    • Standard image size is square. Since the layout can fluxuate with the screen size and the grid size that is choosen, there is no set dimension for images. Suggestion is to keep your images the same proportion.
    • Image is set on the SEO tab of the page in the Social Image property. If there is no image set, a default image, 300px by 300px, will display (below). Note: In the example above, the editor created a custom image for those faculty that did not supply a portrait photo. 
      image10jiu.png 

      Note: for faculty pages, it's best to sort by Headline and ensure the headline contains the faculty full name. Or by page name and set the page name last name first.
  • Blog Posts
    • The block will display with an image, date, title, teaser and link for "read more". Upon hover, the item will turn gray. Ex:

imagemlwfy.png

    • Image is set on the SEO tab of the page in the Social Image property. If there is no image set, a white space will appear. 

    • Note: for blog pages, it's best to sort by Posted date, descending to display the most recent posts. However, you can choose to sort with any of the choices that best suit your need.
  • Lab pages
    • The block will display with an image and the title of the page. Upon hover, the teaser text will display over the item. Ex:

    • Image is set on the SEO tab of the page in the Social Image property. If there is no image set, a default image, 300px by 300px, will display (below). 

    • Note: for lab pages, it's best to sort by Page Name.
  • News Pages
    • for this setting, you will need to point the "Search for content starting from" to the UMass Med Now > News Archived folder in the content tree.

      The block will display with an image, news category, date, title, teaser and link for "read more". Upon hover, the item will turn gray. Ex:

image0yoh.png

    • Note: for news pages, it's best to sort by Posted date, descending to display the most recent news articles. However, you can choose to sort with any of the choices that best suit your need.


Set Filtering

On the Listing Settings tab, you can set the filtering to refine your list.

  • Make sure you are in properties view imagelsy8i.png
  • edit the block, on the Listing tab
    • Select one or more items from the Taxonomy tree (screen shot below), you can set one or all 3 filter properties:
      • Must Match, Match Atleast One, or Exclude. Note: the more you select, the more refined your list will be

imagecqk0d.png   imagexd1q.png

  • click on page editing icon to review the results image6aq9g.png

Other properties on the List Settings tab

  • Include All Level
    • this will search for all pages under the page from which you set to start the search
    • if let unchecked, it will only search one level under the page from which you set to start the search
  • Max item in List
    • default is 0 which will show all items that are matched
    • adding a number, the list will only display that number of items
  • Grid Card Stlye
    • Compact will set the width of each card to a minimum of 280px and will adjust the number of items in each row and card width according to the space in which it is in or the size of the browesr window.
    • Medium will set the width of each card to a minimum of 400px and will adjust the number of items in each row and card width according to the space in which it is in or the size of the browesr window.
    • Stretch will set the width of each card to a minimum of 450px and will adjust the number of items in each row and card width according to the space in which it is in or the size of the browesr window. In samller areas or browsers size, it will display one card per row.
  • Enable Pagination 
    • if you have many results, you can turn on paging to show only show many items on the page at once. 
  • Results per Page
    • When using pagination, set this number to show only that amount on the page at once
  • View More page (instructions at bottom of page)
  • Hide the cateries list
    • this will hide the categories that show on the News list
  • Hide the teaser
    • Will hide the teaser area
  • Sort By
    • Headline - the heading set on the page
    • Posted Date - For News or Blog Posts, this is the "posted date" or labs or faculty, this is the created date
    • Sort index - typically based on how the pages appear in the content tree, but may get unexpected results if Include All Level is selected. This is based on the sort index number set on each page Settings tab
    • Page Name - name of the page (what displays in the content tree)
  • Sort Order
    • Ascending or Descending
  • Show Date on Card 
    • this is for News or Blog Post items


Add on-page filtering

If your list is long, or you've enabled pagination, you can add a search bar as well as 2 filtering dropdowns to help your viewers filter the results.

imagepztxj.png

  • click back to Properties view
  • On Filter on Page tab
    • to turn on/off the search/filter area, check or uncheck the "Hide the filter area"
  • To set the filters, add a taxonomy category to one or both of the filters
    • You want to select the top most item that contains the taxonomy categories you wish to display in your filter
      imagej38lp.png  imagea2e1n.png

  • click Publish
  • click on page editing icon to view the filters  image6aq9g.png


View on page as user

Test your block once you have it configured as you desire.

  • in the editor, find the page that your block is on

image07he.png

  • click Options and then view on website 
    image0wy2.png
  • review the page