We would like to insert images as links and when the user clicks on them, to display the image as a popup. We cannot seem to accomplish this behavior. Are only options appear to be: * If we insert the image as link, when the user clicks on it, the image is displayed, but renders in the entire screen. The user must click the browser back to go back to the actual wiki page. * If we want the image to popup and the user not lose context of their web page, we have to actually insert the image and reduce the px down as small as possible to indicate a thumbnail. The reason we didn't want to go with the thumbnail is because of real estate. We have these links in a column to reference flow diagrams. And the thumbnail takes up significant space in the cell, when we have 10 columns and many, many rows. Does anyone have any other ideas how to accomplish our desired user experience?

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; } } }

Is it possible to make an image link to display a popup vs a new page?

Karie Kelly1

We would like to insert images as links and when the user clicks on them, to display the image as a popup. We cannot seem to accomplish this behavior. Are only options appear to be:

If we insert the image as link, when the user clicks on it, the image is displayed, but renders in the entire screen. The user must click the browser back to go back to the actual wiki page.
If we want the image to popup and the user not lose context of their web page, we have to actually insert the image and reduce the px down as small as possible to indicate a thumbnail.

The reason we didn't want to go with the thumbnail is because of real estate. We have these links in a column to reference flow diagrams. And the thumbnail takes up significant space in the cell, when we have 10 columns and many, many rows.

Does anyone have any other ideas how to accomplish our desired user experience?

Accepted answers

MatthewC

Funnily enough, I was writing something not that different earlier on.... ;-)

You can do it as a user macro which users can populate via the macro browser. here's the code:

## Macro title: Image Popup
## Macro has a body: Y
##
## Developed by: Matthew Cobby matt@andamooka.com

## @param ImageName:title=Image|type=string|required=true|desc=Nname of attached image to display

## Get basic manager objects first
#set($attachmentManager=$content.getAttachmentmanager())

## Get the attachment - assuming it's an image!
#set($attachment=$attachmentManager.getAttachment($content, $paramImageName))
#set($downloadPath=$attachment.getDownloadPath())

&lt;span class="image-wrap" style=""&gt;&lt;a class="confluence-thumbnail-link" href='$downloadPath'&gt;$body&lt;/a&gt;&lt;/span&gt;

You also want to set the Macro Body processing to: "Convert wki markup to HTML" so users can put what ever they want as the actual link

Then the usage would be:

{imagepopup:ImageName=myimage.jpg}My Link Text{imagepopup}

You could write another version which took images from another space & page but it's more complex and users would have to put in more parameters.

All comments

MatthewC

Just tio check, you are talking about having a text link, linking to an image.Is the popup inline or in a new tab/browser?

Karie Kelly1

Yes - I can insert the image as an 'attachment' which is the linked text that replaces the page with the image, in this case, when clicked or if I insert as a very small image, then it pops up and you don't lose context. My desired behavior is that when the user clicks on the linked text which is actually an image, that the image not replace the entire web page. I prefer it display as a popup or, if necessary, a new page, so the user doesn't lose context. Does that help or make better sense?

MatthewC

Funnily enough, I was writing something not that different earlier on.... ;-)

You can do it as a user macro which users can populate via the macro browser. here's the code:

## Macro title: Image Popup
## Macro has a body: Y
##
## Developed by: Matthew Cobby matt@andamooka.com

## @param ImageName:title=Image|type=string|required=true|desc=Nname of attached image to display

## Get basic manager objects first
#set($attachmentManager=$content.getAttachmentmanager())

## Get the attachment - assuming it's an image!
#set($attachment=$attachmentManager.getAttachment($content, $paramImageName))
#set($downloadPath=$attachment.getDownloadPath())

&lt;span class="image-wrap" style=""&gt;&lt;a class="confluence-thumbnail-link" href='$downloadPath'&gt;$body&lt;/a&gt;&lt;/span&gt;

You also want to set the Macro Body processing to: "Convert wki markup to HTML" so users can put what ever they want as the actual link

Then the usage would be:

{imagepopup:ImageName=myimage.jpg}My Link Text{imagepopup}

You could write another version which took images from another space & page but it's more complex and users would have to put in more parameters.

MatthewC

and I've just realised your using onDemand. Oh dear.

the limitations of a hosted service mean, I think, you can't create user macros....

User macros are simple template-like macros that allow you to create simple formatting macros using the Confluence web interface. Read more about Writing User Macros. Not applicable to Confluence OnDemand.

https://confluence.atlassian.com/display/AOD/Working+with+Macros

Karie Kelly1

Yes, we are OnDemand and unfortunately are not able to implement user macros either :-(

However, what you have provided is still beneficial to us as we are trying to move away from OnDemand. Thus, I'm going to definitely hold on to this post/solution for when (I hope) we are able to migrate off of OnDemand by 1Q2013.

Thanks for taking the time to respond and provide this option!

Welcome!

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

Quick Links

Find more posts tagged with

cloud

confluence-cloud