nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

A user macro for Confluence server for creating image comparison slider.

Vincent Blain

This user macro give ability to view a comparison between two images and control it by moving a slider, in order to show differences.

View on github : https://github.com/AOT-DEP-PADI/ConfluenceUserMacro-ImageComparisonSlider

Features

This user macro give ability to view a comparison between two images and control it by moving a slider, in order to show differences.

hqdefault

Images use for comparaison provides from attachments of current page confluence;
Set height and widht with pixel or percent ;
Set initial visible ratio. Visible ratio of front element on init, must be a float value between 0 and 1. When ratio is equal to 1, so we see completely front image. And when ratio is equal to 0, so we see completely back image.
Add or remove a thin vertical blank line as a separator beetwen two images ;
Add or remove label on before and after image ;
Add or remove more controls buttons ;
Apply custom CSS on label ;
Apply custom CSS on images ;
Enable click on the circle control in order to toogle images ;
Set animation easing, animation duration to use.

User macro code

Macro name : image_comparison_slider
Macro title: Image comparison slider
Description: Create an image comparison slider
Macro body processing: No
Velocity Template code: view code on github
Version: 1.0.0
Last modification: 22/05/2019

User macro parameters

## @param AttachmentImageBefore:title=Image "before"|type=attachment|required=false|desc=Premi&egrave;re image &agrave; utiliser pour la comparaison.
## @param AttachmentImageAfter:title=Image "after"|type=attachment|required=false|desc=Seconde image &agrave; utiliser pour la comparaison.
## @param width:title=Largeur|type=string|desc=En pixels ou en pourcentage : par exemple, 600 ou 80%. Par d&eacute;faut utilise 100%.|default=100%
## @param height:title=Hauteur|type=string|desc=En pixels ou en pourcentage : par exemple, 400 ou 50%. Par d&eacute;faut utilise 100%.|default=100%
## @param AddSeparator:title=Ajoute un s&eacute;parateur|type=boolean|default=true
## @param InitVisibleRatio:title=Ratio initial de visibilit&eacute;|type=string|required=false|desc=Nombre r&eacute;el entre 0 et 1 pour d&eacute;finir le ratio initial de visibilit&eacute; entre les images (par d&eacute;faut &agrave; 0.5)|default=0.5
## @param LabelBefore:title=Texte &agrave; gauche|type=string|desc=Ajoute un texte &agrave; gauche sur l image "before".
## @param LabelAfter:title=Texte &agrave; droite|type=string|desc=Ajoute un texte &agrave; droite sur l image "after".
## @param LabelBeforeCustomCSS:title=CSS texte &agrave; gauche|type=string|desc=Applique un style CSS sur le texte &agrave; gauche - exemple: "padding": "10px 20px","color": "red"
## @param LabelAfterCustomCSS:title=CSS texte &agrave; droite|type=string|desc=Applique un style CSS sur le texte &agrave; droite - exemple: "right": "40px","top": "80px"
## @param ImageBeforeCustomCSS:title=CSS image &agrave; gauche|type=string|desc=Applique un style CSS sur l image de gauche 'before' - exemple: "filter":"sepia(80%)"
## @param ImageAfterCustomCSS:title=CSS image &agrave; droite|type=string|desc=Applique un style CSS sur l image de droite 'after' - exemple: "filter":"grayscale(50%)"
## @param AddClickOnDragCircle:title=Activer le bouton de d&eacute;placement|type=boolean|default=true
## @param AddButtons:title=Ajout de bouttons|type=boolean|default=false
## @param DispositionButtons:title=Disposition des bouttons|type=enum|enumValues=left,center,right|default=center
## @param AnimationEasing:title=Animation type|type=enum|enumValues=linear,swing|default=swing
## @param AnimationDuration:title=Animation dur&eacute;e|type=string|default=400

Details of some parameters bellow, for the complete list go to github repository : https://github.com/AOT-DEP-PADI/ConfluenceUserMacro-ImageComparisonSlider

Images to use in comparison slider

Images must be save in the current page as an attachment file. Image "before" is placed on front, and image "after" on back.

ConfluenceUserMacro-ImagesCompare-select-image

Initial visible ratio

Visible ratio of front element on init, must be a float value between 0 and 1. When ratio is equal to 1, so we see completely front image. And when ratio is equal to 0, so we see completely back image.

ConfluenceUserMacro-ImagesCompare-initialratio

