Working with images in Drag-and-Drop Editor

Uploading new images

In the Images section of the side panel, click on the (add image) button. The file upload window will open, allowing you to search your computer for an image. Once found and selected, click Open to upload it. The image will be uploaded and will appear in the 'Images' section of the side panel.

To delete an image from your image side panel, simply drag the image onto the red cross delete icon. The image will be moved into the recycle bin.

If you wish to upload multiple images, organise your images into folders, or crop, resize and edit images, click on Manage to open the image manager.

You can also drag images from your computer into the images side panel.

eedim_1_el.png

Inserting an image

Once your images appear in the side panel, you can drag and drop them directly into your template.

As you drag the image over the template, dropbars will appear above and below existing blocks and containers showing you the position you'll be inserting your image. Release the image over a dropbar to insert it there.

eedim2.png

If you're inserting an image into a text area, then as you drag the image over the block, a drop box will appear to show you where you can place the image. Release the image and it will appear in the template.

eedim3_el.png

Images dropped into your template are automatically scaled in proportion.

You can select an image and use the resize handle to make the image larger or smaller; as you scale the image, the revised sizes (width and height) are shown in a box just above the image.

If you need to scale an image to only change the height or width, then you'll need to edit the image by clicking on Manage and cropping it within the image manager.

The images toolbar

When you click on an image within your template, the toolbar automatically changes and the side panel expands to show all the images you've uploaded.

eedim4_el.png

The images toolbar contains the following features:

Link

The Link button lets you add links to your images. These could be links to webpages or special links such as links to the unsubscribe page, a survey, or forward to a friend.

Align

There are several image alignment options available, covering left, right and centre.

If you've inserted an image within a text block then the Inline option will ensure that you can display your image with text above and below it.

Image title

This allows you to enter a description for your image which will serve as the alternative text for it (the HTML alt attribute) that's shown when an image can't be seen. This might be because, for example, the email is being read with a screen reader, or the images haven't been downloaded.

It will also appear as the image's caption when mousing over it.

Spacing

Margins can be set to add space to each side of your image, setting a distance between the image and the surrounding text.

Each side of the image can have a different margin; this is set by specifying the number of pixels and clicking on the top, bottom, left or right-hand side of the image graphic.

eedim5_el.png

Note

Image blocks can't have margins set. The Borders & padding tool under Styles should be used for this.

Replacing an image

To replace an existing image, simply drag the new image over the existing image and release. The new image is inserted and automatically scaled to fill the block it was inserted into.

Have more questions? Submit a request

0 Comments

Article is closed for comments.