Image Slider

The Image Slider Block allows you to easily create an image slideshow so you can show multiple images in one place on your page.   To start, select Image Slider from the Block Menu and create a new button block.

Basic settings

Define the basic parameters for your block:

  1. Name: Name of the block.  Be descriptive but keep it short.
  2. Region: Select layout(s) and region(s) where the block should be displayed.
  3. Title: Title shown to the end user if Title is turned on in the Advanced Settings.

Add one of more slides

Click on the Add Slide button for each image you wish to add to the slider.  Set the following parameters for each slide:

  1. Title: Title for the slide.  Leave blank if you do not want one. [Optional]
  2. Add Picture: Select the image you wish to add.  The recommended dimensions will vary depending on your page design, where you are placing the Slider Block, and the number of images you are going to show per slide.  Getting the right image and work the way you want it may take some a couple of tries.  Take a look at the post titled Working with Images.
  3. HTML Alt: Provides alternative information for an image if a user for some reason cannot view it.  May be blocked by the browser or the end user be visually impaired (using a screen reader).  If you are required to comply with an accessibility standard, such as the Web Content Accessibility Guidelines (WCAG), you need to set this attribute. [Optional]
  4. HTML Title: Displays extra information on the image using a tooltip text when the mouse hovers over the element. [Optional]
  5. Weight: Relative positioning of the image  [Optional]
  6. Type of Link:  Used to make you image clickable to direct the user to another page.
    1. None: The image is not clickable
    2. Image: Makes the whole image clickable
    3. Button: Displays a button on top of the image
  7. Summary:  Summary to show on the image [Optional]

Advance Settings

In addition to standard Advanced Settings found in all CSM blocks, the Slider Block has two more:

  1. Effect: The transition from slide to slide can be Slide (images come in from right to left) of Fade (images fade in and out)
  2. Images per Slide:  The Slider displays one image at a time.  You can choose to show more than one image in a slide.


0 Comments

Add your comment

E-Mail me when someone replies to this comment