The HTML Image macro allows you to display an image within a page with extended properties such as an 'alt' tag and an image map feature.

Instructions

  1. Navigate to the page you want to edit.

  2. Click Edit.

  3. Click the position where you want to add the image.

  4. Click Insert More Content Other Macros.

  5. Select the HTML Image macro from the Macro Browser.

    The Macro Browser with the HTML Image macro available.
  6. Complete the desired fields. The URL parameter must be specified for this macro to work.

    Parameter

    Description

    Type

    Default

    Required

    Alt Text

    Defines a short description of the contents

    string

    none

    (error)

    Image URL (src)

    Defines the URL of the image source

    string

    none

    (tick)

    Height

    Sets height of the image

    string

    none

    (error)

    Width

    Sets width of the image

    string

    none

    (error)

    Server-side Map

    Defines the image as a server-side image map

    checkbox

    unselected

    (error)

    Client-side Map

    Defines the ID for a client-side map, linking to HTML on the page that includes this map

    string

    none

    (error)

    Long Description

    A URL to a page which contains a long description of the content

    string

    none

    (error)

    ID

    Enter a unique identifier for this macro element, if required. 

    string

    none

    (error)

    CSS Class

    Option to apply a custom CSS class to the element. Enter the CSS class name(s) to apply to the macro (case sensitive); multiple classes can be separated by a space or comma. Classes must be part of your Global Confluence CSS or defined in a CSS Stylesheet macro that you have added to your page.

    string

    none

    (error)

    Inline Style

    An optional inline style sheet to apply to the tag

    string

    none

    (error)

    Title

    Text to display in a tooltip

    string

    none

    (error)

    Text Direction

    Specifies the text direction

    single select

    none

    (error)

    Language Code

    Enter a language code if you want to specify that the element content language is different from the default language of your page, e.g. de for German. Browsers will identify that the content is written in German. 

    string

    none

    (error)

  7. Click Insert. The macro placeholder displays.

    The placeholder for an HTML Image macro.
  8. Save the page to render the image.

Examples

Basic example

Display an HTML image on a page:

The Edit HTML Image Macro screen, with an example image configuration.


The rendered HTML Image macro with the configuration from above.

Client-side image map

Atlassian's HTML macro must be enabled to use the client-side image map parameter. This action requires administrator permissions and the security risks should be understood before doing so.

See Atlassian's HTML macro documentation for more information. Once the HTML macro is added to a page, an image map can be defined.

An HTML Image macro with an HTML Macro used to create a client side image map.

The name of the map should be the same as the 'Client-side image map' parameter for the HTML Image macro, as follows.

The Edit HTML Image Macro screen, with an example image configuration for a client side image map.