Image widget configuration

Learn how to turn off fill frame for more image flexibility plus more in settings

Radovan Vidović avatar
Written by Radovan Vidović
Updated over a week ago

You can customize your Immerse images with the following settings.

Using fill frame

By default, your image will have fill frame turned on. This configuration will enlarge the image to fill the area of the column the image is in. If you want to change the focal point of your image and move the image with the column you can turn this off.

1. Move your mouse over your image until the editing icons appear at the top. Select the configuration icon.

2. To disable or re-enable fill frame, toggle the fill frame option on or off.

3. You can edit the amount of space that is being filled or the alignment, by changing the “Height” and “Align” in the drop-down menus.


Cropping an image

You can quickly crop an Immerse image within the Turtl editor. Not happy with the result? Don't worry you can re-crop the original image as many times as you need.

1. Move your mouse over your image until the formatting icons appear above. Select the Crop icon:

2. Position the highlighted window over the image to your chosen position. Once you are happy press Crop and the image will be cropped to your selection:

Note: You can resize the window by dragging the sides or corners of the box. You can also see how your chosen selection will look in the preview window.

3. If you want to crop the image again, just press the crop icon again and repeat the steps above.


Changing the image focus

Large or cropped images can have their position adjusted. This can be helpful if you want to ensure that the important part of the image is always visible, regardless of the size.

To fix the position of an image, hover your cursor over the image in the preview. A circle icon will appear; click and hold the icon while dragging it to the desired position.


Moving an image

1. Move your mouse over your image until the formatting icons appear above. Select the move icon so that your mouse arrow turns to a hand.

2. Drag the image positioning line to where you would like to move your image and release it.


Adding a caption

1. Move your mouse over your image until the editing icons appear at the top. Select the configuration icon.

2. Select the Caption tab and write your caption in the text box.

3. You can choose how to align your caption text under the image using the dropdown.

Formatting your caption

You can use markdown symbols * or _ to style your captions as bold or italic text.

For Italics - insert one asterisk (*) or one underscore (_) either side of the word/s you would like to italicize

For bold - insert two asterisks (**) or two underscores (__) either side of the word/s you would like to bold

For example, in the following sentence the word 'my' will appear in italics and 'caption' in bold:

Here is *my* image **caption**

Note: The style of the bold and italic text within the captions can be customized as part of your branding.


Image widget styles

The Styles tab of your image widget settings offers you the ability to customize corner radius, opacity, and change image orientation providing you with more control over the aesthetic appeal of your image.

Image opacity

To adjust the opacity of your image, move the slider to your desired percentage.

Flip

The Flip option allows you to flip your image, either vertically or horizontally.

Corner radius

You can adjust the corner radius by entering the rounding values in em. Choose to change all corners at once or individually.

The corner radius feature also allows you to showcase an image in a circular shape. This is particularly useful when featuring a person's portrait. To achieve a circular image, set the corner radius to 100 em and ensure that the uploaded image is cropped into a square shape. Then, adjust the widget size to fit the column width and your image will appear as a perfect circle.


Setting an image interaction

By default, your Immerse image is static within your Doc, but you have the option to enable the following when a reader clicks on the image:

To enable any of the above, move your cursor over the image until the formatting icons appear. Select configuration.

Then select the Interaction tab.

Zoom

To enable or disable image zooming, simply toggle the zoom option on or off.

Please note: When Zoom is enabled, any link options will automatically be disabled as the image cannot zoom and follow a link upon a reader's click.

Link

Select which type of link you require from the dropdown:

Page/URL

When a reader selects your image they will be directed to the hyperlink in a new tab

  1. Select Page or URL from the dropdown.

  2. Insert your hyperlink into the box.

  3. Select if you would like it to open in a new tab or in a lightbox (this will open it a smaller window within the Doc).

Email

When a reader selects your image, their email client will be launched with a pre-populated email

  1. Select E-mail from the dropdown

  2. Populate the email fields that you require


Adding a label and Alt text

Navigate to the Misc tab in the Image configuration:

Here you can add a label to your image. This label will help you locate your image in the analytics dashboard of your Turtl Doc.

You can also add Alt text under the Misc tab. Alt text allows you to add text within a webpage to describe the appearance and function of media such as images, charts, and videos.

For further information please check out: Accessibility - ADA and WCAG

Did this answer your question?