Make All Images Clickable (link to gallery macro)

[ben.megson]

Hello All,

Can I configure XWiki to make all images link to the a gallery view (gallery macro?) when clicked (like Wikipedia)?

This would be a really nice feature to have as a reader could take in an image heavy page very quickly. Especially when this jira feature is added.

Thanks,
Ben

[vmassol]

Hi Ben. I’m not sure I understand what you’d like to achieve.

You’d like to have a place in the wiki where you could browse all images attached from all pages? We have something close with the attachment browser in the Page Index. Or maybe you meant having a page viewer to view all attachments of a page in a view similar to the Gallery macro? Would having a new “Images” tab at the bottom of pages work? Or maybe some button int he “Attachments” tab to filter only images and display them in a gallery-like view?

If you wish to automatically add links to images, this is doable through a Transformation. See http://rendering.xwiki.org/xwiki/bin/view/Main/Extending/#HAddinganewTransformation and http://rendering.xwiki.org/xwiki/bin/view/Main/Transformations

Let me know if I’ve understood what you meant.

[vmassol]

Note that the Page Inde now has a nicer view for images. For example:

[ben.megson]

Hello Vincent,

That’s more or less what I want to do. Looks like a Transformation is a good place to start (Although I’m struggling to understand what a transformation is, but sounds like it’s a custom way to render something).

Essentially I want all images to always be expandable to full size when clicked on. And additionally, to then be able to cycle forwards or backwards through the images on the same wiki page. The following Wikipedia page demonstrates this nicely https://en.wikipedia.org/wiki/Paris (click any image).

It sounds like I need to “transform” all images into “attachment gallery macros” and then change the CSS to make these look like a normal image. Would that work? or is there a more elegant option? Crucially I don’t want to change the “edit” experience for users, just the rendering.

Ben

[vmassol]

Looks like a Transformation is a good place to start (Although I’m struggling to understand what a transformation is, but sounds like it’s a custom way to render something).

There’s a diagram here: http://rendering.xwiki.org/xwiki/bin/view/Main/Architecture

In short, any wiki content is parsed as an XDOM AST tree and a Transformation can modify any element from this tree and thus generate a new XDOM. Then this XDOM can be rendered using different syntaxes such as HTML. For ex with the WikiWord transformation we transform some wiki words (e.g. This is a WikiWord) into links.

[vmassol]

Essentially I want all images to always be expandable to full size when clicked on.

What we do on xwiki.org is that we have an ImageMacro that we use to display images. This makes all the images expandable/clickable, adds a border and optionally add a caption too, and also provide resizes options.

It would be nice if this could be in the base syntax but ATM it’s more like an addon.

See https://www.xwiki.org/xwiki/bin/view/Macros/ImageMacro and https://www.xwiki.org/xwiki/bin/view/Macros/ImageMacro?viewer=code

You can get it from https://up1.xwikisas.com/#91xjVUvQIx3uliEns7DToA

Someone should make it as an extension on extensions.xwiki.org probably. I might do it later on if I get the time.

[vmassol]

It sounds like I need to “transform” all images into “attachment gallery macros” and then change the CSS to make these look like a normal image. Would that work? or is there a more elegant option? Crucially I don’t want to change the “edit” experience for users, just the rendering.

The transformation is just needed to automatically add a link around the image. Then you need to make that link point somewhere. You could also resize at the same time or do other modifications. So you also need a target location. You could add a new viewer by adding a gallery.vm template in your skin for example and in that galley.vm, display all images attached to the current page using the gallery macro.

That would make a nice extension

BTW if you’re interested to have this but don’t want to develop this, you could also consider asking one of the companies sponsoring the development of XWiki to do it for you. I’m sure XWiki SAS would like to do this for example and IMO it would cost only a few days of dev. Note that XWiki SAS does rebate when asking to develop something that goes back as open source in the community, so that could be something to consider.

[ben.megson]

The transformation is just needed to automatically add a link around the image. Then you need to make that link point somewhere. You could also resize at the same time or do other modifications. So you also need a target location. You could add a new viewer by adding a gallery.vm template in your skin for example and in that galley.vm, display all images attached to the current page using the gallery macro.

Thanks Vincent,
This should get me started. And asking XWiki SAS is definetly and option as my time is very limited, we’re still not at that phase unfortunately due to factors beyond my control. We shall see!

[ben.megson]

There’s a diagram here: http://rendering.xwiki.org/xwiki/bin/view/Main/Architecture

In short, any wiki content is parsed as an XDOM AST tree and a Transformation can modify any element from this tree and thus generate a new XDOM. Then this XDOM can be rendered using different syntaxes such as HTML. For ex with the WikiWord transformation we transform some wiki words (e.g. This is a WikiWord) into links.

Ah yes… that makes sense