News List Component

A list of news story teasers.

On this page:

  • Beware of duplicate link text.
  • List Teaser images require Alt text.
  • Link text should be meaningful.
  • Use 'Open in New Window' sparingly.

> Read more about making this component accessible.

Last reviewed: May 20, 2022

Using This Component

This component has two initial tabs: News List and List. An additional tab appears after the Build list using option is chosen. Stories are shown as 'teasers,' including thumbnail images when available.

Split long lists onto several pages.

Lists with more than 500 teasers will generate a server error and not show any results. More details are in this Known Issue.

Technical Restrictions


Configure - Main Settings

Click the wrench icon to 'configure' these settings.

News List tab

Show 'See all' button: Checking this box will create a button in the lower right corner of the list. Clicking the button will display the full list of news items.

'See All' button text: Customize the button text.

  • If left blank, the button will display "See All."
  • The maximum character count is 42. Anything longer will display incorrectly.

Full list page: Choose the page where the 'See All' button links.

  • Click the magnyfing glass on the right side of the box to choose a page.
  • Note: Choosing a new page will not populate that page with the news items. Only link to a different page if the news list already exists on that page, or if you intend to build the news list on that page.
  • This also acts as a 'host page' regardless if the 'See All' button is enabled.
  • If left blank, the current page will display the full list.

Use larger image for first article: Check this button to display a larger image for the top article of the news list. An image will only display if there is one associated with the news item listed.

'Host Page'

The 'Full list page' also acts as a 'Host page' path, regardless if the 'See All' button is enabled.

List tab

Here you will choose the type of list, as well as additional advanced settings.

Build list using: This drop-down menu asks how you want to build your list. You have the option to build it using:

  • Curated list: Build a list with selected choices. Requires you to manually add pages to the list (and maintain).
    • A Curated List tab will automatically appear. Click the magnifying glass icons to select Web pages to be displayed.
    • Use the Up and Down buttons to specify the order that the web pages will be displayed in the list. The minus (-) buttons allow you to delete web pages while the + button enables you to add Web pages.
  • Child pages: Populate the content of the list with the pages found in a segment of a website.
    • A Child Pages tab will automatically appear. Click the magnifying glass icon to the right of the Parent Page field to select a folder from which to display pages in your list. (If you build your list with child pages you do not have the option of displaying them in the order of your choice.)
    • Lists built by child pages can show their references in their natural order from the file tree (e.g. Order by {blank} and Order by cq:template).
  • Tags: Build a list using the tag words assigned to certain pages. (Read more about Tagging Your Shared Content.)
    • A Tags tab will automatically appear. In the Tags field, type the tags you would like to use or select the tags from a drop-down menu by clicking on the downward arrow sign to the right of the field.
      • In the Limit to path field, choose the scope of the list by selecting the page, and subsequent child pages, to which you wish to limit the list. Leave this field blank to populate the list using the content of your entire UBCMS. Web pages with tags matching your selections will then be displayed in your list.
      • Be advised, items in lists built using tags are not sorted in the normal default order even if they all originate in one folder. If you want the items to appear in a specific order, specify that in the Order by field.
    • Tagged pages can also be listed using the Search option, which allows more advanced control. (Read more about the search option for tagged page queries.)
    • Lists built by tags cannot show their references in their natural order from the file tree (e.g. Order by {blank} and Order by cq:template).

Be careful not to list the parent page here by mistake.
> It can create a loop (Known Issue).

  • Search: Use a particular word or phrase to build a list. Any page that contains the searched-for term will be included in the list. Meta-data including tags can also be found in this way -- read more about searching for tagged pages.
    • Search query: Enter a predetermined unique keyword or phrase; e.g. "ubgreen-event" in our example.
      This is optional, but with no keyword you will display ALL events in the calendar. More complex queries are possible. (See Tips for Building a List Search Query.)
    • Start in: Click the magnifying glass icon to choose where to focus the search. Child pages but not the selected parent will be included. Leave blank to use the current page.
    • Lists built by search cannot show their references in their natural order from the file tree (e.g. Order by {blank} and Order by cq:template).
  • Another list: Populate your list using another previously created list. This is useful if you want to exactly mirror items displayed on another page, while perhaps limiting the amount of items displayed or changing other display settings.
    • An Another List tab will automatically appear.
    • A chooser is provided to select the page from which to pull your list, but currently does not allow you to select teh actual list. Contact the DCT Help Team if you need assistance establishing teh full reference path.
  • Advanced search: Do not choose Advanced Search unless you are familiar with writing queries. Build a list using Java API and REST API. Advanced search accepts a query description, and creates and runs an XPath query.
    • An Advanced Search tab will automatically appear.
    • If desired, the XPath query will filter the result set and extract facets.
    • Query descriptions are made up from a set of predicates.
    • For each predicate type, there is an evaluator component that handles that specific predicate for XPath, filtering and facet extraction.
    • The REST API provides access to these features through HTTP with responses sent in JSON.
    • Lists built by advanced search cannot show their references in their natural order from the file tree (e.g. Order by {blank} and Order by cq:template).

Host Page: (where applicable) Set the preferred page to display your list items. If blank, the current page will be used.

New window: Select so each clicked page is displayed in a new browser window.

Link Label Icons

When New Window is selected, an additional icon will follow the linked text, to alert visitors that they will be taken to a new browser window, or even leave the current website.

And if the hyperlink goes to a downloadable file, a document icon will instead be shown as well as the file size if the file is on the same server. (Read more about link labels.)

Order by: Here are some of the ways in which you can order your list. Not all appear in the dropdown. Others may be available on request -- contact the DCT Help Team for details.

  • (blank): By default, the leaving the setting blank will sort the list by its natural arrangement in the folder. This natural order does not reproduce when the list is built by tags, search, or advanced search.
  • cq:lastModified: The list will be ordered by the date of modification. The page most recently edited will appear on top.
  • cq:template: The order will be established according to its arrangement in the Page Tree, sorted by template type used on each page. (This natural order does not reproduce when the list is built by tags, search, or advanced search.)
  • jcr:created: Order the list by the date of creation, with the earliest date of creation beginning the list.This setting can be confusing. Author and live pages often will not match because your live site order is determined by the first activation date for each page on the publishers, not their original creation date in author. Subsequent reactivations have no impact, but a page that is deactivated and then reactivated will receive that latest activation date.
  • jcr:path: The list is ordered alphabetically by the page's full path in the UBCMS, which includes its name. So for pages all in the same folder, it effectively sorts alphabetically by Name.
  • jcr:title: The list is ordered alphabetically by Title.
  • navTitle: The list will be ordered alphabetically based on the Navigation Title in each page's Page Properties (see Page Properties Basic tab settings).
  • postDate: Arrange the list items by the date the pages were created for pages created using the News Article Template or for pages that include the Date Created component. Using postDate for other pages will result in a randomized order.
  • random: Each time someone views the page, they will see a random order to the list.

Reverse order: Check the box to select whether you would like to inverse the order selected in the Order by field.

Accessibility Concerns

See an Example

UB News Feeds

Official university news stories are already available for use on UBCMS sites as one big collection, split into major topics, as well as collections for each decanal area. This shared content is easily pulled into a News List.
> More on UB News feeds

Master Class Resources

Was This Information Helpful?

(so we can thank you or request more details)
( addresses only please)