Xerte Community Documentation

User Tools

Site Tools

Trace:
media_image_compare_page

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
media_image_compare_page [2024/12/19 16:06] – removed - external edit (Unknown date) 127.0.0.1media_image_compare_page [2024/12/19 16:06] (current) – ↷ Page name changed from compare_image to media_image_compare_page tadachi
Line 1: Line 1:
 +====== 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 =====
 +
 +{{url>https://xot.xerte.org.uk/play_116#imagecompare}}
 +
 +Or view at [[https://xot.xerte.org.uk/play_116#imagecompare|Xerte Page Types: Media > Compare Images]] (opens in a new window).
 +
 +
 +===== Editor Interface =====
 +
 +{{:playground:compare_image_editor.png}}
 +
 +
 +==== 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  |   |
 +