Simple Images
On this page:
Introduction
The Simple Image macro provides a way to spruce up your images.
It provides the ability to change the shape of images, add borders and frames, as well as captions and mouse over effects. Additionally, it integrates with Unsplash, giving you access to over 3 million free high-resolution images you can easily embed in your pages.
Example Images
Here you can see just a few examples of the different ways you can configure an image.
How to Insert the Image Macro
To add the Simple Image macro to a Confluence page, use the macro insert menu "+" from editor toolbar, and select SCM Image from the typeahead list.
Alternatively, type ‘/' in the editor to trigger the macro insert suggestions and type 'scm image’.
Configuring the Image Macro
Once the macro is inserted, it will automatically trigger the configuration dialog, allowing you to customize the image.
Template Tab
The first screen you'll see in the Insert Image Macro dialog is the Template screen. This is where you'll find a collection of pre-made templates. These should give you a quick starting point for various different visuals. Selecting one of the templates will apply the settings for that template, with the results applied on-the-fly in the preview area in the middle.
Advanced Config Tab
If you want to further customize the image, navigate to the Advanced Config tab. This is where you can change virtually everything about the image.
The advanced config is split into multiple groups, each of which has its own settings drawer. Click one of the fields to open a drawer and change the relevant settings.
Image Settings
The image settings drawer allows you to change the image being shown, as well as set the size and aspect ratio of the image.
Most of the settings are pretty self-explanatory.
Setting | Description |
|---|---|
Image | The image field is a drawer in itself that when clicked opens an image picker. In the next section, you can find more details about the Image picker. To clear the image field, click on the trash bin icon to the right. |
Image Height/Width | Use the size controls to change the height and width of the image. Note that by default, you can set both dimensions independent of each other, which can result in a distorted image. This can be fixed by enabling the aspect ratio to lock the original proportions of the image. |
Lock Aspect Ratio | When enabled, it locks the aspect ratio of the image in place. Thus, changing the height will also change the width accordingly to preserve the aspect ratio. |
Ratio Height/Width | The aspect ratio of an image is the ratio of its width to its height. Use the size controls to make certain adjustments. Changing these numbers adjusts the ratio, which will change how the image height/width changes. |
Image Picker
The Image Picker drawer allows you to select an image to be used.
The image picker allows selecting an image from any space, as well as any page within any space thru its attachments.
Alternatively, you can use the Unsplash tab to select one of over 3 million free high-resolution images!
If you want to use an image hosted elsewhere, you can also paste the url directly into the image url field within the Link tab.
Image Visuals Settings
The Image Visuals drawer allows you to change the visuals/styling of the image.
Setting | Description |
|---|---|
Shape | Choose from the available shapes for the image. |
Style | Allows styling the image with a border, a frame or as a polaroid. |
Border Color/Width | Depending on the style chosen, you can set the border color and width for the image using the color swatch. |
Adaptive Border | Toggle this button to allow Border Width adjustment or leave the border width automatically adjusted based on the style. |
Frame Color | If a style is chosen that provides a frame around the image, you can use this setting to change the frame background color via the color swatch. |
Shadow Color | When enabled, it adds a drop shadow to the image in a color of your choice from the color swatch. |
Image Caption Settings
The Image Caption drawer allows you to add a caption text to an image.
The Image caption is optional. You can enable/disable it using the toggle switch.
Setting | Description |
|---|---|
Caption Text | Enable this setting to reveal the image caption settings and be able to set the actual caption text. |
Color | Change the color of the caption text using the color swatch. |
Font Size | Change the size of the caption text using the size controls. |
Text Position | Configure where the caption text should be shown for the image. |
Text Styling | Add some basic styling to the caption text. |
Text Background Color | Enable this setting to add a colored background to the caption. This can be useful to make the caption text more visible when it is shown on top of the image. Use the color swatch to achieve this. |
How to Edit or Resize the Image Macro
To edit an image macro in a page, hover over the image macro, and then click on the macro handle to reveal the macro configuration toolbar.. Finally, click on the edit icon on the toolbar that appears.
This will launch the Configuration dialog, with the Template tab active.
question:
How can I resize an image?
Unfortunately, third-party Confluence macros like ours don't have access to the same fancy resizing mechanism that the standard Confluence Image has. As such, we can't offer the same convenient drag & drop resizing. You will have to edit the image macro and change the height/width within the image.
Compatibility with Other Macros
The Simple Image macro is compatible with most built-in Confluence macros that allow you to place other content inside of it.
This means, you can put a button into a Columns/Layout macro, or a standard Panel, or bulleted list, or a table, etc.
Limitations
Confluence macros created by vendors like us do not get access to same advanced macro features as standard Confluence macros. As such, the Simple Image macro does not support Drag & Drop resizing, or the Wrap left/right functionality that allows text to flow around the image.