WiscWebCMS - Responsive Template (rst) - Adding and Using Photo Carousel
This document explains how to add and edit the Photo Carousel content block.
Photo carousels allow you to have a series of photos display on a page and rotate through as users browse the page. It is useful to show off projects your group is working on, upcoming events, and other other work you want to highlight.
Adding the Photo Carousel content block
- Navigate to the page to which you want to add a photo carousel.
- In order to add a Photo Carousel, you must click on the button that allows for Open Page for Editing. Then click on Manage Main Content.
- Select Create and Connect Page.
- Select Photo Carousel.
- Give the page a headline. We recommend following the format of "Photo Carousel - (Page Description)" where (Page Description) is a short description of the page on which the carousel appears.
In order to access the Block Settings you will have to click on "Open image carousel", which can be identified by a star icon to the right of the red button with an arrow pointing to the bottom-right corner.
Block Settings will be the first section of the black options box that pops up as seen in this picture.
- Block Title
- Editing the Block Title, if you choose to have one, will allow for a title in large font to appear on top of the Photo Carousel.
- Sets a maximum width for the carousel (thumbnails and other nav will also be constrained to this width).
- Left (or none) is the default behavior, Center will center the carousel, and right will right-align. Note that a width needs to be set for the center option to work properly..
- Indicators are an extra navigation tool for the Photo Carousel. There are 3 different options for Indicators.
- The first Indicator is "Thumbnails". Upon managing slides (guidelines on how are found towards the bottom of this document) and going to the image settings you will find a section where you can edit "Thumbnail" and "Thumbnail Caption". Uploading a thumbnail corresponding to the Carousel Image will have that thumbnail image appear right underneath the carousel if this Indicator option is set to "Thumbnails". Editing the Thumbnail Caption will allow for it to show underneath the thumbnail picture.
- The second Indicator is "Dots", which allows for a row of dots to appear underneath the picture area of the photo carousel. Selecting a specific dot will direct you to the photo the dot is connected to.
- The last Indicator option is "None", which will turn off any notion of Indicators.
- By turning this option off you will hide the Forward and Rewind button found (looking at the first picture example) on both sides next to the Play and Paus buttons of the same color, which are extra navigation tools for the Photo Carousel
- By turning this option off you will hide the Play and Pause button found (looking at the first picture example) in between the Forward and Rewind buttons of the same color, which are extra navigation tools for the Photo Carousel
- By turning off Autoplay, you will disable the Indicators options. If Autoplay is off, the Photo Carousel will not cycle the pictures based upon the transition speed setting.
- By turning off this option you hide a small bar that indicates which photo you are on in the order that each photo is supposed to appear in.
- There are 4 Transition type options.
- Fade Out: This option is very similar to the fade option. The only difference is that Fade Out has the next picture slowly take over the picture by fading in while the previous picture still remains.
- Fade: Very similar to Fade Out, Fade instead has the picture first slowly disappear, and then the next picture will quickly fade over the screen.
- Scroll Horizontal: This option will have pictures slide from right to left as the next picture transitions in.
- None: This option will have pictures instantly transition over to the next picture, literally being the "no-transition" option.
- By adjusting the transition speed (default is 5000ms or 5 seconds) you can adjust the speed at which the next photo will display. The smaller the number, the quicker the transition. The larger the number, the longer the transition. KEEP IN MIND THAT 1000 ms = 1 second!
- By turning off Loop you will enable a "shuffle" option that randomly transitions photo regardless of order. By enabling Loop you will have photos transition in the same order over and over again.
Managing the Slide, adding pictures
In order to manage your slides you will have to open up the Image carousel by clicking on "Open image carousel", which can be identified by a star icon to the right of the red button with an arrow pointing to the bottom-right corner.
At the bottom of the black options box you will see "Manage Slides" and click on the red editing dot to the left of it. You will "Create and Connect Page" and do this for each and every photo you want to include in the Carousel, managing them separately. Once you've created a photo page and click on it in the "Existing Slides" section, you will be directed to a different "Settings" page where you can manage the specific photo page you chose.
- Slide Image (required)
- This is where you can upload or select the picture (if you already uploaded the desired photo onto WWCMS) you would like to put onto the Carousel. Upon clicking the red editing dot with an exclamation point (stands for "required") you will have a Management Server pop-up that will let you select the Slide image.
- After clicking on the pencil icon, you will have a 2nd pop-up window that will lead you to the Media Asset Management window. Here you can click on "Select Asset from Local File System" to browse for pictures that haven't been uploaded onto WWCMS yet, in order to upload them. If the picture has already been uploaded, it should show up here and you would just have to click on the file name underneath the picture thumbnail and click "OK" in the bottom right corner to use that picture.
- This is where you can edit the caption that appears in the bottom left corner of the picture on the carousel.
- This is where you can add an internal or external link that anyone will be direct to once they click on the picture while it's in the carousel.
- This is where you can upload a Thumbnail picture that will correspond to the specific Image you are editing. Refer to the "Indicators" section above in "Block Settings".
- This is where you can edit the Thumbnail picture's caption that will show beneath of it if "Thumbnails" is enabled in Indicators.