Attachment Picker Application
Reference
The Attachment Picker Application is what puts the attachmentGalleryPicker macro 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.
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.
The look and the JavaScript of the picker
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.
The same page declares the picker's JavaScript to RequireJS, through two XWiki.UIExtensionClass objects on the org.xwiki.platform.requirejs.module extension point:
| Module | Serves |
|---|---|
| xwiki-attachment-picker | The picker itself |
| xwiki-attachment-picker-solr-search | The search behind the grid |
The "Gallery" tab of the image dialog
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:
{{velocity output='false'}}
#set ($discard = $xwiki.jsx.use('Attachment.Picker.Code.WYSIWYGImageSelector'))
{{/velocity}}
{{velocity}}
(% class='attachmentPickerWYSIWYGImageSelector' %)(((
{{attachmentGalleryPicker filter="image/*" target="$services.rendering.escape($request.documentReference, 'xwiki/2.1')"/}}
)))
{{/velocity}}A tab of that dialog is described by three parameters of the UI extension, and declaring one of your own takes the same three:
| Parameter | Meaning | Value on the "Gallery" tab |
|---|---|---|
| id | The identifier the dialog gives the tab pane | wysiwygImageSelectorAttachmentPickerTab |
| title | The label of the tab, rendered as a translation | The attachment.picker.wysiwyg.imageSelector.title translation |
| 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 |
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.
FAQ
Why is the picker unstyled and inert when I write its markup by hand?
Nothing but the attachmentGalleryPicker macro asks for the skin extensions of Attachment.Picker.Code.AttachmentGalleryPicker, so markup written by hand gets neither the look of the picker nor its behaviour.
