Image
Sonat supports various tools and options to work with images to help you enrich content. You can insert or upload, resize, style, caption, and link images. All of these features work with block, inline, and responsive images out-of-the-box. Here is a list of features that extend the editor capability.
- The contextual toolbar is available on mouse click and gives access to image features.
- Image captions allow adding descriptive text under the image.
- The image styles help control the placement, size, and other characteristics with predefined styles.
- The text alternative tag aids accessibility and SEO. It provides additional image descriptions and supports better navigation.
- Image resizing lets the user control the dimensions of images in the content.
- Linking images makes it possible to use them as URL anchors.
- A selection of image upload methods allows for the most convenient way of adding images. These include support for inserting an image via URL and even via pasting a URL into the editor along with custom integrations.
Upload images
Uploading images in Sonat rich text editor is quite effortless and intuitive. You can simply insert one or multiple images into the content editor at once. Images are delivered through a blazing-fast CDN and uploaded securely. The system provides rescaling, optimizing, and various image sizes (responsive images). There are several ways you can upload images.
- Paste an image from the clipboard.
- Drag a file from the file system.
- Select an image through a file system dialog.
- Select an image from a media management tool in your application.
- Paste a URL to an image into the content.
Image settings
The image contextual toolbar is accessible through clicking the image and provides access to the image settings and features.
Image text alternative
The image text alternative, also known as alt text or alt attribute, improves text accessibility and SEO. It helps users with a screen reader navigate and understand the content better and provides a meaningful description for search engine crawlers. To add or edit an image alt text, take the following steps:
- Click the image so that the toolbar appears above or below the image.
- Click the alt text button on the image toolbar.
Preview - Add/edit your image text alternative.
- Click the checkmark to save your changes.
Image caption
You can add descriptive information as captions under block images. To add/edit the caption:
- Click the image so that the toolbar appears above or below the image.
- Click the caption button on the image toolbar to reveal the caption field under the image.
Preview - Add/edit your image description as the caption.
You can edit the caption like a regular text of the content. Click on the caption text and start editing as you desire.
You can toggle the caption on and off by clicking the caption button on the toolbar.
Resize images
You can freely set your image size by dragging or using the resize buttons on the image toolbar.
Using resize handles
Square handles will display in each corner of a selected image.
You can freely drag the corner handles to resize the image and adjust it to the text you need.
Using resize dropdown
You can also resize your images using the set of predefined size options.
Open the resize dropdown on the toolbar and choose the desired size to resize your image accordingly.
Image styles
You can change images alignment (Center, right, left) and set their style to be inline or block, wrapped with text or between paragraphs. When a new image is inserted, the editor will choose the optimal style based on the insertion context. However, you can change the style of images using the image toolbar buttons:
'align-block-left',
Preview'align-block-right',
Preview'block'- align-center is the default style for block images.Preview
'align-left',Preview- 'align-right' .
Preview