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 and edit in an image block

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 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. Learn more about editing images in Image Editor.

WordFly Image Editor

 

4. Add alt text and a redirect for your image as well.

 

5. (Optional) 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.

 

 

 

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 on a text block from the right panel

 

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

 

3. Click on the Add Image icon

 

3. Upload your image and click I’m Done.

  • Paste in the image URL in the src field —or— 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 (i.e., retina images).

 

 

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.

 

 

 

Was this article helpful?

Comments

0 comments

Article is closed for comments.