NIH | National Cancer Institute | NCI Wiki  

Error rendering macro 'rw-search'

null

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Scrollbar
iconsfalse

...

Inserting an image on a page and changing the size

...

This page includes the following:

Table of Contents
minlevel52

How to insert an image using the Rich Text editor

  1. Open the page on which you want to see the image.
  2. 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

  1. Click the Attachments icon (paperclip) or option on the Tools menu and complete the dialog to upload an image from your computer.
  2. Click the Edit tab and then the Wiki Markup tab.
  3. 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.

Markup

Displayed Image

Code Block
!caBIGlogoR.jpg|alt="caBIG logo"!

caBIG logo

To insert an image that is attached to another page, it is possible use the wiki markup shown here, with the names of your image and page, and your space key (name of the space in the URL displayed in the browser).

Warning
titleInserting an image with the markup shown here does not provide alt text.

This method may not be used on this wikimarkup is provided for reference only.

Image Location

Markup

Displayed Image

Attached to another page in the same space
(Be sure all users in your group can view the page.)

Code Block
!Wiki FAQs, Tips and Guidelines^caBIGlogoR.jpg!

May not be used on this wiki

Attached to another page in a different space
(Be sure all users in your group can view the page.)

Code Block
!caCORE:EVS^EVSTiny80.jpg!


May not be used on this wiki

...

Action

Markup

Displayed Image

Display alternative text for an image
(not rendered by the Firefox browser)

Code Block
!caBIGlogoR.jpg\|alt="caBIG logo"!

caBIG logo

Display an image flush right with a blue border

Code Block
!caBIGlogoR.jpg|align=right,border=2,bordercolor=blue,alt="caBIG logo"!

caBIG logo

Display a thumbnail

Code Block
!caBIGlogoR.jpg|thumbnail,alt="caBIG logo thumbnail"!

"caBIG logo thumbnail

Info
titleHTML image attributes supported in Confluence 2.8

  • 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 (required), which is included in the HTML code. This text is retrievable via search, and contributes to accessibility of the page for text-only viewing.

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.

...

Tip
titleTip

If the image is not rendered properly in IE 7the browser, 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 the image to a percentage of the original size.

...