compare_image
Table of Contents
Media > Compare Images
The Compare Images page allows users to use a slider to view and compare two images that are shown together. This page is ideal for displaying now and then images showing how two images taken from the same perspective have changed over time. Another example may be comparing views from different perspectives depending on the person viewing e.g. a staff and student view of an LMS page.
Example Demo
Or view at Xerte Page Types: Media > Compare Images (opens in a new window).
Editor Interface
Core Properties
| Property | Description | Type | Additional information |
|---|---|---|---|
| Page Title | Text that appears in the header of the published page. | Text | |
| Text | Content that appears on the page, usually to explain or introduce the activity. | Text+ (Toolbar) | |
| Align Text | Position the activity text above or to the left of the image comparison. {Top/Left} | Drop-down | |
| Image Size | Select an appropriate size for the image container. {Small/Medium/Large/Fullscreen} | Drop-down | |
| Image 1 File | This provides the first image that appears in the image container. | Link to Media Browser | Click on the upload icon, import the image into Media Browser, and click on the thumbnail to add here. |
| Image 1 Description | Add a description of the image for accessibility. | Text | Careful, considered description is important for users who may have difficulty viewing the image so that they can still particpate in the activity. |
| Image 2 File | This provides the second image that appears in the image container. | Link to Media Browser | Click on the upload icon, import the image into Media Browser, and click on the thumbnail to add here. |
| Image 2 Description | Add a description of the image for accessibility. | Text | Careful, considered description is important for users who may have difficulty viewing the image so that they can still particpate in the activity. |
Optional Properties
| Property | Description | Type | Additional information |
|---|---|---|---|
| Slider Position | This allows you to choose in which direction the slider will work when a user compares the two images. {Horizontal/Vertical} | Drop-down |
compare_image.txt · Last modified: 2024/11/18 10:54 by tadachi