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

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 codeview 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ère image à utiliser pour la comparaison.
## @param AttachmentImageAfter:title=Image "after"|type=attachment|required=false|desc=Seconde image à utiliser pour la comparaison.
## @param width:title=Largeur|type=string|desc=En pixels ou en pourcentage : par exemple, 600 ou 80%. Par défaut utilise 100%.|default=100%
## @param height:title=Hauteur|type=string|desc=En pixels ou en pourcentage : par exemple, 400 ou 50%. Par défaut utilise 100%.|default=100%
## @param AddSeparator:title=Ajoute un séparateur|type=boolean|default=true
## @param InitVisibleRatio:title=Ratio initial de visibilité|type=string|required=false|desc=Nombre réel entre 0 et 1 pour définir le ratio initial de visibilité entre les images (par défaut à 0.5)|default=0.5
## @param LabelBefore:title=Texte à gauche|type=string|desc=Ajoute un texte à gauche sur l image "before".
## @param LabelAfter:title=Texte à droite|type=string|desc=Ajoute un texte à droite sur l image "after".
## @param LabelBeforeCustomCSS:title=CSS texte à gauche|type=string|desc=Applique un style CSS sur le texte à gauche - exemple: "padding": "10px 20px","color": "red"
## @param LabelAfterCustomCSS:title=CSS texte à droite|type=string|desc=Applique un style CSS sur le texte à droite - exemple: "right": "40px","top": "80px"
## @param ImageBeforeCustomCSS:title=CSS image à gauche|type=string|desc=Applique un style CSS sur l image de gauche 'before' - exemple: "filter":"sepia(80%)"
## @param ImageAfterCustomCSS:title=CSS image à 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é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é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

 

8 comments

Davin Studer
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
May 22, 2019

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
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
May 22, 2019

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

Vincent Blain
Contributor
May 23, 2019

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.

Like Gonchik Tsymzhitov likes this
Gonchik Tsymzhitov
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
January 2, 2021

I like it :) 

Thank you for the idea and sharing the macro

Like Vincent Blain likes this
SKAdmin
Contributor
May 8, 2023

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 June 27, 2023

@SKAdmin, 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.

SKAdmin
Contributor
June 28, 2023

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

captain1701 June 29, 2023

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

Comment

Log in or Sign up to comment
TAGS
AUG Leaders

Atlassian Community Events