Accessibility links

Breaking News

Creating a Slider gallery


What's inside this article:

About Slider galleries

What is a Slider gallery?

A Slider gallery includes one or more image pairs that typically contrast how a place has transformed over time. Visitors can interact with each image pair by dragging the slider backwards and forwards to inspect both images.

What happened to the Photo blog layout?

Previously, Pangea CMS included a single Photo gallery edit screen, which offered the Photo blog and Slider gallery layout options. This functionality is now separated over two edit screens:

  • Photo gallery: For creating Photo galleries (previously Photo gallery with the Photo blog layout enabled).
  • Slider gallery: For creating Slider galleries (previously Photo gallery with the Slider gallery layout enabled).

For information about creating a Photo gallery, see the following article:

Complete required settings

To create a new Slider gallery, go to New > Multimedia > Slider Gallery in the top menu.

You must complete the following required settings before saving the Slider gallery:

  • Add at least one image pair. For detailed information, go to the following section:
  • Select General in the left panel and complete the following required settings:
    • Title: Enter a title for the Slider gallery.
    • Categories: Add the Slider gallery to at least one Category.

The status controls when the Slider gallery is available on the public website. Manage the status using the drop-down menu at the top of the screen. For more information, see the following article:

Add an image pair

NOTE: The instructions below assume the images you want to use in the Slider gallery are already uploaded to Pangea CMS. To learn how to upload new images, see the following article:

To add an image pair to the Slider gallery:

  1. Hit Add new pair on the Images screen.
  2. Select your preferred option:
    • Internal: Search for images uploaded by Pangea CMS users.
    • External: Search for images from external agencies (Reuters and AP).
  3. Adjust the additional search filters in the left panel according to your preferences, then hit Search.
  4. Select + Attach (the plus icon) next to both images you want to use in the image pair. An image pair must include two images. You cannot save the pair if only one image is attached, and it is not possible to attach more than two images.

The attached images appear under Attached items in the right panel. The following options are available:

  • Remove an image: Select Remove (the trash icon) to remove an image from the pair. You then need to select a different image.
  • Reorder images: Drag and drop an image box to change its position. The top image is displayed first in the image pair.

Hit Save to confirm the selection and return to the Images screen.

Manage image pairs

The following options are available for each image pair:

Crop an image

If necessary, select the Crop the image icon to crop the image. During cropping, the optimal 16:9 aspect ratio is automatically maintained to ensure the image is properly displayed on the public website.

Select a new image

Hit the Select content icon to replace one or both of the images in the image pair.

Change the order of the images

Use the arrow icons between the images to change the order of the images within the individual image pair.

Create the caption

In the Caption box, enter text that is displayed below the image pair on the public website. The Title for the first image is pre-filled by default.

Select the Image preview icon for either image to access information that might help you formulate the Caption. The Image preview dialog includes the image Metadata and the internal image description.

If necessary, hit Restore to default to return the Caption to its default state (the Title for the first image).

Preview an image pair

Hit Preview slider to check how the image pair will look on the public website.

Change the order of the image pairs

If the Slider gallery contains multiple image pairs, use the drop-down menu in the bottom-left corner to set the position of each image pair. For example, if you select 1, the image pair is displayed first.

Delete an image pair

Hit Delete to remove an image pair from the Slider gallery.

Add labels and set the slider

Select Gallery in the left panel to customize the following settings that apply for every image pair in the Slider gallery:

Customize labels

The following options are available:

  • Label (image 1): Customize the label that appears on every first image in the Slider gallery. 'Before' is the default value.
  • Label (image 2): Customize the label that appears on every second image in the Slider gallery. 'After' is the default value.

NOTE: You can localize the default text for the labels using the following configuration keys:
  • Slidergallery.DefaultSetting.AfterText
  • Slidergallery.DefaultSetting.BeforeText
For detailed information about using the Site Localization tool in Pangea CMS, see the following article:

Customize slider

You can set the point where the slider appears on each image pair. Under Slider starting point, set the percentage of the first image that is visible. For example, if you select 75, the visitor initially sees 75% of the first image and 25% of the second image.

NOTE: The default value for the Slider starting point is 50. To change the default value for your website, contact us.

Manage General settings

Select General in the left panel to manage the following settings:

  • Status: Adjust the status of the page.
  • Publication date & time: Adjust the publication date and time that is displayed at the top of the page. Optionally schedule publication.
  • Last update: Specify when the Slider gallery was last updated. If filled, the information is visible on the public website.
  • Title: Adjust the title of the Slider gallery.
  • Introduction: Enter a brief introductory text. Tick Display introduction to display the introduction on the Slider gallery page.
  • URL Slug: Apply a URL Slug.
  • Categories: Adjust the Categories for the Slider gallery.
  • Content: Provide text content that appears on the Slider gallery page. For information about the available options, see the following article:

Use the preview

Use the options under Preview in the left panel to check how the page will look on devices with different screen sizes (desktop, tablet, or mobile).

You cannot use Preview until the required settings are filled. However, it is not necessary to save the Slider gallery before previewing it.

You can also use the Live site button at the top of the screen to open the currently published page on the public website (applies only if the status of the Slider gallery is Published).

Further recommendations

The following articles might be helpful:

Pangea CMS Guide

Need help?