How Do I Create a Carousel for My Existing Page?

Modified on Wed, 21 Jun, 2023 at 1:55 PM

Carousels are a part of the Cover functionality that has been implemented into the Ploud Platform. At this point, carousels can only be placed on Cover Pages. You can convert an existing page to a Cover page by simply copying its content into the right Tile within a New Cover Page. The following steps will guide you through this process.

NOTE: Michigan Libraries has developed a tutorial video that helps explain how to work with carousels.

You can only create one carousel on a single cover page.

PART 1

PART 2

Locate the page you want to add the Carousel to.
Within the same directory, Select Add new... from the Green Edit Bar and then Select Cover.
Next, Name your page and then choose the Ploud Carousel Page Layout and Click Save.
Click the Compose tab of the Green Edit Bar. You will see that the Ploud Carousel Page layout is a two row, single column layout with a Carousel tile on the top and a Rich Text Tile on the bottom. The bottom tile is where we will place the content of the page you are copying.
On the resulting screen you can now start inserting content. But first, let's copy the contents of the page that you want the carousel on. This can be done through Cover's drag and drop tools. Click on the Add Content button.
From the content picker, find the page whose content you want to copy and drag and drop that page onto the Rich Text Tile in the second row of the Cover page you created.
You content from the page you drag and dropped into the Rich Text Field has been copied from that page and can now be managed from this new cover page. If you click on the Edit link in the top left corner of the Rich Text Tile you will see the familiar WYSIWYG Editor and the ability to Edit the content you copied.
The next step is to create a Carousel using the top row and Carousel Tile. First a few recommendations.
a) For carousel images, make sure all of them are the same height and width for the best results. Otherwise the carousel will dynamically resize based on the image it is displaying causing your content below the carousel to jump around a bit. If you want your carousel images to have a height and width ratio of your standard flat screen TV (called a 16 by 9 ratio) which is pretty standard for carousels, you would want all of your images to be cropped in the same way. The resulting size for that ratio would be 768 pixels wide by 432 pixels high. here is a link to a calculator that will help with your sizing: http://size43.com/jqueryVideoTool.html. Just plug in the desired width and it will calculate what height you should crop your image to. There is also an online image cropping tool that can help you crop your images:https://croppola.com/.

b) Your images should be one of the following widths based on your page layout:
768 pixels wide if your page has portlets on the left and right side of your main content area. (most common scenario)
980 pixels wide if your page has only portlets on the left or only portlets on the right.
1140 pixels wide if you have no portlets on the left or right and your content spans the full width of the page.
Before we drop images into the carousel, we have to tell the carousel tile what size we are setting our images to. This helps manage the size of the image that is presented to your patron if a content administrator uploads a really large photo. For example if a content administrator uploads a digital image that is 2500 x 1400 pixels in size, we do not want to serve that image to the patron in an area that is only 760 pixels wide. It takes a lot of bandwidth and makes your page load very slow. So, in this case what we do is allow you to select the image size that gets presented to the patron by using pre-set image sizing. While in the Layout Tab, Click on the gear icon ( ) that is within the Ploud Carousel Tile.
In the resulting window there are several options. We recommend that you set the Image value to large 768:768 for a carousel that is on a Cover page that has left and right columns. You can leave the Position pull-down value alone. Click Save to save your changes. Now we are ready to populate the carousel with images.
Before you can drag and drop you carousel images into your carousel, they need to be uploaded somewhere to the site. They can be uploaded anywhere. We recommend that you either centrally manage your carousel images in the /site-assets/images/carousels directory or you can upload them to the directory they will be used in. Once your images are uploaded you can continue to the next step. NOTE: Wherever you upload your images, the folders they reside in must be Published for the images to be visible by your public visitors.
Make sure you are on the Compose tab in the Green Edit Bar. Click on the Add Content button ( ).
In the Content Selector, Navigate to where your carousel images are:
Drag and drop the first image you want into your carousel tile:
Drag any other images onto your carousel that you want to include and then close the content chooser.
What you will see is the carousel with your images and your image names, which we will want to change next. Click on the Edit Link in the Carousel tile which will bring up a dialog box with all of the configuration options for the tile and your carousels. Change your Custom Titles, Custom Descriptions and Custom URLs for each carousel image. Make sure your titles and descriptions are not too long so that they fit within the overlay that gets transposed over the image within the carousel.

If you want to remove an image, click on the 'X' icon next to the carousel image. The Tile Title, Show more... Link, and Show more... link text fields are not used at this time for the Carousel tile.

NOTE: The Auto play checkbox is checked by default so that the carousel will automatically play when the page is loaded. If you do not want this to occur, uncheck this box and when the page loads, the carousel will not transition automatically and the patron will have to manually click the Carousel navigation elements to shift to the next image. The Custom URL is the target where the patron is linked to when they click on that particular image. Click Save.
You should now delete the original page you copied and have this page in its place.
If you want this new Cover page to be your default Home page, Go to this article to find out how to set your default home page.