What's inside this article:
- Basic information
- Upload images
- Add General settings
- Add an image pair
- Add captions
- Add alt text
- Reorder images
- Crop images
- Add a sensitive content warning
- Set a custom Teaser image
- Add custom Gallery settings
- Manage the status and publish
Basic information
This article explains how to create and publish a new Slider gallery page from Pangea CMS. To get started, go to Create > Multimedia > Slider gallery.
What is a Slider gallery?
A Slider gallery is a content page that presents pairs of images for direct comparison. It's ideal for illustrating:
- How a place has changed over time.
- The impact of a specific event.
A Slider Gallery page can include one or more image pairs. Each pair features a 'before' and an 'after' view. Visitors can explore the changes interactively by dragging a slider back and forth to compare the two images.
Upload images
Before you start creating a Slider gallery, you might need to upload images to the Pangea The Graphic Database (GDB) is the centralized image library in Pangea CMS. All images on Pangea websites come from the GDB. From Pangea CMS, users can browse the existing images or upload new ones. Learn more. (GDB).
For detailed instructions on how to upload images, see the following article:
If you don't have images to upload, you might browse and use the following images:
- Internal: Images previously uploaded by other Pangea CMS users.
- External: Images from supported external wire agencies.
You should be able to legally use any image that you find in the GDB. To ensure copyright compliance, the Source is automatically displayed with every published image on the public site.
Add General settings
Select General to add the general settings for the Slider gallery.
You won't be able to save the Slider gallery until you add the following required settings:
- Title
- Categories
Find more details below:
Via General > Title, add the General title for the Slider gallery.
The General title will be displayed as the headline on the published Slider gallery page. This text is also used as the meta title for the page. The meta title is visible for search engines (such as Google) and is normally displayed as the clickable headline on search engine results pages. For more details, visit the following article:
Every content page must have at least one Category. Categories act like folders on your computer, where items are stored and organized. A Category is normally a topic, such as 'Politics' or 'Sport'. For each content page, you can add one or more Categories. To get started, go to General > Categories.
Set the Primary Category
If you add multiple Categories, you need to set one Primary Category. Click the badge for your chosen Primary Category, so that it is marked blue. All other Categories will be added as Secondary Categories (marked gray).
The name of the Primary Category will be shown on the published Feature story page. For detailed information about the significance of Primary and Secondary Categories, visit the following article:
The following settings are not required, but we strongly recommend filling them for every content page:
- Introduction
- URL slug
Find more details below:
The introduction for a content page builds on the title by offering readers more details about the topic of the story. It may appear on various public-facing pages, helping to inform and attract potential readers. A well-crafted introduction sparks curiosity and encourages engagement with your content.
Via General > Introduction, add an introduction for the Slider gallery. To display the introduction on the Slider gallery page, tick Display introduction. When this option is ticked, the introduction is displayed below the title on the page.
NOTE: Even if Display introduction is not ticked, the introduction may still be displayed on other public-facing pages.
You can add a URL slug, which will be included in the URL for the Slider gallery page. This improves usability by telling users where they will go after clicking the link. URL slugs can also help your pages to rank more highly on search engine results pages.
Create a URL slug via General > URL slug.
Follow the guidelines below:
- Use the local language for your site.
- Use clear, human-readable language.
- Separate words with hyphens ('new-york' not 'newyork').
The content of the URL slug should be similar to the General title. However, it does not need to match the title exactly. Try to keep the URL slug concise. This means:
- Include just words that are essential to convey meaning.
- Do not include words with no semantic value (such as 'a' and 'the').
- Do not include prepositions and linking words (such as 'and', 'of', and 'at')
For detailed information with examples, visit the following article:
Add an image pair
Select Images > Add new pair to add the first image pair to the Slider gallery.
For more details, go to the sections below:
Search images
NOTE: You can search and attach images from the Pangea Graphic Database.
On the Search & attach dialog, search for the images you want to include in the image pair. Follow these basic steps:
- If needed, hit Clear to clear any existing search filters.
- Enter keywords and adjust the filters according to your needs.
- Hit Search.
The results refresh to match your search criteria.
For detailed information on how to run an image search in Pangea CMS, visit the following article:
Attach images
On the Search & attach dialog, attach the images you want to include in the image pair. You must attach two images. To attach an image, click the + Attach button in the box for the image. The image is then added to the Attached items list.
The following options are available for attached items:
- Reorder: Reorder items using drag and drop.
- Remove: Hit the Remove button to remove an attached item.
When you are ready, hit Add. After you perform this action, the image pair will be added to the Slider gallery edit page, and you will be able to add the caption.
Add captions
A caption is a brief text, shown beneath an image. For Slider galleries, captions play a key role in storytelling. A caption is shown beneath each image pair. You can use this space to:
- Specify the location.
- Specify the date for each image.
- Highlight key differences between the images.
- Provide additional context to aid understanding.
For every pair, add a caption in the Caption box. The default English caption for the first image is automatically prefilled here. However, you need to craft a custom caption in your local language. Your custom caption will only be shown on the current Slider gallery and won't overwrite the default caption.
The following additional information is provided with each image to help you formulate the caption and will not be visible on the public site:
- (A): Description: You can hit the Image detail button to see the internal description and the default English caption.
- (B): Metadata: The metadata is shown directly below the image.
Hit Restore to default to show the default English caption in the Caption box. This option is useful if you deleted the default caption, but you want to see it again. If you restore the default caption, any custom text in the Caption box will be overwritten.
Add alt text
Alt text is a short and simple description of what is directly visible in an image. It's included in the source code for the image and isn't normally visible on the page itself. The image alt text might be used in the following ways:
- Screen readers read alt text aloud for visitors who are unable to see the page (including visitors who are visually impaired).
- If the image fails to load, the alt text is displayed on the page instead of the image.
- Alt text helps search engines to 'see' the image. Effective alt text can help your images to rank more highly in image searches.
For detailed information with examples, visit the following article:
For every image, you can add alt text in the Alt text box. Adding alt text is optional. If you do not add alt text, the caption will be used as the alt text.
NOTE: We generally don't recommend using the caption as the alt text. Alt text replaces the image, so it should describe just what is directly visible. (A few words is normally sufficient.) The caption is displayed alongside the image on the public site, so it should do more than simply repeat what is already visible in the image.
Reorder images
The following actions are available:
You can switch the order of the images inside an image pair. Just click the arrows between the images.
If the Slider gallery includes multiple image pairs, the order of the pairs in Pangea CMS determines the order in the published gallery. To change the position of a pair, use the selector at the bottom of the pair settings. For example, selecting 1 will place the pair first in the gallery.
Crop images
Pangea automatically crops each image to fit the 16:9 Aspect ratio describes the proportional relationship between the width and height of an image (such as 16:9 or 3:4). Aspect ratio determines the shape of an image but not its size. Learn more.. You can avoid unwanted cropping by selecting an image that already fits this aspect ratio.
To manually crop the image, hit the Crop image button. You can change which section of the image is visible, but you cannot change the aspect ratio.
Add a sensitive content warning
You can add a sensitive content warning to an image pair. We recommend adding a sensitive content warning if an image in the pair shows scenes that might be upsetting or offensive for certain audiences. This might apply for photos depicting:
- Violence or the aftermath of violent incidents
- Abuse or cruelty
- Disturbing or traumatic situations
- Sensitive cultural or religious content
To add a warning, tick Contains sensitive content.
When this option is enabled, the whole image pair is hidden by default in the gallery and covered with a short disclaimer. Visitors can choose to manually reveal the images.
If the first pair in the gallery has a sensitive content warning, you will need to add a custom Teaser image or change the position of the pair. This is because the first image in the first pair is used by default as the Teaser image. The Teaser image will be displayed on other pages (for example, on widgets), where it is not possible to show the warning.
Set a custom Teaser image
By default, the first image in the first pair is used as the Teaser image for the Slider gallery. This image will be shown in the A teaser is a simple preview that appears when a story is shared or promoted on another page (similar to a rich link). For example, if a story is featured on a homepage widget, the widget displays a brief teaser to represent the story. for the Slider gallery on other pages.
If preferred, add a custom Teaser image in the Website teaser settings.
For detailed information, visit the following article:
Add custom Gallery settings
To add custom Gallery settings, hit Gallery in the left panel. Updating these settings is optional. If you don't make any customizations, the default settings for all Slider galleries on your website will apply. Any customizations will apply for every image pair on the page. Customizations for individual pairs are not possible.
The following actions are available:
You can add the following custom values:
- Label (image 1): A custom label that appears on the first image in every image pair.
- Label (image 2): A custom label that appears on the second image in every image pair.
The default value for your website is prefilled in each box. Site admins can update the default values from the Site localization page in Pangea CMS. Use the following configuration keys:
| Key name | Global value |
|---|---|
| Slidergallery.DefaultSetting.BeforeText | Before |
| Slidergallery.DefaultSetting.AfterText | After |
To learn how to use the Site localization page, visit the following article:
Under Slider starting point, you can set the position of the slider for every image pair. This controls the percentage of the first image that is initially visible when a visitor lands on the page. For example, if you select 75, visitors will see 75% of the first image and 25% of the second image.
The default value for your website is preselected. To update the default value for all Slider galleries on your website, contact Pangea Customer Care.
Manage the status and publish
In Pangea CMS, a Slider gallery might have one of the following internal publication statuses:
- Draft: The page is not published and is not accessible on the public site. The content is still in progress and is not yet ready for editorial review.
- Edited: The page is not published and is not accessible on the public site. The first draft of the content is ready and waiting for editorial review.
- Published: The page is published and is accessible on the public site.
Change the status using the selector at the top of the edit page. For example, to change the status from Draft to Edited:
- Select Edited in the selector.
- Hit Save or Save & close.
The Slider gallery is now saved in Pangea CMS with the Edited status.
When you are ready to publish the Slider gallery, two options are available:
- Publish immediately.
- Schedule publication for a set time and date in the future.
For detailed information about the publication options, visit the following article:
