shadow_tr

Contributors > Rotating Image Gallery



Follow these steps to set up an image element like the one on the Tulane home page where a different image is displayed each time the page is refreshed. Prepare your images and captions, if desired, before you begin:

  1. Image Quantity. The image gallery element will accept up to fifteen images, but only the first 10 images will be displayed in your rotating image element. If you have more than 10 images, consider changing them out after a few months to keep the page feeling fresh. If you have less than 10, enter some more than once. You must have 10 images: no more, no less.

  2. Image Size. Rotating images typically work best if all the images are the same size. Learn more about image requirements and sizing images.

  3. Captions. You can choose whether or not to enter captions. They will appear when the user holds their mouse over the image that is displayed. In some browsers, users also can click the image to view a page with all the photos in the gallery and their captions. Please note: captions cannot contain apostrophes or quotation marks.

 

Step 1 – Insert the gallery element

Click to insert a new element >> Image Elements >> Photo_Gallery.


Step 2 – Enter images and captions

Click to define the Photo_Gallery element to open a form where you can enter your images and captions. You can upload your images as you populate the gallery; or, if they have already been uploaded to the CMS, find them in the Gallery.

If you are adding captions, paste the caption text in the Alternate Image Text (Flyover Text) field for each image as well as in the caption field on the gallery form.


Step 3 – Set the gallery to rotate the images

Click the gear for the gallery element and choose more. Then go to Custom Render Handlers and select "Single Random Image." Now, one of the 10 images you entered will be displayed each time a user visits your page.


Step 4 – Verify that the gallery is working correctly

If you see a blank space where your rotating images should be, check to be sure that you have 10 images in your gallery element and that your caption text does not contain apostrophes or quotation marks. If you are not seeing your images in Internet Explorer, check to be sure that the images are 72 dpi and in RGB color mode. Image files should be in jpg, gif or png format.




 

Citation information:

Page accessed: Friday, July 25, 2014
Page URL: http://tulane.edu/news/webpublishing/cms/contributors/rotating-images.cfm

Tulane University, New Orleans, LA 70118 504-865-5000 website@tulane.edu