What's inside this article:
- About Slider galleries
- Complete required settings
- Add an image pair
- Manage image pairs
- Add labels and set the slider
- Manage General settings
- Use the preview
- Further recommendations
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.
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:
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:
To add an image pair to the Slider gallery:
- Hit Add new pair on the Images screen.
- Select your preferred option:
- Internal: Search for images uploaded by Pangea CMS users.
- External: Search for images from external agencies (Reuters and AP).
- Adjust the additional search filters in the left panel according to your preferences, then hit Search.
- 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.
The following options are available for each image pair:
- Crop an image
- Select a new image
- Change the order of the images
- Create the caption
- Preview an image pair
- Change the order of the image pairs
- Delete an image pair
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.
Hit the Select content icon to replace one or both of the images in the image pair.
Use the arrow icons between the images to change the order of the images within the individual image pair.
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).
Hit Preview slider to check how the image pair will look on the public website.
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.
Hit Delete to remove an image pair from the Slider gallery.
Select Gallery in the left panel to customize the following settings that apply for every image pair in the Slider gallery:
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.
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.
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 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).
The following articles might be helpful:
- Adding Website teaser settings
- Adding Social media settings
- Adding a Related content widget
- Assigning and managing Tags