Confluence 3.5 has reached end of life
Check out the [latest version] of the documentation
Page History
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. To follow the instructions below, you need to edit in 'Wiki Markup' mode. Put an exclamation point before and after the image link.
| Info | ||
|---|---|---|
| ||
Instead of using Wiki Markup, you can click the 'Insert Image' tool. This behaves in a similar way for both the Wiki Markup and the Rich Text editor, as described in Inserting an image. |
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 |
|---|---|
| |
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
| No Format |
|---|
!SPACE:my page^myimg.jpg! |
Formatting an image
What you need to type | What you will get |
|---|---|
| |
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 |
|---|---|
| |
| |
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
Inserting Images in the Rich Text Editor
Attaching Files to a Page
Image File Formats
Displaying a Thumbnail Image
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's Guide
Overview
Content Tools
Apps