Slideshow block

Details

Description:

The Slideshow block allows you to create a rotating gallery of images. The block allows for captions, image alt text, a URL field to link to an internal or external web page, a language field, and a custom class field to define your own CSS stylings in a supplemental.css file.

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 "Slideshow block" folder.
  4. Click on the Slideshow 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/Slideshow 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 Slideshow block in to and then, in the asset tree for your site, navigate to /Base Folder/_user-blocks/. 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 Slideshow 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 Slideshow block is styled through the CMS' central files. You do have the option of adding your own CSS in a supplemental stylesheet.

How to create a Slideshow block

Slideshow configuration settings

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

Slideshow slide entry

  1. Image file - select the image you want to include.
  2. Caption - Enter your caption information in this field.
  3. Alt text - image alternative text for accessibility requirements.
  4. External link URL - If the image should link to an external page, enter the external URL.
  5. Or, internal link (page) - Or, if the image should link to an internal page, choose that page here.

Note: This portion is like the repeating content block areas used throughout the CMS and the plus [+] in the upper left corner will allow you to create multiple slide entries.

Language settings option in the slideshow block

Users 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.


Custom style field for the slideshow block

Users can include a custom CSS class to customize the look of the slideshow. See the CSS Stylings section below for more information.

Slideshow block comments area

Users can create a log of comments as desired.

Prepping your images

For the sake of consistency, the images used in your slideshow 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.

How to attach a Slideshow block

How to attach a slideshow block

A Slideshow 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 Slideshow block appear on your page.

CSS Stylings

All blocks offered in the Content Library have a built-in hook to allow users to create custom stylings via the use of a supplemental style sheet. To date, the following classes have been created in conjunction with the available blocks:

  • Code block - class name: ._code-block
  • FAQ block - class name: ._faq1 (._faq-block)
  • Feature block - class name: ._feature-block
  • Jump menu block - class name: ._jumpmenu1
  • RSS block - class name: ._rssfeed1 (._rssfeed-block)
  • Slideshow block - class name: ._slideshow1 (._slideshow-block)
  • Title area links block - div id: #links
  • Video block - video2.css
  • XHTML Raw block - class name: ._xhtml-block