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

Transforming UB’s digital communications through process and tools

Full Width Carousel Component

Display a horizontal series of teasers to promote key pages on your site, like a smaller version of the horizontal slide deck.

New Brand Features

This component is completely reimagined and has great flexibility in how it can be used. It is now optimized for RWD.
read more about the digital brand transition
> read more about changes to this component

Using This Component

Add the component to the page. You will initially see only the List tab. An additional tab appears after the Build list using option is chosen.

Add a title and text to describe your Full Width Carousel, plus a series of links to pages on your site. The linked pages should be in Shared Content, and built using the Highlight Template. Each slide will then showcase that page’s title (which links to the page’s URL), description or introductory text and main image. YouTube videos will be playable.

The component as it is first displayed on the page.

The component as it is first displayed on the page.

Works Best with Highlight Template

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

Carousel Module Tab

Title: Type a descriptive title that will be shown on the published version.

Text: Type a description that will be shown on the published module. A Rich Text Editor allows some formating.

Background color: For the new brand, choose between gray (default) and white.

The component opened for editing showing the Carousel Module tab settings.

The component opened for editing showing the Carousel Module tab settings.

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 Carousel Items tab settings.

The component opened for editing showing the Carousel Items tab settings.

Advanced list options

  • Start at: Select how many items you would like to skip at the beginning of the list (example: '5' will skip the first four items and begin the list at the fifth item). Left blank, the default value of '1' will result in the list displaying every item in your list. This setting can be useful if you wish to feature several items in one group, perhaps at the top of your news page, or on your homepage, and NOT have them repeated with the rest of your list displayed elsewhere on your site.
  • Limit: Choose a maximum number of entries (optional).
    • If left blank, the default value is 100; for example, if you leave it blank, no more than 100 items will be available.
    • If you set the Limit value smaller than the Paginate after value, users will never see the next page navigation!

Tip: If you want all items to appear in the list, do not leave the Limit field blank. Instead, enter a value that you anticipate will meet your needs; for example, 200, 500, etc. (The News Center has used 9999 as a 'very large number' because their archives date to 1990.)

  • Paginate after:  This setting turns on paginated returns, with the maximum number chosen displayed for each page (optional).
    • If left blank, the page will display all entries in the list.
    • If defined, a button labeled Next will appear at the bottom of the list on the first page. The subsequent pages will also include a Previous button until the final page of entries.
  • Exclude current page: Do not display any entries that link to the page on which the list is shown (optional).
  • Enable Scheduling: Select to enable shared content Scheduling.
    • Scheduling can be used to automatically change the content in a list over time.
    • When scheduling is enabled, only pages whose “Featured on/off time” (as set in each page’s Page Properties) will be shown in the list.
    • Scheduled lists can be previewed for a given date and time by right-clicking the list and choosing “Schedule Preview”.
    • Unlike Delayed Activation or Scheduled On/Off Time, Featured On/Off Time does not affect the page’s visibility elsewhere on the site; it is still visible in navigation or by direct link.
    • Pages with “Featured on/off time” set must also be activated.
    • Examples of uses for list scheduling:
      • Hide an application link after a deadline has passed.
      • Switch from one featured image to another in a slideshow each day (set the start time of one item to the end time of another).
  • Empty Message: Choose a suitable message that will display if the list is currently empty. (In the example shown above, it will say "Sorry, there is no news today.")
The component opened for editing showing the Advanced list options.

The component opened for editing showing the Advanced list options.

New Brand Features

At a Glance
Reimagined for new brand. 
Has great flexibility in how it can be used.
It is now optimized for RWD. Now supports drag to change slides.
New: gray (default) or white background colors.

Overview

In old brand, this component has basic functionality and was not responsive in RWD.

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

  • It is now optimized for display in RWD. Users on touch screens will be able to drag to change slides.
  • You have options of providing title only, description only, or title with description.
  • Image thumbnails are now squares.
  • Works best for 6+ items. If you run fewer, it will have open space at the end and not look good.
  • YouTube videos are playable, provided you use the Shared Content pages built using the Highlight Template.
  • PNG format images will blend with the background color. This is a natural feature of transparent PNG images.
  • Two background colors are provided: gray (default) or white.

Restrictions

  1. This component is best suited with a Landing Page, One Column or Wide Page template but will work in narrower columns.
  2. When you choose to display more than four carousel items at once, visitors are provided with left and right clickable controls which allow them to cycle through the list of web pages.
  3. This component may have compatibility issues for RWD-enabled sites in the old brand (details).

Advanced - Building a Complex Search Query

These tips should apply to all UBCMS components that provide a 'build by search' option (e.g. List Builder, News List, Event List, Full Width Carousel and the Horizonal and Vertical Slide Decks).  

Search Operators

  • Boolean AND - All words in the search query must be present. A space basically functions as an AND operator.
    e.g. international students, equals "international AND students" and will find pages with both those words present.
  • Boolean OR - Any of the words separated by OR must be present.  Use OR  ("OR" must be capitalized).
    e.g. abc OR def will find pages with abc or with def, or with both words.
  • Boolean NOT - Exclude a word from the search query by preceding it with a dash/minus.
    e.g. abc -def will find pages with abc but exclude those with def.
    For an OR search, be sure to exclude the term from all parts of the search equation.
    e.g. abc -def OR xyz -def will find pages with abc OR xyz but exclude those with def.
  • GROUPING - Use parentheses ( ) to set precedence among your search operators - parenthetical actions occur first.
    e.g. (abc def) OR xyz will find pages with both abc AND def (as described in the AND section), as well as pages with xyz.
  • PHRASE - Threat the words as one alphanumeric string by using double quotes " ".
    e.g. “abc def” xyz - will make abc def be in sequence, and xyz anywhere.
  • DISTANCE - "abc def”^10 will find pages with abc within ten words of def.
  • WILDCARD - Use ?  to match any one character. Use * to match any number of characters respectively. Do not use either wildcard at the beginning of a word.
    e.g. buil? would find pages with build or built but exclude pages with buildings
    e.g. buil* would find pages with build or built or buildings

Searching for Tagged Pages

You can also use the search option to list tagged pages. And the above logical operators allow fairly advanced logic for tagged pages that is not possible using other tools.

  • Each tag has an ID that looks like this: sandbox:admin-services/policy/admin
    • Authors can see it in Page Properties, in the Tags option, by hovering over the tag.
    • Tag Admins can view the ID in the “TagID” column in the Tag Admin interface.
    • This ID is also visible in the page's source (e.g. Right-click + View Page Source).
  • Use the complete ID in your search in quotes and with the logic operators described above.
    • e.g. "content-type:policy" -"sandbox:admin-services/policy/admin" would find pages with the policy tag but exclude those with the admin-services/policy/admin tag.
  • You must fill in the Start in path for this to work. Unless you have something more specific in mind, use “/content”.
  • Search returns will include child tags of the searched tags; e.g. "sandbox:admin-services/policy” also matches the tag sandbox:admin-services/policy/admin
  • If the actual text like "content-type:policy” is on a page, that page will be found, too. Since most punctuation and capitalization are ignored, this could also appear in prose as something like “… the correct content type. Policy says you should …”
  • The search will also find its itself (the search page), since the query is stored in the page. You can prevent this by adjusting the Start in path to exclude the current page (such as searching for shared content only), or by using the Exclude current page checkbox under Advanced options.

Was this page helpful?

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

RWD Issues for Old Brand

This component did not function well in RWD and is turned off in old brand sites.
> Read more

On this page:

See an Example:

Related Components:

Last Reviewed:

June 19, 2017