Images

How to add and change images, add image galleries, image captions, and alt attributes.

How to insert an image into a post?

Please watch this short tutorial to learn all about working with images and image galleries in Setka Editor:

Video tutorial on how to work with images and image galleries in Setka Editor

To add images to your post, you need first to upload them from your files or use Setka integration with Unsplash. Click the Add Image button in the Side toolbar and click Upload to browse saved images on your computer. Select one and click open. As a result, the image will be uploaded and will appear in the Setka Editor panel with images (in the Side Toolbar).

Image upload button in Setka Editor

To insert an image into a post, click in a paragraph (or in a grid), and select the image in the Side Toolbar's panel with images. The image will appear in the paragraph or a grid you clicked on.

Video tutorial on how to add an image to your content in Setka Editor

Quick add

If you need to add an image or a gallery above or below the grid, the Quick add menu can be used. To open it, hover the mouse above the grid and click the + button. The purple line above or below the grid will demonstrate where the image would be placed. If the nested grid is selected, the image can also be placed above or below the outer grid:

Adding an image via Quick add menu

How to edit an 'alt' attribute?

Click on the Alt text icon ("T") below the image

Alt Text icon on an image in Setka Editor

and fill in an alternative text in the popup window.

Popup window with a field to add Alt attrbutes in Setka Editor

Please keep in mind that an alt attribute is very important for SEO (it is indexed by search engines). Alternative text is displayed on the page if an image is not successfully loaded by the browser.

How to change an image?

To change an image, click on the Change image button () in the bottom right corner of the image and select another image from your already uploaded images in the panel in the Side Toolbar.

Change Image icon highlighted on an image in Setka Editor Interface

Video tutorial on how to replace (change) an image in Setka Editor interface

How to view the full-sized image?

By clicking the Open full-size button in the bottom left corner of the image (magnifying glass icon), you will open a separate tab in your browser with the full-sized original image. This icon appears on the right side of the image if it has not been added to the post but is uploaded to the image tab.

Open full size icon highlighted on an image in Setka Editor interface

How to get a link for an uploaded image?

This option is available for images uploaded to the image tab (but not in the post). Click the Get link icon on the right of the image. The link will appear in a new window

How to add a gallery?

To add a gallery to your post:

1. Click in a paragraph and click the Add image gallery tab in the right-hand toolbar.

2. Click Add image in the displayed gallery in the content editing area

3. Choose from your uploaded images to add them to the gallery.

We display galleries in editing mode in WYSIWYG format - exactly like it looks on a post preview page. You can even slide the images. Any custom CSS hacks added for a gallery will also be displayed in the editing mode.

You can also rearrange the images inside the gallery - click on the gallery settings icon, and in the popup, you can change the order by drag&drop of images thumbnails. You can also add new pictures to the gallery there.

Image gallery created in Setka Editor interface

Please note, that galleries are available only on Pro and Enterprize plans. Please see our pricing page for more details.

How to adjust indentations below an image?

Click on the image and select Bottom Indent from the Image tab. You can specify the indent size in pixels (px).

How to add a caption to an image?

Add a caption by clicking Caption button in the bottom right corner of the selected image.

Caption on icon highlighted in Setka Editor interface

A text box will appear under the image for you to add your caption.

Field to type in a caption under an image after the "Caption on" button is pressed

Click Caption to remove or edit the captions you have already added before.

How to edit captions under images in the post?

Click in the paragraph where the caption appears (under the image) to open the Caption tab in the Upper Toolbar. You can change the caption text alignment (left, center, right, post width) and the style of text (bold, italic, or underlined) in the Caption tab.

Captions tab in the Upper toolbar in Setka Editor

How to transform an image into a link?

Click on an image to open the Image tab. Insert the web address into the Link field and press ENTER. Clicking on this image will upload the link in a new tab.

How to create an anchor for the image?

Click on the image to open the Image tab. Click the Anchor button and give the image an anchor name. To reach this anchor from another part of your post, highlight the desired text or elements and in the Selection tab, select the anchor name. Clicking on this text or element will take you directly to the image where the anchor was applied. It comes in handy if you've added an infographic or a map, as the user can easily navigate the post while reading.

Read more about anchors in this article

Which image formats are supported?

Supported image formats are as follows:

.jpeg, .gif, .svg, .png, .bmp

Bear in mind that due to security reasons uploading .svg directly to the WordPress media library is prohibited. Nevertheless, you can do it through any relevant plugin such as SVG Support.

What are overhangs?

Overhangs feature allows extending background image (or background color) to the content side indents. You can add overhangs to grids, images, and embeds.

Overhangs are disabled by default (Overhangs > None). Overhangs can be applied to both margins or just to the left or right. The overhang size depends on the selected style's margins (for example, if margins = 0, overhang also = 0). For mobile devices, indents from the post edge are equal to 10 px on both sides. To remove the indents, click Overhangs > Both.

Video tutorial on how to apply overhangs settings in Setka Editor

How to set a fullscreen image?

Setka Editor works with post content only.

If your page template enables full-width posts, open a Post tab, select Layout grid > Limited, and set Overhang > Both for image properties.

WordPress:

Images in your post cannot extend beyond your post width determined by your WordPress theme. If your theme setting does not allow 100% width, you can install the Fullwidth Page Templates plugin, manually edit your WordPress theme's CSS files or set respective Post Attributes.

Once you have enabled 100% width, you will be able to set full-screen images.

How to set a background image?

Learn how to set a background image for the post, grid, or column from this article.

pageBackground images