Labels

Add a label on "before" and/or "after" image

ConfluenceUserMacro-ImagesCompare-labels

Apply custom css on label and image

Apply custom CSS on label before and/or after image. Code CSS must respect the syntax of the jQuery method .css() - exemple : "padding": "10px 20px","color": "red","border-radius":"0px".

ConfluenceUserMacro-ImagesCompare-labelscss

Do the same thing on image, for exemple to apply a filter on before image - exemple : "filter":"sepia(80%)"

ConfluenceUserMacro-ImagesCompare-imagecss

Usages

Compare the user interface of two versions of an application.

ConfluenceUserMacrosImageCompare_CompareUserInterface

Compare gif animation

https://github.com/AOT-DEP-PADI/ConfluenceUserMacro-ImageComparisonSlider/blob/master/docs/ConfluenceUserMacrosImageCompare_CompareAnimation.gif

Comments

Davin Studer

Sweet! Looks awesome. I like how you implemented an attachments input type. I did something similar with a CSV Table user macro I created. I wish there was an easier way to do attachments in a user macro. Nice job.

Davin Studer

I think this would be best as an article. Would you be ok with me changing the post type to article?

Vincent Blain

Hi Davin,

Thx ^^.

To be honest, i have read your macro (CSV Table) and use some parts, in order to understand how to deal with attachements files with Velocity languages. Nice job you too.

Vincent Blain

Of course, thx.

Vincent Blain

To improve the behaviour of this macro in macro properties edit screen, I search how can i use AUI (Atlassian User Interface) elements with velocity template, in this case.

For exemple, it will be nice to have ability to create custom interface for macro in edit context. I want use <aui-item-checkbox> elements to present options that the user can select or enable.

https://docs.atlassian.com/aui/8.3.1/docs/dropdown.html

AUI code

<aui-dropdown-menu id="checkbox-items">
<aui-section label="Languages">
<aui-item-checkbox interactive checked>Javascript</aui-item-checkbox>
<aui-item-checkbox interactive>Fortran</aui-item-checkbox>
<aui-item-checkbox interactive>Rust</aui-item-checkbox>
</aui-section>
</aui-dropdown-menu>

JS code

var dropdown = document.getElementById('is-checkbox-checked');
dropdown.addEventListener('change', function (e) {
var isChecked = e.target.hasAttribute('checked');
if (isChecked) {
console.log(e.target.textContent, 'was checked.');
} else {
console.log(e.target.textContent, 'was unchecked.');
}
});

I will make change... if i found (time) and a way to do it.

Gonchik Tsymzhitov

I like it

Thank you for the idea and sharing the macro

Shelli Kleman

Hello - How did you get this to work since the 'attachment' macro parameter type does not work in User Macros?

https://jira.atlassian.com/browse/CONFSERVER-24016

captain1701

@Shelli Kleman, we had it running since years but somehow now it stopped working. 😥 We are currently using 7.19.7 and it looks like the last LTS update made it stop working.

Looks like this is a know issue and I was able to solve it with the given workaround on this ticket:

-Dmacro.required.velocity.context.keys=attachmentManager,dateFormatter,generalUtil,bootstrap,action

Maybe this macro also works with this:

-Dmacro.required.velocity.context.keys=attachmentManager,generalUtil,bootstrap

but we have other macros making use of action and dateFormatter, I haven't checked the full code of this macro uses the before mentioned from them as well.

Shelli Kleman

We are also on 7.19.7. Thank you for providing the workaround. Hope this works for us.

captain1701

Just a small adjustment to address only what is really needed by image comparison slider user macro:
-Dmacro.required.velocity.context.keys=attachmentManager,dateFormatter,generalUtil,bootstrap,action,req,content

captain1701

I'm currently testing updating from 8.5 LTS to 9.2 LTS and as far as I can see this user macro doesn't work any more after the update. Did anyone faced the same issue and got this macro working again?

Edit: April 23rd 2025

I just got the fix from Atlassian support and it works now as before.

All you have to do is to replace this

#set($baseUrl = $action.getGlobalSettings().getBaseUrl())

with this

 #set($baseUrl = $globalSettings.baseUrl)

in the User Macro Template and ensure this VM options are set at startup.

-Dmacro.required.velocity.context.keys=attachmentManager,action,req,globalSettings

I hope this helps someone. 😊

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence

server

confluence-server

user-macro