Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  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 Admin > Page Customisation > Configure Carousel”Carousel.

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

...

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

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

    Image RemovedImage RemovedAddItem.pngImage AddedImage Added
  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):

...

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.

...

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.

...