Videoslider block

Details

Description:

The Videoslider block allows you to create a rotating gallery of images that, when clicked upon, can launch a lightbox to play a video or link to a page. The block allows for captions, image alt text, a URL field to link to an internal or external web page, a language field, a custom class field to define your own CSS stylings in a supplemental.css file and a theme switcher.

Installation:

  1. From your Global drop-down menu (upper left part of the screen where your site name is listed) click and select "Content Library".
  2. Click to expand the "General Library" folder.
  3. Click to expand the "Videoslider block" folder.
  4. Click on the Videoslider block.
  5. In the view pane on the right, click the Copy tab.
  6. Click on the Parent folder link that, by default, reads "General Library/Videoslider Block". A dialogue box will pop up. The drop-down menu at the top reads "Content Library". Click on this and select the site you want to copy the Videoslider block in to and then, in the asset tree for your site, navigate to the appropriate folder that is based on the 'folder - not used by navigation'. Click Confirm. The dialogue box will close.
  7. Click Submit.
  8. Navigate to where you saved the block on your site. Click on it. Click the Edit tab in the view pane and set up the block as you wish using the instructions below. Click Submit to save.
  9. Navigate to the page where the Videoslider block will be added. Click on the page and, in the view pane, click the Edit tab. Attach the block in the desired repeating content block and click Submit to save.

Customization:

By default the Videoslider block is styled through the CMS' central files. You do have the option of adding your own CSS in a supplemental stylesheet. You can review the offical stylesheet for the videoslider.css to see what default classes you can overwrite in your supplemental.css.

How to create a Videoslider block

A view of the sections contained in the videoslider block

  • Title - text that will show up at the top of the videoslider. Styles will be influenced by your selection in the Style > Theme switcher.
  • Heading level - the semantic heading level and should NOT be used as a means of changing the font size. If you're unfamiliar with semantic HTML, please leave  it at the default H3.
  • Intro - content added here will appear above your videos/images in the slider.

Videoslider settings

  • Slideshow speed (seconds) - Indicate, in seconds, the rate at which the images rotate.
  • Animation duration (seconds)Indicate, in seconds, the length of time the transition animations between images last.
  • Direction navigation?By default, directional arrows are included in the slideshow so users can choose to go back and forth in the gallery.
  • Paging navigation? - By default, the slideshow block will create a page navigation system below the slideshow gallery.
  • Pause on hover? - By default, the slideshow will pause the image rotation if the user hovers their mouse over the gallery.

Details on how to attach and configure videos and images

  • Poster image - the image used to represent the video or image
  • Caption overlay - text that will overlay the poster image
  • Alt text - *required for accessibility and best practice standards
  • Video settings
    • External video URL - provide URL for your YouTube video
    • Video lightbox width - select pixel width to define the width of the lightbox that will display your video
    • Video lightbox height - select pixel width to define the height of the lightbox that will display your video
  • Static image settings
    • External link URL - web page to which the image link will direct the user
    • Or, internal link (page) - page to which the image link will direct the user
    • Long description

Style and language setting options

  • Language codeUsers have the option of setting language elements in case foreign language text is included in your page. A list of codes can be found on the W3C schools site.
  • Style
    • Theme - A selection of preformatted styles that will affect the look of the Title section of your block.
    • Custom classUsers can include a custom CSS class to customize the look of the slideshow. 

Prepping your images

For the sake of consistency, the images used in your videoslider should should all have the exact same height and width, to a maximum width of 1400px and a web DPI of 72. If you don't already have access to image editing software, the CMS offers a very basic way to edit your images once uploaded.

Notes about the right column

The Videoslider block will display anywhere in the Flex page's left, right and main content columns. When used in the Standard page's right column you will notice a slight change of display to compensate for the much narrower field of presentation; specifically, the navigation buttons at the bottom will not appear so as to avoid a stacking effect if more than a few videos or images are included in your block.

How to attach a Videoslider block

How to attach a slideshow block

A Videoslider block can be attached anywhere a regular block can be attached to a page, but best practices suggest attaching this block in a main content area where the block can make better use of the variable width instead of the limited with of a left or right panel. Once done, you can publish the page to have the Videoslider block appear on your page.

Videoslider Demo

An illustration of a functioning videoslider block and its content.