Images
How to add and change images, add image galleries, image captions, and alt attributes.
Last updated
How to add and change images, add image galleries, image captions, and alt attributes.
Last updated
Please watch this short tutorial to learn all about working 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).
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.
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:
Click on the Alt text icon ("T") below the image
and fill in an alternative text in the popup window.
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.
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
To add a gallery to your post:
Click in a paragraph and click the Add image gallery tab in the right-hand toolbar.
Click Add image in the displayed gallery in the content editing area
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.
Please note, that galleries are available only on Pro and Enterprize plans. Please see our pricing page for more details.
Click on the image and select Bottom Indent from the Image tab. You can specify the indent size in pixels (px).
A text box will appear under the image for you to add your caption.
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.
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.
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
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.
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.
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.
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.
Learn how to set a background image for the post, grid, or column from this article.
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.
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.
Add a caption by clicking Caption button in the bottom right corner of the selected image.
Click Caption to remove or edit the captions you have already added before.
