Sections 

• What is Image Juxtaposition?
• When to use Image Juxtaposition
• Adding an Image Juxtaposition interaction
• Revising an Image Juxtaposition interaction
• Deleting an Image Juxtaposition interaction
• Image Juxtaposition review process

What is Image Juxtaposition?

Image Juxtaposition is an HTML5-based image content type that allows users to compare two images interactively.  

When to use Image Juxtaposition?

Use Image Juxtaposition when you want to compare two related entities.  Some examples include:

• Before and after
• Start and end
• End user view and Admin view

Back to top

Adding an Image Juxtaposition interaction

1.  In your topic, click Add H5P Interaction.
2. From the list of content types, click Image Juxtaposition.  The image juxtaposition editor is displayed.
3. Enter a Title. This is a required field.
4. Optional: In the Heading field, enter the label that you want to display at the top of the Before/After image juxtaposition.
5. In the First image section, click Add to upload the first image.
6. Enter the label for the first image.
7. In the Second image section, click Add to upload the second image.
8. Add the label for the second image.
9. Click Save to save your interaction.

General settings

• Both images must be the same size — juxtaposition does not work if the images are different sizes.
• If showing as a before / after screenshot, make sure all UI elements are in the same place, so the image doesn’t “jump.”
• Images should be under 10MB, but the HTML5 scales to any size or resolution.
• Images larger than 10MB reduce performance.
• Capture images at 100% for browser elements
• Make sure the image is readable
  • Min: 600px
  • Max: 3000px
• The Vertical setting is not recommended. Consult the Pega Community Creative Team if you have a case for vertical juxtaposition

Behavioral settings

• Slider start position in %: 50
• Slider orientation: Horizontal

Back to top

Revising an Image Juxtaposition interaction

1. On the Master Content page, click the topic that contains the interaction.
2. On the Release page, click Edit.
3. In the Section area, click [+] to expand the section containing the image juxtaposition interaction.
4. Modify the interaction as needed.
5. Click Save to save your interaction.

Back to top

Deleting an Image Juxtaposition interaction

1. On the Master Content page, click the topic that contains the interaction.
2. On the Release page, click Edit. 
3. Click Remove to the right of the image juxtaposition section of the Topic.
4. Click Confirm removal to delete the interaction.
5. Click Save.

Back to top

Image Juxtaposition review process

Pega Academy cannot yet track changes made to interactive content, so edits are manually tracked.  

For the Image Juxtaposition interaction, the content editor leaves feedback as a Pulse note in the Agile Studio task card.

Back to top