Wiki source code of Attachment Picker Application
Last modified by Eleni Cojocariu on 2026/09/30 18:16
Hide last authors
| author | version | line-number | content |
|---|---|---|---|
 |
2.1 | 1 | The Attachment Picker Application is what puts the [[attachmentGalleryPicker macro>>doc:documentation.xs.dev.attachments.attachmentgallerypicker-macro.WebHome]] to work in the wiki's own interface: it ships the wiki page the macro takes its look and its JavaScript from, and the one that adds the "Gallery" tab to the image dialog of the WYSIWYG editor. |
| 2 | |||
| 3 | The Application is bundled with the XWiki flavor, so a standard instance already has it and there is nothing to install or configure. It requires the module of the macro itself, so installing the Application is what brings the whole picker in; the CKEditor and Solr search interfaces are optional dependencies, since the "Gallery" tab needs the first and the search behind the grid needs the second. | ||
| 4 | |||
| 5 | == The look and the JavaScript of the picker == | ||
| 6 | |||
| 7 | The macro renders empty markup and asks, on demand, for the skin extensions of the wiki page ##Attachment.Picker.Code.AttachmentGalleryPicker##, which this Application ships. A LESS ##XWiki.StyleSheetExtension## on that page gives the grid of thumbnails its look, so that page is where to override the picker's style for every Page that uses it. | ||
| 8 | |||
| 9 | The same page declares the picker's JavaScript to RequireJS, through two ##XWiki.UIExtensionClass## objects on the ##org.xwiki.platform.requirejs.module## extension point: | ||
| 10 | |||
| 11 | |=Module|=Serves | ||
| 12 | |##xwiki-attachment-picker##|The picker itself | ||
| 13 | |##xwiki-attachment-picker-solr-search##|The search behind the grid | ||
| 14 | |||
| 15 | == The "Gallery" tab of the image dialog == | ||
| 16 | |||
| 17 | The wiki page ##Attachment.Picker.Code.WYSIWYGImageSelector## is a UI extension on the ##org.xwiki.platform.wysiwyg.imageSelector## extension point, which is the extension point the "Select Image" dialog of the WYSIWYG editor builds its tabs from. Its content is the picker macro, filtered to images and pointed at the Page being edited: | ||
| 18 | |||
| 19 | {{code language="velocity"}} | ||
| |
5.1 | 20 | {{velocity output='false'}} |
| 21 | #set ($discard = $xwiki.jsx.use('Attachment.Picker.Code.WYSIWYGImageSelector')) | ||
| 22 | {{/velocity}} | ||
| 23 | |||
| |
2.1 | 24 | {{velocity}} |
| 25 | (% class='attachmentPickerWYSIWYGImageSelector' %)((( | ||
| 26 | {{attachmentGalleryPicker filter="image/*" target="$services.rendering.escape($request.documentReference, 'xwiki/2.1')"/}} | ||
| 27 | ))) | ||
| 28 | {{/velocity}} | ||
| 29 | {{/code}} | ||
| 30 | |||
| 31 | A tab of that dialog is described by three parameters of the UI extension, and declaring one of your own takes the same three: | ||
| 32 | |||
| 33 | |=Parameter|=Meaning|=Value on the "Gallery" tab | ||
| 34 | |##id##|The identifier the dialog gives the tab pane|##wysiwygImageSelectorAttachmentPickerTab## | ||
| 35 | |##title##|The label of the tab, rendered as a translation|The ##attachment.picker.wysiwyg.imageSelector.title## translation | ||
| 36 | |##priority##|The place of the tab in the row; the dialog opens on the lowest|##100##, ahead of Tree ##200##, Upload ##300##, Icon ##400## and Url ##500## | ||
| 37 | |||
| |
5.1 | 38 | The first block pulls in the JavaScript the page also carries, which listens to the selection events of the picker and hands the chosen attachment to the image dialog. |
