'Carousel' tile

Owned by Tim Jones
Last updated: Apr 28, 2021 by Jay El-Kadhi

You will need this information when you have added a Carousel tile, and wish to populate it for the first time, or edit it.

What is the Carousel tile?

The carousel tile is for promoting the content across your website. It will allow you to display multiple items of content, with its image, title and description to help sign post users to the areas of the site you would like them to look at. There are multiple display options for the carousel tile, to present your content in different ways.

Adding items to the Carousel tile: 

  1. In the 'Compose' view, you will see that your carousel tile is empty (unless you are coming back to edit it!). To populate the carousel tile, you can simply drag items of content from the content chooser on the left over the tile, and when you drop them, they will be added to the carousel. 
  2. You can either find items of content in the 'Recent items' list, or you can search for them by name. Please note, an item of content will only register in the carousel if it has an image associated with it. You can add as many items to the carousel as you wish, however we would recommend a maximum of five slides. When you add an item of content to the carousel tile, it will display the following information:
    1. The title of the item of content
    2. The description of the item of content, if there is one
    3. The main image
    4. It will also display a 'Read more' arrow on each slide, and this will be a link to the item of content that you are promoting on the carousel.

Editing the items in the Carousel:

  1. Hover over the Carousel tile and you will see the blue 'Edit' button appear in the top left of the tile, click this to edit the following:
    1. 'Content' tab:
      1. Layout: Select from the drop down list which carousel style you want to apply.
        1. Standard - This is the most commonly used layout, it has the title, description and read more link in a block of colour to the left of the image.
        2. Full width - The full width version displays the title, description and read more link at the top of the carousel in a block of colour. Please note, this will require more thought around the image that is used as it will sit on the top half of the image.
        3. Panels - This view is used for displaying multiple images at one time. This view is designed to work with either 5 or 7 items of content. The item of content that is at the top of the list, will only show its title and description in a block of colour on the left of the carousel. The next 4 or 6 items will automatically scale and fit to the right of the block of colour. Please note, you will need to make sure that the carousel is not set to randomise the items of content, and that the interval is set to 0.
        4. Left tabbed and right tabbed - These views are for showing just the title of the item of content to the left of the image, but you will be able to see the titles of the three items of content stacked on top of each other in tabs. You can add more than 3 items, and arrows will appear to show the user that there are more items of content available in the carousel. This layout does not allow the items to change, so there is no need to set an interval speed. The image to the right of the text will change when a user hovers their cursor over the title of the item of content on the left.
      2. Image ratios: This define the scale of each image.
      3. Randomise: Checking this box will feature the carousel images at random 
      4. Carousel Interval: This is the speed at which the carousel changes the items of content
      5. Randomise: Check this box if you wish your slides to display in random order. If the box is not checked items will display in the order that they were placed into the tile.
      6. Items of content: You can reorder the items of content into the order which you wish them to be displayed in by draging and dropping them above and below each other.
      7. you can remove items of content by clicking the ' ' next to the item you wish to remove
      8. Hide title and description: you can use this to select whether or not the title and description displays on the carousel for each item of content
      9. Change or remove the description: by default, an image in the carousel will use its alt text, where available, as the description. You can change this description without affecting the alt text for that image or remove it entirely if you do not wish that image to have a description underneath the title on the carousel. As soon as you make changes to the description in the carousel, the alt text of the image and the description on the tile will no longer be kept in sync.
    2. 'Advanced' tab:
      1. Position of each slide's title and description - This filed allows you to define where on the slide the title, summary and button will display. To use these options, make sure that you are using the 'Full width' carousel layout option.
      2. Do not show 'Read more' button on any of the slides - Check this box if you do not want the read more button to show on the slides. Users will still be able to click on the slide to be taken to the content.
      3. Button text - this allows you to define the text for all of the 'Read more' buttons on the carousel.
      4. Apply a theme-coloured background to each carousel image? - Check this box if you would like the title, summary and button to show on a background colour that is part of the theme of your Haiku website.
      5. Background opacity for the theme-coloured background - Opacity is calculated on a scale of 0 to 100, with 0 being completely transparent and 100 being completely opaque. This affects only the background colour itself and not the text or image.
      6. Animation effects: Defines what visual effect will take place when carousel images change between slides.

Removing the Carousel tile:

  1. If you wish to remove the Carousel tile, navigate to the 'Layout' view of the cover page, and click 'x' in the top left of the tile. When deleting a tile, the tile you are selecting has a red border.