You are browsing myClubhouse Knowledge Base

Image Carousel

Owned by Peter Hickson, created
Last updated: Apr 16, 2024
5 min read

The Image Carousel is a CMS Widget that allows you to include a slideshow of images on a CMS page. It is a feature included in the default configuration of the home page too. Each image can be restricted to certain Member Lists, contain links, and only be active between certain dates.

Read about other CMS Widgets in this guide here: CMS Widgets

Read more about CMS pages, and customising the Home page here: CMS

Important Legal Note: It is your responsibility to ensure you own the copyright or have the appropriate licence for any images you display on your site.

Adding the Widget

  1. In a new block or column, click “Widget”.

  2. Select “Image Carousel” in the Widget list.

  3. Click “OK”.

Mode

  1. Click the “cog” in the top right corner of the Carousel.

  2. Select the Mode for the Carousel:

    1. Default: Default mode uses the central carousel configuration as defined in Admin > Page Customisation > Configure Carousel.

    2. Custom: Custom mode allows you to set a different set of images to display just on this Carousel.

Add Item

  1. If you have chosen “Default” mode, navigate to Admin > Page Customisation > Configure Carousel.

  2. Click the green “Add item” (For “Default” mode) or “Add…” (For “Custom” mode) button.

  3. Complete the Wizard:

    1. Image: Click “Change” to select an image already uploaded, or to upload a new image.

    2. Caption: The caption will appear at the bottom of the image.

    3. Description: A description below the caption over the image.

    4. Text Colour: The colour of the text of the caption and description.

    5. Link URL: Enter the link you want the image to take the user to if clicked. This could be within myClubhouse or to another external website.

    6. Active Date Range: You can limit the image to only appear during certain dates. This could be used if the image was to promote an Event, and it saves you having to remember to remove it when the Event is over.

    7. Restrict to Member List: You can limit the image to only appear to a certain Member List by selecting it from the dropdown. For example, a junior Event would only want to be shown to juniors. If you want everyone to see it, leave the field as “Everyone”.

    8. Hide for Member List: You can exclude Member Lists from seeing the image in the carousel. For example, if an image was encouraging users to register for membership, you wouldn’t need to show that to current members. If you don’t want to hide it from anyone (within the Member List selected above in step g), leave the field as “Everyone”.

    9. Active: If checked, the image will appear in the carousel.

    10. OK: Once happy with the details, click “OK” to save the image and add it to the carousel.

  4. This is the result (in the carousel):

Position

If your carousel is in “Default” mode, you can change the order that images appear in the carousel by clicking the green arrow to move the current image up one position, or the red arrow to move it down one position.

If your carousel is in “Custom” mode, you can change the order that images appear in the carousel by clicking “Re-order” and then dragging to rearrange the images.

Delete Item

Carousel images can be deleted so that they do not appear anymore. This is more permanent than unchecking the “Active” field. To delete a carousel image:

  1. Click the red “x” (For “Default” mode) or dustbin (For “Custom” mode) next to the image

  2. Click “Yes” to confirm.

Widget Options

  1. Page Jump Links: You can add a button at the top of the page to jump to this component when clicked. Enter the link name (for the link itself) and the caption (for the button).

  2. Device Visibility: This page element can be hidden on devices of different sizes by de-selecting the appropriate options. E.g. If you do not want it displayed on mobile phones, de-select the “Phones” option.

  3. Custom CSS: If you have added any custom CSS in Site Styles & Colours, you can add CSS classes here that you want to be applied to this component.

Tips

For a full-width carousel, the recommended aspect ratio for images is 10:3.5. An example size would be 3500x1225px. This helps the images to show up best on different sized screens including mobile phones and tablets.

If images are not large enough to span the full width of the carousel, parts of the adjacent images will be shown to either side.

When selecting images to use on a carousel, high-quality photos are encouraged so that they don’t appear grainy on larger screens. You can also use image manipulation software to combine images into a collage to then use as the image for a carousel.