UMass Chan CMS Blog

This listing block allows editors to set a list of pages in a grid and with some control over the layout of that grid. Most items will display similar to the Taxonomy Listing block or News Block with each item displaying an image (SEO image), then title (headline) and a teaser/summary (metadata description).

Currently this block can list any page when no filter type is chosen. Certain pages will have a different format, such as Staff Pages. Currently the block has only a short list of pages to filter by. This list will grow as we add more page types. We began creating this block with the new Staff Page in mind.

• Examples
• Create a block
• Displaying images

Display of images

Images are set on the individual pages in the Social Image property under the SEO tab (must be in properties view). If there is no SEO image set on a page, a default gray image will display.

Generic page listing example:

https://www.umassmed.edu/zzz/example-site/example-pages/listing-blocks/grid-listing-block/list-of-generic-pages/

When set to "no page type", any of content pages will be listed in the grid including Staff Pages.

Example of Filtering by Staff Page 

https://www.umassmed.edu/zzz/example-site/example-pages/listing-blocks/grid-listing-block/staff-pages/

This page displays a grid of Staff Pages in a particular format. Staff Pages have specific properties. In this case, it will display the profile image in a circle at left. At right is the staff name including suffix and a link if there is any text in Main Body or the drop block area, their title and under that their email, phone and/or website if populated.

To create a new block:

• Create a new block and choose Grid Listing Block
  
  
  
• Set the require field "Search for content starting from" - this should be set to a page in the content tree so the grid can find the pages you want to list (drag and drop the page from the content tree or search by clicking on the ellipses)
  • you can leave the additional properties blank
  • click the create button in the upper right

• Edit the properties
  • Listing Settings Tab
    • Choose Generic or Staff Page (we will be adding other page types in the future as some require special formatting)
       
      • when selecting "No page filter," this will include all page types
    • Control over the teasers
      
    • Control over how many to display
      
    • Sorting the list
      

  • Grid Layout Tab

    • Grid Layout Style:
      • Fit All in One Row
        • This will display only 1 row
        • Pagination can be used
        • Editors should review their page and adjust if there are too many columns
          • A warning will display if more than 5 items are set to display in the row
          • An error will appear if more than 12 items are set to display in the row and a note to change layout style
        • Columns widths may vary as the grid tries to fit all columns
      • Fixed number of columns
        • This allows the editor to set 1-8 columns
        • An error will display if more than 8
        • At certain viewports, the column will reset to fit the appropriate amount
        • Editors should review their desktop views as typically over 4 can be too wide if there are long titles or words that cannot be wrapped causing the column to stay too wide
        • NOTE: this page is also showing an example of setting the background color
      • Variable Columns Stretch
        • This is best when displaying only a few in a wide area
          • Ex: top slider area, display 3, will stretch the columns to fill the entire width
      • Variable Columns Fit
        • This is best when you are not sure how many columns to set and want the columns to be evenly spaced
        • This setting will set the columns to be no smaller in width than 337px
          • The grid will fit as many columns as it can and leave an empty space to the right for unfilled columns
        • This setting will wrap items as needed
    • Column Spacing and Row Spacing
      • This allows the editor to have control over how small or big the column and row gap is
      • Compact (no gap) allows the grid items to touch
    • Layout Settings
      • Here the editor can assign a background color to the grid area
      • https://www.umassmed.edu/zzz/example-site/example-pages/listing-blocks/grid-listing-block/grid-listing-block---default/
        • For darker background colors, there is an option to set the grid items with a white background