NYU Wikis Help Center
Child pages
  • Inserting Images in the Rich Text Editor
Skip to end of metadata
Go to start of metadata

This page explains how to attach and insert an image, and edit an existing image, using the Rich Text Editor. You can also use Wiki Markup to insert an image.

Quick guide to adding images

  • Click the 'Insert Image' icon in the editor toolbar. Select one of these options:
    • 'Attached Images' – Embed an image or file attached to the current Confluence page.
    • 'From the Web' – Enter a URL and embed an external image or file.

The rest of this page gives more details of the above procedure and additional options.

On this page:

Adding Images

You can add images to your Confluence page in the rich text editor via the image browser, drag-and-drop or autocomplete.

Adding an Image via the Image Browser

The 'image browser' is the 'Insert Image' window that pops up when you click the 'Insert Image' icon in the editor toolbar.

Wiki Markup mode and Rich Text Editor

You can click the 'Insert Image' icon in either Wiki Markup mode or the Rich Text Editor. The functionality described below is basically the same for both editing modes.

To insert an image onto a page using the image browser,

  1. Click the 'Insert Image' icon in the toolbar. The image browser ('Insert Image' window) opens.
    (info) Alternative methods for opening this window:
    • Right-click in the editor window and choosing 'Insert Image' from the context menu.
    • Press Ctrl-M (Internet Explorer on Windows). See Keyboard Shortcuts for key combinations used on other browsers and operating systems.
  2. Choose one of the following options in the left-hand panel:
    • Attached Images — Use this option to embed an image already attached to the page, or attach a new image to the page.
      • If you want to attach a new image to the page, use one of the following methods:
        1. 'Browse and Attach' feature:
          1. Click the 'Browse' button.
          2. Select your file from your computer or your network.
          3. Click the 'Open' button.
        2. 'Drag-and-Drop' feature:
          • Drag one or more file(s) from your computer and drop them onto the image browser.

            Screenshot: Dragging and Dropping an Image into the Insert Image Window



      • Click the image you want to insert onto the page.

    • From the Web — Use this option to embed a remote image from the web onto a Confluence page.

      • Enter the URL of the image into the 'Image URL' text box. If you want to preview the image, click the 'Preview' button.
        (info) This preview function allows you to check if the URL is either correct or accessible by Confluence. Bear in mind that whenever the page is viewed, the image will be loaded from the other website as it is not stored within Confluence.

  3. If you want to control the placement of the image on the page, select a value from the 'Align' dropdown list. Available values are 'None' (i.e. default), 'Left', 'Right' and 'Centre'.

  4. If your image is not a web image and you want the Confluence page to display a smaller (thumbnail) version of your attached image, select the 'Thumbnail' check box. When the thumbnail is displayed on a page, it will also be hyperlinked. When the reader clicks the thumbnail, the image will expand to full size in a new window.

  5. If you want to add a border around the image, ensure that the 'Border' check box is selected. (This is the default setting.)

  6. Click 'OK' to insert the image on the Confluence page.

Adding an Image via Drag-and-Drop

To embed an image onto a Confluence page using drag-and-drop,
(info) Refer to Using Drag-and-Drop in Confluence topic for more information on configuring Confluence to use the drag-and-drop feature.

  • Simply drag the image from your computer and drop it into the Rich Text Editor window. The image will be displayed in the position where you dropped it.
    (info) You can attach an image to a Confluence page by dragging and dropping it into the Wiki Markup Editor. However, be aware of the following caveats:
    • Confluence will attempt to navigate away from the page, so you should click 'Cancel' on the Confirm message box if you have any unsaved changes on the page.
    • No wiki markup is added to the page, such that the image is not automatically 'embedded'. Use the Image Browser (above) or enter the wiki markup manually. Refer to Displaying an Image for more information.

Screenshot 1: Inserting an Image - Browse Attached Images


Screenshot 2: Inserting an image - Previewing an Attached Image

Adding an Image via Autocomplete

When using the Rich Text Editor, you can enter a trigger character or press a keyboard shortcut to call up a list of suggested images or documents to add to your page. This feature is called 'autocomplete'. Autocomplete provides you with a fast editing solution if you prefer to use key strokes rather than pointing and clicking with the mouse.

Quick summary of autocomplete: Use '!' or Ctrl+Shift+M to see a list of suggested images or documents.

For the details, see the page about autocomplete in the Rich Text Editor.

Editing Images

You can change the size of the image as well as add/remove the border via the image properties panel.

To edit an existing image using image properties panel,

  1. Click on the image in your rich text editor.
  2. The properties panel for the image will display (see screenshot below):
    • Click the small, medium or large square icons to resize the image accordingly. If you resize the image to small or medium, the image will be linked to the original-sized image when you save the page.
    • Click 'Original' to restore the image to its original size.
    • Click 'Border' to add a border to the image, or remove an existing border.

Screenshot: Image Properties Panel

RELATED TOPICS

Linking to Attachments in the Rich Text Editor
Rich Text Editor Overview

Take me back to the Wikis Help Guide.

  • No labels