Multi-image slideshow

Example of a slideshow (Show full image)

The following tutorial explains how to create a multi-image slideshow (otherwise called a slider or a carrousel).

Prerequisites

The module Dynamic View must be enabled on your website. If it is not enabled on your site and you do not have access to the modules page, please submit a request to have it enabled by the Web Support team through the Service Desk request form.

 

 

 

1. Create a Taxonomy term to identify the slideshow

  • Navigate to “Structure”, then “Taxonomy”.
  • Where it says “Content Groups”, click on “Add terms”.
  • Give the term a meaningful name, e.g. “Home - Slideshow”.

2. Create the slides

  • Navigate to “Content”.
  • Click on “Add content” and select “Content Link”.
    • Provide an English and French Title.
    • Provide an English and French Link.
    • Add a “Primary Image”. This will be the image for your slide.
    • Under “Content Groups”, select the term you created in step 1.
  • Save and repeat for any other slide you wish to add.

3. Create the slideshow

  • Navigate to “Structure”, then “Pages”.
  • Edit the desired page (e.g. “Home Page”)
  • In the left menu, click on “Content”.
  • Click on the top-left gear icon of the section where you want to place the slideshow, and select “Add content”.
  • A new window will appear. Select “Content” from the left menu.
  • Select the link called “Dynamic Content List”. A new page will load. Enter the following:
    • Display Mode: List
    • Click on "Source Settings" on the left. Choose the following:
      • Entity Type: Content
      • Sub-Type: Content Link
      • View Mode (Results): Link Block with Image
    • Click on "Filters" on the left. Choose the following:
      • Filter Method: Field (Taxonomy Reference)
      • Taxonomy Term(s): Choose the term created in Step 1.
    • Click on "Sorters" on the left. Choose the following:
      • Sorting Method: Nodequeue Order
      • Queue: Content Group Queue
      • Subqueue: Choose the term created in Step 1.
    • Click on "Pager" on the left. Choose the following:
      • Items per page: 5
      • Check "Hide the pager"
  • Click on “Finish”.

4. Styling the slideshow

  • Click on the top-right gear icon of your newly added slideshow. From the dropdown menu, under Style, select “Change”.
  • A new window will appear. Select “Component Styles” and click on the button "Next".
  • In the page that appears, configure the following:
    • Format: Slideshow
    • Container Type: Teaser
    • Summary: Hidden
    • Title Position: Absolute Bottom
  • Save the settings.
  • Update and save the entire page.
» Submit feedback
    Topics: 
  • Support
    Types: 
  • Tutorials
Back to top