Content Slider Element

When building your website you may want to consider having a concurrent banner at the top of all your pages. This gives all your pages a feeling of unity and assures viewers that they are still on your site while navigating. Within CommonSpot as a custom element exists an element named "Content Slider." While there are may ways to achieve creating a banner for your website, our "Content Slider" element offers a more user-friendly approach. The "Content Slider" features captioned images that cycle at the top of your pages (see images and links below). Make sure you add this element to your site's template for it to appear on all your pages. 

With thumbnails:

cs sliderwithnails-300x145

Without thumbnails: 

cs sliderwithoutnails-300x161

Creating a banner using "Content Slider" can be done in five (5) steps: 

  1. Upload your images to your CustomCF 
  2. Insert the custom element "Content Slider" 
  3. Define the element data fields
  4. Caption your images 
  5. Choose your preferred handler

Detailed Tutorial

We have had the Content Slider custom element for a couple of years now and most recently we have created a render handler that allows you to cycle captioned images without the thumbnails (see examples above). 

To create a banner using "Content Slider" follow these five (5) steps: 

Step 1: Upload your images to your CustomCF folder found in your Subsite Tools. Make sure you create a separate folder only for these images. In the image below the folder is named "testslider." All photos in this folder will be used in the element. If you get stuck try our tutorial on uploading files to your CustomCF. 

cs uploadsliderimages-300x140

Step 2: From your template insert a new element and define this element as "Content Slider" found under "Custom Elements." 

cs choosecontentslider-300x188

Step 3: Define the data fields for the element by clicking on the gear icon, selecting "New Data" and completing the data parameters. The first field is the number of images you are displaying. Next you will type the name of the folder you uploaded to CustomCF. To produce the banner without thumbnails set "Left Width" to 960 (or full page width) and "Right Width" to 0. These numbers are the width in pixels (what is a pixel?) of each part of the element. By setting "Right Width" to 0 you are telling CommonSpot you do not want the right side--which contains the thumbnails. Set the border to 0 and set the number of second you want each picture to display. If you want the thumbnails to appear try setting each width to half the full page width (e.g., "Left Width" and "Right Width" both 480 pixels and the boarder at 0) 

cs definedataslider-300x267

Step 4: Now it is time to caption your images. Choose the tabs at the top of the element data box to caption each image. Tab one should be used for the first image in the file, tab two for image two and so on. It may be helpful to write down to order the images appear in your CustomCF folder to properly label each image. Once completed click "Save." 

cs captionimagesslider-300x246

Step 5: Now for the last, but most important step. If you are creating a banner without thumbnails you will need to change the render handler from default to "Thumbnailless." If you are keeping the thumbnails, you do not have to change the handler, however you must make sure your element doesn't exceed the page width. You can change the handler by clicking on the "gear icon" from earlier, selecting more and clicking "Custom Render Handlers." The menu will appear with the "Thumbnailless" option. And that's it! Now you can make a clean-cut and powerful banner for your pages.

cs ContentSliderRenderhandler03

Tips & Tricks

If you ever would like to change the captions or any of the data in the element you can do this easily by clicking on the "gear icon" and clicking "Data" instead of "New Data." 

You've heard the saying a picture is worth a thousand words, right? While an image can be one of the most impacting additions to your website, there are some things to keep in mind when working with web images. Images that appear in a banner should be of high resolution and quality. The clearer your images the more professional your site will become. It may not be a bad idea to review this helpful post on web images. Image Resolution and how it effects your webpage.