Learn how to upload, edit and position images in Modern Editor.
Topics covered in this article:
When you upload your image into Modern 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.
1. Click on an image block from the preview panel.
2. Upload an image into your image block.
Select the upload arrow to browse to a file for upload or simply drag and drop your file on top of the upload arrow.
3. Select Edit image to enhance, crop, and make a number of other edits to your image.
When you’re done editing your image, select Save to keep the changes made. Select the ‘x’ in the upper right corner to exit the tool without saving changes.
*some photo editor options…
4. Add alt text and a redirect for your image as well.
5. Add a caption for your image.
The caption will display under the image, watch it update under the image block on the preview panel as you type out the caption.
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 on an text block from the preview panel.
2. Place your cursor in the text area where you would like the image to go.
3. Click on Add > Image.
3. Upload your image and click I'm Done.
- You can either paste in the image URL in the src field or you can click Browse media to select an image from the media library.
- 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.
- Adjust the width and height of your image. This is especially useful if uploading a large image into the text block (this is helpful if you use retina images).
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 (ex, 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 (Ex, 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.
You can easily center your image in either an image or text block. You can do this easily by:
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'.
In CSS, 'auto' helps center content. This works really well in text blocks with one image and also works great in image blocks with an image that is smaller than the block's natural full width.
Here is a design that is 800px wide and an image block with a 80px max-width image using 'auto' for right and left margin - this results in the image taking up less width and remaining centered!
When you make edits to images inside Modern 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.
Note: Images uploaded into Modern Editor are saved in a unique Media folder for emails or pages, depending on the design you are building. You can find these images in the Media library: select the email folder or pages folder 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 Modern Editor.