Slide Deck Horizontal Component

Show a row of slides that are showcased one at a time, on rotation. Each is a teaser link, displaying the corresponding page title, description and main image.

Using This Component

Add the component to the page. There are two initial tabs: Slide Deck Items and Advanced. A third tab appears after the Build list using option is chosen.

This component can be used on almost any page, but is often used as a 'hero deck' or in conjunction with the Key Tasks component on home pages.  If you are considering linking to shared content stories from your home page, please read through Advanced: Best Practices for Use on a Home Page.

Horizontal Slide Deck component as placed on the page.

Horizontal Slide Deck component as placed on the page.

The title of each page, its descriptive text and its main photo are displayed for each slide. As a full-sized Web page, clickable controls allow visitors to manually cycle through the display of pages, but on small screens, users can drag/swipe to change slides.

These components are normally used to display teasers that automatically link to shared content pages built with the Highlight Template. When this linked page contains a YouTube video, it will be playable directly from the slide deck.

Works Best with Highlight Template

For best performance, please use this component with Shared Content pages created using the Highlight Template.

Be Careful With the 'host page' Setting

This component is intended to link to shared content hosted on another page. The linked content CANNOT be hosted on your home page. If you use the default hosting setting, the home page will simply refresh, and the linked content will not be displayed. > read more about use on a home page

The Slide Deck is optimized to display elegantly in many column widths:  

  • Full width (12 columns) - All features are displayed at full size.
  • 9 columns - All features are displayed but the images are reduced.
  • 6 columns - The descriptions are not displayed and the component is scaled smaller.
  • 3 columns - The descriptions are not displayed and the component is scaled significantly smaller (same as the RWD small-screen version).

The default size for this component is 402x287.

Slide Deck Items 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:

  • 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.
  • 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.)

Be careful not to list the parent page here by mistake.
It can create a loop. > Read more

  • 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.
  • Another list: Populate your list using another previously created list. This is useful if you want to mirror items displayed on another page, while perhaps limiting the amount of items displayed.
    • An Another List tab will automatically appear. Click the arrow at the right of the List Reference field to select another page from which to pull a list to imitate:
      • Click on the field to pull up a browser window of all the pages in your UBCMS.
      • Select the page containing the list you want to use.
      • The browser will display all usable components on the right hand side of the browser. Choose the desired list and click OK.
  • 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 select which page, and subsequent child pages, the search is confined to. Leave the field blank to search all pages in the UBCMS.
  • 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 (read more), which allows more advanced control.

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, an 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: There are several ways in which you can order your list:

  • 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.
  • jcr:created: Order the list by the date of creation, with the earliest date of creation beginning the list.
  • 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.
  • jcr:title: The list is ordered alphabetically by title.
  • random: There will be a random order to the list.
  • You can also delete the default option and leave the field blank to sort the list by its arrangement in the Page Tree.

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

The component opened for editing showing the Slide Deck Items tab.

The Slide Deck Items tab.

Advanced Options

Start at: Specify the first page to be listed, from the natural beginning of your list as defined by the other settings; e.g. 5 would be the 5th item. 

Limit: Type the maximum number of Web pages that you would like to include in the list. If the field is left blank, the list will have no imposed boundaries and will encompass as many items as fit the parameters used to build the list.

  • Maximum number of items displayed in list. Leave blank to take default value as 100.

Exclude current page: Filter out any items that would link to the same page on which the list is shown.

Enable Scheduling: Check the box to filter the list according to "Feature On/Off Time" that is set in Page Properties of listed pages.For more details, see “Enable Scheduling” in the List Builder component.

Host Page: Host shared content pages in this context. Leave blank for current page.

The component opened for editing showing the Slide Deck Items tab and its Advanced options.

The Slide Deck Items tab Advanced options.

Advanced Tab

  • CSS Class - Developers only!
    • Define a class to allow for additional CSS rules in the page's content.css file.
The component opened for editing showing the Advanced tab.

The Advanced tab options.

Restrictions

  • For best performance, please use this component with Shared Content pages created using the Highlight Template.

Advanced: Best Practices for Use on a Home Page

If you wish to deliver news stories and other mixed shared content content consistently and effectively through a home page slide deck, we recommend the following best practice steps.  

  • The Horizontal Slide Deck is designed to 'host' linked stories somewhere else in your site, such as a news page. But the default Host Page setting is blank, which means if you do not supply a preferred host page, it will try to host the linked content "on the same page as the component” (i.e. your home page), and the UBCMS will not allow you to host other content on a home page. (Home pages are critical. This prevents accidentally breaking them or confusing visitors by replacing the expected content. It also prevents third parties to 'overpower' your home page with their own content... all very undesirable.)  There is a solution.
    1. Choose a suitable page on your site to act as a host page, perhaps your news page (e.g. /content/www/your-site/news).
    2. Enter the path to this page in the Advanced settings for the slide deck.
    3. Once this is set, any headline clicked in the slide deck will then shunt people to that linked content, displayed on your specified host page.
  • The Horizontal Slide Deck is meant to drive shared content created using the Highlight Template. This is the only way to achieve full and consistent functionality for all of the displayed content. This is easily attained for content that your own unit creates, but there are times when desired content has been built using other templates (e.g. News Article) or is not shared content. There is a solution.
    1. Build ‘teaser’ pages in your own site's shared content area (perhaps in a folder called “home page slide deck”).
    2. In that folder, create a shared content page using the Highlight Template for every item you wish to feature in your homepage slide deck. For each, You will need to add a picture, title, and some text, which you can repurpose from the story for consistency.
    3. If you create a call to action within the shared content page using the List Builder (e.g. "read more about Susan's story") and want that call to action link to go to the same place as the main headline, you MUST add the same host page path in the List Builder component as you are using on your home page's slide deck (e.g. /content/www/your-site/news). Otherwise your call to action will display the story in its natural location, while your headline will display it on your preferred host page.

Advanced: Displaying Just Images or Teasers

How to build a Slide Deck of just images or teasers.

There may be times when you want to build a slideshow but you do not want to link to other pages. For example, you have a series of pictures of people making statements, with captions, but you do not have anything more to share about them.

To accomplish this, use the Slide Deck to display a series of shared content pages built using the Highlight Template. If the Highlight Template is not provided with a link, the Slide Deck teaser will not be linked either. 

Advanced: Adding Playable Video

How to load a playable YouTube video.

This component is intended to be used with shared content pages built using the Highlight Template. This template comes with a preloaded flexible shared content module, which includes a video tab. Follow these steps to provide working videos in the slide deck.

  1. Create a new shared content page using the Highlight Template.
  2. Open that page and add a video to the video tab.
    • Use the full URL for the video, either http://youtube.com/video-id or http://youtu.be/video-id.
  3. Be sure to include a thumbnail for the video on the Image tab.
    • Without this image, the video will not be playable from the slide deck.
  4. Add any additional details, such as a heading, and descriptive text.
  5. Back in the slide deck, link to your shared content page using a Curated or Child Pages list.
  6. The video can now be played directly from the slide deck.

Was This Page Helpful?

(Required)
(Required)
(so we can thank you or request more details)
(Required)
(buffalo.edu addresses only please)

On this page:

See an Example:

Related Components:

Last Reviewed:

March 21, 2018