Custom Elements: “Cycle Images”

Share

Tutorial At A Glance

Having a website is a great tool to direct traffic to your department, organization or facility. The most important aspects of your site is making sure your content is accurate and useful. But even with the most useful and up-to-date information, you may want to add some cycling images for a dynamic effect. Our “Cycle Images” custom element is a good option to use to automatically display a gallery of images. View example here: Cycle Images

cycleimagessample

Creating a gallery using “Cycle Images” can be done in three (3) steps:

  1. Upload your images to your CustomCF
  2. Insert the custom element “Cycle Images”
  3. Define the element data fields

Detailed Tutorial – PDF

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 3 (3) 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.

uploadsliderimages

Step 2: From your template insert a new element and define this element as “Cycle Images” found under “Custom Elements.”

cycleimagesaddelement

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 location of images you are displaying. This refers to the folder inside your CustomCF that contains the images you wish to display. You must enter this properly with the full extension location for that folder. This is all that appears after ecu.edu (e.g, /cs-training/dalton/customCF/testslider). Another important field is the “Width” of the images. These numbers are the width in pixels (what is a pixel?). CommonSpot will use the width by default for the size of your images. If you are trying to trim your photos to a certain dimension it will not work in CommonSpot. The safest option is trimming the images before you upload them to your CustomCF. of each part of the element. The “Margin” gives you a border around the images. This is helpful if you want to center the images. All you must do is subtract the image width from the page width and divide the answer by two. This number when placed into the “Margin” field will center the element.

dataforcycleimages

And that’s it! Now you can display an image galley on your page.

Tips & Tricks

If you ever would like to change the transition effect 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.” Keep in mind the “fade” effect is what we recommend. It is least distraction to users and offers a more clean and streamline environment on your website.

If you are trying to create a banner using this try our “Content Slider” instead. It’s much more efficient for this use.

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.

Leave a Reply