You can customize images in your Content pages with the following settings.
Move 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.
Image configuration
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.
Layout
Fill frame
By default, your image will have the 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 and go to the "Layout" tab.
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.
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.
Format 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 (_) on either side of the word/s you would like to italicize
For bold - insert two asterisks (**) or two underscores (__) on 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.
Interaction
By default, your 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 Widget toolbar appears. Select "Image configuration".
Then select the "Interaction" tab.
Zoom
To enable or disable image zooming, toggle the "zoom" option on or off.
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.
Select Page or URL from the dropdown.
Insert your hyperlink into the box.
Select if you would like it to open in a new tab or in a lightbox (this will open it in a smaller window within the Doc).
When a reader selects your image, their email client will be launched with a pre-populated email.
Select E-mail from the dropdown.
Populate the email fields that you require.
Add 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.
Crop image
You can quickly crop an 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.
Change 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.