Images: Upload, edit, and position

Article author
Miguel Panayotty
  • Updated

When you upload your image into the editor, the image will fill the space you are uploading it to without any changes on your part. This is because the editor sets a class of full-width on all images. You can see this class by clicking on the image block and reviewing the edit content panel (left side). Any images uploaded into image block areas will always be responsive as long as full-width is set on the image. Removing full-width makes the image the true (implicit) width, and non-responsive.


Upload an image into an image block

1. Click an image block on the right


2. Upload an image into your image block

Select the upload arrow to browse to a file for upload or drag and drop your file on top of the upload arrow. 


3. (Optional) Click Edit Image to optimize, crop, and make other edits to your image

When you’re done editing your image, select Save and Close to keep the changes made. Select the ‘x’ in the upper right corner to exit the tool without saving changes. Learn more about editing images in Image Editor.




Upload an image into a text block

You can also upload images into text blocks. This is a great option if you want the image to be the exact size that it is. Images uploaded into text blocks are not responsive.


1. Click a text block on the right


2. Place your cursor in the text area where you would like the image to go


3. Click on the Add Image icon


4. Upload your image and click I’m Done

  • Paste in the image URL in the src field —or— click Browse to select an image
  • Optional. Adjust the width and height of your image. This is especially useful if uploading a large image into the text block (i.e., retina images).
  • Optional. Adjust the placement of your image. In the class field, enter 'image-right' or 'image-left' to place the image to the right or the left of the text in the text area. This creates an image-text-wrap effect in the text block.



Position images in text or image blocks

Positioning images in the design can be accomplished by going to the STYLES tab and adjusting the spacing within the container element. The most common positioning changes will be to margin and padding around the image. Go to the STYLES tab > select Container and adjust the margin and padding. Enter pixel dimensions for any values you include (e.g., 15px).


You can also set a max width on the image within the container. This can help you control how wide the image will be when it is loaded on a large device such as a desktop computer. Go to the STYLES tab > select Container and adjust the max width field. Enter pixel dimensions for any values you include (e.g., 480px). Your image will still be responsive when you set max width (whereas, setting width adds a restrictive width on the image).


When you have max width set on an image, you can also control where the image is positioned in the image block by setting auto in the right or left margin of the container. This could be a nice technique if you want to place your company logo at the top of your design and positioned off to the left or right. This works really well in text blocks with one image or in image blocks with an image that is smaller than the block’s full width.


Center an image

1. Clicking the Styles tab for the block you are in

2. Click on the Container for the block

3. Set a Max Width for the block

4. Set the right and left margins to auto



Add captions to images

Image captions have a variety of uses. Captions can give credits, describe the image, provide commentary, and add a voice that engages readers.


You can add a caption to your image by clicking on the image on the preview panel (right side of editor), then adding some text in the caption field on the editor content panel (left side of editor).


Changing the caption styles

Edit the p.caption style by going to your image block Styles tab or the global STYLESHEET. You can change some styles for your caption in the image block styles, such as font-size, font-family, line height, font color etc. Removing italics from the caption requires a few more steps.


To adjust caption styles globally

1. Go to the STYLESHEET

2. Under SINGLE BLOCKS, select Image

3. Select Caption element

4. Edit your Caption styles here to edit across the design at a global level


To adjust the caption style for an individual image block

1. Select the image block from the preview panel

2. Select the Styles tab from the edit content panel

3. Select Caption element

4. Edit your Caption styles here to edit for this image block



What happens to images edited inside the editor?

When you make edits to images inside the editor, the original file that was uploaded into the design will be updated with the edits. To go back to the original image, just upload the same image again with the same name. Save your update. Refresh the page if the image does not update right away.


Uploaded images are saved in a unique Media folder for /emails/ or /pages/, depending on the design you are building. To find these images, select the email folder or pages folder in Media and browse to the folder that corresponds to your email or page name. To avoid uploading files into the email and pages media folders, you can copy media links from specific folders of your choice and use these links for your media in emails or pages.