You can display an image from either a file attached to the Confluence page, or from another location.
This page shows you how to display an image using Confluence Notation, also known as Wiki Markup.
 | Using the 'Insert Image' icon
Instead of Wiki Markup, you can use the 'Insert Image' icon. This behaves in a similar way for both the Wiki Markup and the Rich Text editor, as described in Inserting an image. |
To follow the instructions below, you need to edit in 'Wiki Markup' mode. Put an exclamation point before and after the image link.
Displaying an image from a remote location
You need to know the URL from which the image can be linked.
| What you need to type |
What you will get |
| !http://www.atlassian.com/images/confluence_feature.gif! |
 |
Displaying an image attached to a page
- First, attach the image to the page.
- Now you can display the attached image:
| What you need to type |
What you will get |
!fish.gif! |
 |
Displaying an image attached to another Confluence page
| What you need to type |
What you will get |
!Space attachments directory^fish.gif! |
 |
Where 'Space Attachments Directory' is the name of the page containing the attachment.
Usage example
What if you want to upload an image only once, but display it on many pages?
- Attach the image to a page, such as our page called the 'Space attachments directory'.
- Link to the uploaded image using the syntax described above.
To view the image, the user needs to have view permission for the page to which it is attached.
Displaying an image attached to page in a difference space
Formatting an image
| What you need to type |
What you will get |
!fish.gif|align=right,border=2,bordercolor=blue! |
|
Displaying alternative text
Use the HTML title attribute to specify text which is displayed when the pointer is hovering over an image. Use the alt attribute to specify alternative text to be included in the HTML code.
| What you need to type |
What you will get |
!fish.gif|title="I am a fish"! |
|
!fish.gif|alt="I am a fish"! |
|
HTML image attributes
For any image, you can also specify attributes of the HTML image tag as a comma-separated list of name=value pairs. Available image tags include:
- align — available values are 'left', 'right', 'bottom', 'center', 'top'.
- border — specify the width of the border (in pixels).
- bordercolor — use this with the above 'border' tag to specify the colour of the image border. Specify the colours by name or by hex value. See more information about web colours. (Available with Confluence 2.6.2 and later.)
- hspace — specify the amount of whitespace to be inserted to the left and right of the image (in pixels).
- vspace — specify the amount of whitespace to be inserted above and below the image (in pixels).
- width — specify the width of the image (in pixels). This will override the natural width of the image.
- height — specify the height of the image (in pixels). This will override the natural height of the image.
- title — specify alternative text for the image, which is displayed when the pointer hovers over the image
- alt — specify alternative text, which is included in the HTML code. This text is retrievable via search, and contributes to accessibility of the page for text-only viewing.
RELATED TOPICS
Linking an image to another page or URL
Rich Text-Inserting an image
Attaching Files to a Page
Image File Formats
Thumbnail Macro
Gallery Macro
Take a look at some plugins too.
First read the warning on support of third-party plugins.
Take me back to Confluence User Guide
Comments (15)
Mar 26, 2008
Anonymous says:
Assuming one has prevented access to downloadof attachments within a space. ...Assuming one has prevented access to downloadof attachments within a space. How does one protect an image in a page from being copied using the right-click, "Save image as", "Copy image" and "Send Image" options available in browsers. Some sites prevent this, is there any way of doing this in confluence using wiki mark-up/macro?
Apr 01, 2008
Ming Giet Chong says:
Hi, There isn't any macros that supported this feature in Confluence currently....Hi,
There isn't any macros that supported this feature in Confluence currently. However, you can create your own user macro to achieve this. The following is an example of template used for the user macro that will disable the oncontextmenu in the body content when you are right clicking the mouse.
Regards,
MG
May 15, 2008
Suganya Nagarajan says:
Hi, Could you please help? Whether it is possible to add a link in the text th...Hi,
Could you please help?
Whether it is possible to add a link in the text that is on an image?or Is there anyway to edit the text in the image that I have imported ?
May 16, 2008
Mei Yan Chan says:
Hi Suganya, As suggested previously, please check out our Notation Guide. Reg...Hi Suganya,
As suggested previously, please check out our Notation Guide.
Regards,
Mei
May 16, 2008
Suganya Nagarajan says:
Hi Mei, Sorry but I could not find what I exactly need Linking through an imag...Hi Mei,
Sorry but I could not find what I exactly need
Linking through an image is ok
But Suppose I have some three lines in an image
Is it possible to give three different links to those three different lines
thanks,
SuganyaNagarajan
May 20, 2008
Mei Yan Chan says:
Hi Suganya, I believe it's best to post your query coupled with some sample mac...Hi Suganya,
I believe it's best to post your query coupled with some sample macro usage (inclusive of image) by creating a support ticket at:
Thanks.
Regards,
Mei
Jun 13
Anonymous says:
Perhaps you should consider splitting the image in 3 images and then link each o...Perhaps you should consider splitting the image in 3 images and then link each of the images
Jun 13
Anonymous says:
or try this plugin http://confluence.atlassian.com/display/CONFEXT/ImageMap+Plu...or try this plugin
http://confluence.atlassian.com/display/CONFEXT/ImageMap+Plugin
Jun 25
Anonymous says:
Does anyone know of an attribute/macro/technique to prevent the image from ...Does anyone know of an attribute/macro/technique to prevent the image from displaying past 100% of the screen width? We have some wide ones on our wiki that scroll out and end up making the rest of the text hard to read because then it scrolls to that width too.
Not sure that it matters, but we're on rev 2.4.5 #708.
Jun 26
Azwandi Mohd Aris says:
Hi there, You may want to try to use thumbnails while you insert the image or p...Hi there,
You may want to try to use thumbnails while you insert the image or perhaps define the attributes width and height for the image. However, if you are keen to see dynamic resizing to be implemented in Confluence, there is a more advanced feature request as being tracked at:
You may want to place your vote, add your comments or be a watcher to keep yourself updated on the issue.
Cheers,
Azwandi
Jun 26
Anonymous says:
Hi Azwandi, I think we're right on the same page ... basically the thumbnail is...Hi Azwandi,
I think we're right on the same page ... basically the thumbnail is too small as the image I want to display is significant enough in its content to warrant a full size by default. I did look at the width and height attributes, but they're still kind of lacking in that I believe they only accept pixels as well as you still have to pick a screen resolution to target.
I jokingly suggested an attribute name of "dontDisplayGreaterThan100PercentOfAvailableScreenWidthRealEstate" to a colleague and while it's a silly name, it's exactly what we're looking for. Essentially any image that displays past the viewable area should get resized to 100% of the screen width.
Thanks for the quick response and I will certainly post in that feature link you gave me above.
-Matt
Oct 22
Phil Wright says:
We are currently using 2.8.1 (waiting on IT to upgrade) and I notice that attach...We are currently using 2.8.1 (waiting on IT to upgrade) and I notice that attaching images during initial page creation still doesn't work as was noted in the older v2.0 docs.
It is quite annoying that Confluence will happily let you attach 20 images to a page, show them correctly in the preview and then toss them all away when you save the page.
Has this been fixed in 2.9? If not, when will it be fixed?
Nov 14
Azwandi Mohd Aris says:
Hi Phil, I am sorry that I am not aware of such problem. Perhaps, you can raise...Hi Phil,
I am sorry that I am not aware of such problem. Perhaps, you can raise a support request, so that we could investigate more on this and review your logs, etc.
Cheers,
Azwandi
Oct 22
Shaji Khan says:
When I click on my thumbnail picture, why does it take me to www.download.com an...When I click on my thumbnail picture, why does it take me to www.download.com and not enlarge my picture? Any help would be appreciated.
Shaji
Nov 03
Azwandi Mohd Aris says:
Hi Shaji, Would you be able to raise a support request at http://support.atlass...Hi Shaji,
Would you be able to raise a support request at http://support.atlassian.com? Remember to attach a copy of the full wiki markup and HTML source of the page.
Cheers,
Azwandi
Add Comment