Help Center
  • Welcome
  • Setka Editor
    • Getting started
    • Drag-and-Drop & Multiselect
    • Text editing
    • Grids and Layout
    • Images
      • Image Editor
    • Background images
    • Icons
    • Animations
    • Lists
    • Tables
    • Dividers
    • Footnotes
    • Hotspots
    • Enhance Symbols
    • Post templates
    • Buttons
    • Comments and collaboration
    • Embeds
    • Hyphenation
    • Responsive layout for mobile screens
    • Custom CSS
    • Custom JS plugins
  • Setka Content Design System Manager
    • Creating and editing styles
    • Text formats and fonts
    • Styles display for mobile mevices
    • Text and background colors
    • Dividers
    • Icons
    • Components – reusable design elements
      • Creating Components with HTML and CSS
        • CSS in components
        • Component examples
    • Configuring layout grids
    • Editing default elements with Custom CSS
    • Adding team members
  • Account Settings
    • Account settings basics
    • Access rights
    • Billing and subscription
  • Preserve your Setka Editor content after the service shutdown
  • Integrations
    • Setka and WordPress
      • Installing Setka Editor WordPress plugin
      • Launching Setka Editor on the post creation page
      • Setka Editor and WordPress compatibility
      • Setka Editor compatibility with the most popular WordPress plugins
      • Inserting graphs, charts, or diagrams into a post
      • Setka Editor and Google AMP
      • Inserting adverts into a post
      • srcset — the attribute for image size optimization
      • Page load speed optimization settings
        • Autoptimize plugin configuration
      • WordPress troubleshooting: known Issues and how to fix them
      • Preserve your Setka Editor content after the service shutdown
    • Setka and Drupal
      • Setka for Drupal — compatibility, and features
      • Installing Setka modules for Drupal
      • Setka content on AMP pages in Drupal
    • Setka and Magento
      • Installing Magento 2 extension
        • Setka Editor configuration page
      • Preserve your Setka Editor content after the service shutdown
    • Setka and HubSpot
      • Setka Editor and HubSpot Blogs
      • Setka Editor and HubSpot Landing Pages
      • Semi-gated content with a HubSpot form
      • Preserve your Setka Editor content after the service shutdown
    • Setka and Bitrix
      • Preserve your Setka Editor content after the service shutdown
    • Setka and Ghost
      • Copying and pasting posts from Setka to Ghost
    • Setka and SharePoint Online
      • Installing Setka Editor application into SharePoint Online
    • Setka and Zapier
      • Setka and Webflow
        • Exporting new posts
        • Updating exported posts
      • Setka and Shopify
    • Setka and Integromat
    • Content Cloud
  • API
    • Setka Content Cloud API
    • Webhooks
    • API for Custom CMS Integration
      • Introduction to custom integration
      • Integration with Content Design System Manager (CDSM)
        • Initial sync — receiving Setka Editor files to connect them to your CMS
        • Storing and processing Setka Editor files
        • Connecting Setka Editor files to the pages of your site
        • Receiving style updates from the Style Manager and new editor versions
      • Setka Post Editor initialization (JavaScript)
      • Integration with Style Manager (API v1, previous version)
      • Preserve your Setka Editor content after the service shutdown
    • Custom Components API
  • VIDEO TUTORIALS
    • Setka Editor Video Tutorials
  • Components Library
    • Components Library
    • Guide: Ideas for Using Setka Editor’s Components to Improve Content Design
  • Content Experience Design Best Practices
    • Guide To Designing a Great Content Experience
Powered by GitBook
On this page
  • How to insert an image into a post?
  • Quick add
  • How to edit an 'alt' attribute?
  • How to change an image?
  • How to view the full-sized image?
  • How to get a link for an uploaded image?
  • How to add a gallery?
  • How to adjust indentations below an image?
  • How to add a caption to an image?
  • How to edit captions under images in the post?
  • How to transform an image into a link?
  • How to create an anchor for the image?
  • Which image formats are supported?
  • What are overhangs?
  • How to set a fullscreen image?
  • WordPress:
  • How to set a background image?

Was this helpful?

  1. Setka Editor

Images

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

PreviousGrids and LayoutNextImage Editor

Last updated 2 years ago

Was this helpful?

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:

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.

Quick add

How to edit an 'alt' attribute?

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.

How to change an image?

How to view the full-sized image?

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.

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.

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?

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

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.

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.

Which image formats are supported?

Supported image formats are as follows:

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

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.

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:

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

How to set a background image?

If you need to add an image or a gallery above or below the , 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:

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.

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 will also be displayed in the editing mode.

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

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.

Read more about anchors

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 .

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 plugin, manually edit your WordPress theme's CSS files or set respective Post Attributes.

Learn how to set a background image for the post, grid, or column

grid
pricing page
SVG Support
Fullwidth Page Templates
from this article.
Background images
Video tutorial on how to work with images and image galleries in Setka Editor
Video tutorial on how to add an image to your content in Setka Editor
Video tutorial on how to replace (change) an image in Setka Editor interface
Video tutorial on how to apply overhangs settings in Setka Editor
in this article
custom CSS hacks added for a gallery
Image upload button in Setka Editor
Adding an image via Quick add menu
Alt Text icon on an image in Setka Editor
Popup window with a field to add Alt attrbutes in Setka Editor
Change Image icon highlighted on an image in Setka Editor Interface
Open full size icon highlighted on an image in Setka Editor interface
Image gallery created in Setka Editor interface
Caption on icon highlighted in Setka Editor interface
Field to type in a caption under an image after the "Caption on" button is pressed
Captions tab in the Upper toolbar in Setka Editor