University at Buffalo - The State University of New York
Skip to Content
UB Web Management

Transforming UB’s digital communications through process and tools

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.

New Brand Features

Completely reimagined and has great flexibility in how it can be used. Layout has improved presentation. Works in more column sizes and supports swipe to change slides in RWD.
> read more about the digital brand transition
> read more about changes to this component

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.

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 on each slide. Clickable controls allow visitors to manually cycle through the display of pages.

These components are normally used as teasers to link to Shared Content pages built with the Highlight Template. When the linked module contains a YouTube video, it will be playable from the Carousel. 

Works Best with Highlight Template

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

The default size for this component is 402x287.

Auto-Play

The new slideshows and carousels no longer support auto-play. This decision was made in compliance with best practices for usability and site design, not to confuse users by changing elements on the page without their consent.

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.

New Brand Features

At a Glance
Completely reimagined and has great flexibility in how it can be used.
Layout has improved presentation.
Works in more column sizes.
Supports swipe to change slides in RWD.

Overview

In old brand, this component did not function perfectly in RWD, and slides were displayed without the descriptive text in small-screen devices.

In the new brand, this component is completely reimagined and has great flexibility in how it can be used.

  • Layout has improved presentation.
  • It will work in a wider variety of column sizes.
  • When it is used on the home page, it is optimized to work with they key tasks, or as a dramatic hero deck.
  • This component is optimized for RWD. Also users on touch screens will be able to drag/swipe to change slides.

Details

The Slide Deck is optimized to display elegantly in all 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).

Works Best with Highlight Template

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

Restrictions

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

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 don't want to link to anything. For example, you have a series of pictures of people making statements, with captions, but you do not have anything more to show 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 Carousel.

  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 Carousel.
  4. Add any additional details, such as a heading, and descriptive text.
  5. Back in the Carousel, link to your Shared Content page using a Curated or Child Pages list.
  6. The video can now be played from the Carousel. 


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:

April 20, 2017