icon Jumbotron
Created by Orckestra

How to show content in a Jumbotron

To show content in a single Jumbotron:

  1. Edit a page.
  2. Insert the Orckestra.Web.Html.Jumbotron function ( Insert | Function) or add the following code:
    Expand code
  3. Add your content in the Content parameter ({CONTENT} is the placeholder for the content)
  4. Specify the optional parameters:
    • Is Slim: When checked ("true"), the Jumbotron will be made smaller in height. Uncheked ("false") by default.
    • Background Overlay: The color scheme to lay over the content background or background image: 'none', 'light', 'dark'. 'dark' by default.
    • Background Image: An image to use as the background for the content. None by default. ({IMAGE} is a placeholder for the image from the Media archive.)

How to show content in Jumbotron slides

First of all, add the slides to the page where you want them to show up:

  1. On the "Content" perspective, select a page.
  2. Add the "Jumbotron Slides" page data folder to the page (right-click > Add Datafolder > Jumbotron Slides > Finish.)

Next, add two or more slides:

  1. Below the page, select "Jumbotron Slides" and click "Add Data" on the toolbar.
  2. Fill out the fields of the form on the "Slide" tab:
    • Title: The title of the slide.
    • Background Image: (optional) An image to use as the background for the content. None by default. 
    • Background Overlay: The color scheme to lay over the content background or background image: 'none', 'light', 'dark'. 'dark' by default.
    • List Priority: The position of the slide.
  3. Add content on the "Slide Content" tab.
  4. If necessary, control its publication status and schedule.

Finally, add the rendering function on the page:

  1. Edit a page.
  2. Insert the Orckestra.Web.Html.JumbotronSlides function ( Insert | Function) or add the following code:
    Expand code
  3. Specify the optional parameters:
    • Transition Effect: A transition effect to use between two slides. 'random' by default.
    • Navigation Style: A navigation style to use: 'Pager' or 'Prev/Next'. 'Pager' by default.