Create content

Create a Slider gallery page

What's inside this article:


Basic information

The Slider gallery content type lets you contrast how a place has transformed over time. Each Slider gallery includes one or more image pairs. Visitors can interact with each individual image pair by dragging the slider backwards and forwards to inspect both images.

Go to Create > Multimedia > Slider gallery to create a new Slider gallery page from Pangea CMS.



Create the main title and URL slug

Via General > Title, create the main title for the Slider gallery.

After you create the title, we suggest creating a URL slug. The URL slug is included in the URL for the Slider gallery page. Creating a URL slug for a content page improves usability and SEO (Search Engine Optimization).

Add a URL slug via General > URL slug. For detailed information, see the following article:



Select Categories

You cannot save the Slider gallery until it is added to at least one Category. Categories in Pangea CMS organize the content on your site by topic. For example, your site might have a "Politics" Category for all content relating to politics.

Go to General > Categories to add the Slider gallery to one or more Categories.

If you select multiple Categories, select one Primary Category. Click your chosen Primary Category so it is marked blue.

For detailed information, see the following article:



Add an image pair

An image pair might include the following image types:

  • Internal images: Images that were previously uploaded to Pangea CMS by you or another CMS user.
  • External images: Images from the following external agencies:
    • AFP (Agence France-Presse)
    • AP (Associated Press)
    • Reuters

Go to Images > Add new pair to add the first image pair.

To search for an image, select the relevant tab:

  • Internal: Search for an internal image.
  • External: Search for an external image.

For information about running an image search in Pangea CMS, see the following article:

Each image pair must include exactly two images. You cannot select more than two images, and you cannot add the image pair until two images are selected.



Crop images

Each image pair is framed using the 16:9 aspect ratio. The images you select are automatically cropped to fit this aspect ratio.

If you are not satisfied with the automatic cropping, hit the Crop the image button to manually crop an image. You can change which section of the image is visible, but you cannot change the aspect ratio.

NOTE: Learn more about aspect ratio in our dedicated guide.



Create captions

The caption is displayed directly below the image pair on the public site. An effective caption provides context for the image pair and explains the connection between the two images.

For each image pair, add the caption in the Caption box. The English Title for the first image is prefilled by default as the caption. However, it is important to create a custom caption in the local language for your site.

Click the Image detail button to view the internal image description and metadata for each image. This information is provided as a source of inspiration to help formulate the caption.

If necessary, hit Restore to default to revert the caption back to its default value (the default value is the English Title for the first image).



Create alt text

Via Alt text, optionally create alt text for each image in the image pair.

Alt text is a simple description of what is directly visible in an image. Alt text has many purposes. Most importantly, it is read aloud by screen readers for visually impaired visitors to your site. By adding effective alt text for images, you help make your site more accessible. For details, see the following article:



Reorder images

Go to the relevant section below:


Switch the order of the images in an image pair

You can switch the order of the two images within a single image pair. Just click the arrows between the images.


Reorder the image pairs

If the Slider gallery includes multiple image pairs, you can set the position of each image pair. Use the drop-down menu in the bottom-left corner of the box. For example, if you select 1, the image pair is positioned first.



Choose a teaser image

The website teaser image for a Slider gallery is displayed in the teaser when the page is previewed on the public site (for example, in the search results and on widgets).

By default, the first image in the Slider gallery is used as the website teaser image.

If preferred, go to the Website teaser settings and select a custom website teaser image. Add your preferred image under Horizontal image and Vertical image.

If required, hit the Crop the image button to adjust the default cropping for either version of the image (horizontal or vertical).



Add a sensitive content warning

Tick the box next to Contains sensitive content if one or both of the images in an image pair might be offensive, disturbing, or upsetting for certain audiences. If this option is ticked, the image pair is initially censored on the public site. To view the image pair, a visitor must first hit Click to reveal.

If you add a sensitive content warning for the first image pair in a Slider gallery, you will need to add a custom website teaser image before you can save the page. For more details, see the following article:



Add image labels and set the slider

Via Gallery, you can customize the appearance of the image pairs. Your defined settings will apply for every image pair in the Slider gallery.

You can perform the following actions:


Add image labels

The following options are available:

  • Label (image 1): Add a custom label that appears on the first image for every image pair in the Slider gallery.
  • Label (image 2): Add a custom label that appears on the second image for every image pair in the Slider gallery.

If you do not add custom labels, the default labels for your site are displayed. Sites can update the default labels via the Site Localization tool in Pangea CMS. Use the following configuration keys:

  • Slidergallery.DefaultSetting.AfterText
  • Slidergallery.DefaultSetting.BeforeText


Set the slider

Under Slider starting point, set the position of the slider for every image pair in the Slider gallery. This controls the percentage of the first image that is visible when a visitor opens the page. For example, if you select 75, the visitor initially sees 75% of the first image and 25% of the second image.

The global default value for the Slider starting point is 50. To set a local default value that applies only for your site, contact Pangea Customer Care.



Save and publish content

For detailed information about saving and publishing content pages in Pangea CMS, see the following article: