 |
Page History
...
- Open the page on which you want to see the image.
- Click the Insert/Edit Image icon and complete the dialog; this Atlassian page has detailed steps.
...
How to insert an image in the wiki markup
...
- Click the Attachments tab icon (paperclip) or option on the Tools menu and complete the dialog to upload an image from your computer.
- Click the Edit tab and then the Wiki Markup tab.
- At the place on the page where you want to display the image, type the wiki markup shown here, using the name of your image.
...
You can format images in a variety of ways using HTML image attributes. Examples are shown below, followed by a list of HTML image attributes supported in Confluence 2.8; most are also supported in version 2.7 which is installed at this time (May, 2008).
Action | Markup | Displayed Image |
|---|---|---|
Display alternative text for an image | !caBIGlogoR.jpg|alt="caBIG logo"! | |
Display an image flush right with a blue border | !caBIGlogoR.jpg|align=right,border=2,bordercolor=blue! | |
Display a thumbnail | !caBIGlogoR.jpg|thumbnail! | |
| Info | ||
|---|---|---|
| ||
- align — 'left', 'right', 'bottom', 'center', 'top'.
- border — width of the border (in pixels).
- bordercolor — specify the color of the image border created with the "border" tab by name or by hex value.
- hspace — amount of whitespace to be inserted to the left and right of the image (in pixels).
- vspace — amount of whitespace to be inserted above and below the image (in pixels).
- width — width of the image (in pixels). Supersedes natural width of the image.
- height — height of the image (in pixels). Supersedes the natural height of the image.
- title — descriptive text for the image, which is displayed when the pointer hovers over the image
- alt — 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.
Source for Confluence information: http://confluence.atlassian.com/display/DOC/Displaying+an+Image May 16, 2008
...
| title | Image Size Limits and Requirements |
|---|
How to resize an image
Typically, images up to 13 inches wide are displayed without causing the horizontal scroll bar to appear when the browser is full-screen. Wider images make scrolling necessary and may cause the page
...
to be displayed improperly so that lines no longer wrap.
...
You can attach images at any size and change the display size in Confluence. Thus, you can use the original image capture which provides the best resolution with the least loss of data. Try specifying the width only, in even increments calculated based on 72 pixels per inch:
...
Image Width in Inches = 13, Width in Pixels = 936
Image Width in Inches = 12, Width in Pixels = 864
Image Width in Inches = 11, Width in Pixels = 792
Image Width in Inches = 10, Width in Pixels = 720
Image Width in Inches = 9, Width in Pixels = 648
Image Width in Inches = 8, Width in Pixels = 576
...
| Tip | ||
|---|---|---|
| Tip | ||
| ||
If the image is not rendered properly in IE 7, it's necessary to resize in a tool, either to the exact dimensions or to a percentage of the original size. If the image was imported from Microsoft Word, removing the exact dimensions from the wiki markup often solves the problem. If the image then becomes too large, resize it the image to a percentage of the original size. |
| Scrollbar |
|---|
