How do I add images in the Drag & Drop Email Editor?
Do you want to grab your subscribers’ attention and increase your email open rates? You can by adding images to your e-blasts! Choose the jump start method or skip to dive in deeper and get a few pro tips.
Jump start:
If your template shows an image placeholder, just click on it and the image settings will open.
Want to swap out the image? Click the icon of rotating arrows and select a new image or graphic. We have millions to choose from. Really.
Need to do a quick crop? Click the magic wand icon and the image editor will open. Crop away, apply, and save. Poof! Your custom edited image appears.
Want to swap out the image? Click the icon of rotating arrows and select a new image or graphic. We have millions to choose from. Really.
Need to do a quick crop? Click the magic wand icon and the image editor will open. Crop away, apply, and save. Poof! Your custom edited image appears.
Pro tip! When swapping an image for another, keep in mind whether you need it in portrait or landscape orientation based on where the image is located in the e-blast.
Deeper dive
From here you can search for and select an image from our extensive library, upload an image from your computer, or use an image URL.
Click Select to add the image to your e-blast. In the e-blast, click on the image to open the Image settings menu.
Click Select to add the image to your e-blast. In the e-blast, click on the image to open the Image settings menu.
Change image: Swap the image for another by clicking the Change image icon.
The LibraryAware Image Selector will open. Search for and select an image from our extensive library, upload an image from your computer, or use an image URL. Click Select.
NOTE: The image will fit the width of the container, maintaining its original aspect ratio. To resize the image (change aspect ratio, crop, etc.) see Edit Image below.
Edit image: In the image editor you can crop, add frames, shapes, text, and more! To open the editor, click on the Edit image icon.
See our help page: How do I edit images in the Drag & Drop Email Editor?
Pro tip! Want to crop your image into a square? Choose the 5:4 aspect ratio then adjust the pixel width and height to be equal.
URL: Click the URL button to see the URL path of the image. If you want to change the image to an image found online, paste the image URL in the Image path box.
Rollover effect: Rollover is when an image changes to another image when the reader hovers their mouse over it. Click to toggle on. This will open the LibraryAware Image Selector. Search for and select an image from our extensive library, upload an image from your computer, or use an image URL. Click Select.
NOTE: Rollover effect works in a limited number of email services: Yahoo! Mail, AOL, Gmail, iCloud Mail, Outlook 2003, MacOS Apple Mail.
Link: Enter the URL of where you want viewers to be directed when they click on this image. Use the Site drop-down menu to select the type of link you want to include. To link to a book in your catalog, an e-resource, or uploaded file, click the Additional Link Options button.
NOTE: When linking to a book in your catalog, catalog holdings information will be displayed if your library has On The Shelf (OTS). For libraries not using OTS, search by ISBN to ensure you are linking to the copy owned by your library.
Alternate text: Enter your Alt Text to the image for accessibility. See: Accessibility in LibraryAware Emails.
NOTE: The Alt Text will not change automatically when you swap out an image, so be sure to update it.
Alignment: To align the image within the container, select left, center, or right alignment.
To set a different alignment for mobile view, click the mobile icon then set the alignment.
NOTE: The alignment option works only for those videos and images when there’s some space in the container, like internal paddings. If the image or the video takes the entire container, the alignment option will not be active.
To set a different alignment for mobile view, click the mobile icon then set the alignment.
Pro tip! Some elements look good on desktop devices when center-aligned but may not look as good on mobile devices. You may want to set different alignments for certain elements on mobile and desktop devices. Click the Device Preview icon to see how your email will look on desktop and mobile devices.
Size: Adjust the width and height of the image using the + and – controls or by entering numerical values. Restore the image to original image size by clicking the Restore to actual size icon.
NOTE: Using the Size adjustment, images can only be enlarged to the maximum width of the container and will keep their aspect ratio. If you want to crop the image to change the aspect ratio or to zoom in on a specific area of the image, use the image editor by clicking the magic wand icon.
Adjust to width: To increase the width of the image to fill the width of the Container, click to toggle on.
Responsive image: This option allows the image to adjust to the width of the screen of the mobile device.
Padding: Padding refers to the margin around images or text. To add padding to the edges of an Image Block, use the + and – controls to adjust the padding for all edges.
To adjust the padding for each edge separately, click More to toggle on. Click the mobile icon to adjust padding for the mobile version.
Add an anchor link: Anchor links allow viewers to jump to specific areas within the email. To add an anchor link to the image, click to toggle on Add an anchor link and enter a name for the anchor.
Next, click on the Block that you would like linked to this anchor.
NOTE: Adaptivity only works on devices that support it.
Padding: Padding refers to the margin around images or text. To add padding to the edges of an Image Block, use the + and – controls to adjust the padding for all edges.
To adjust the padding for each edge separately, click More to toggle on. Click the mobile icon to adjust padding for the mobile version.
Pro tip! Sometimes you want to make your email design “clean” with lots of white space. Sometimes you use padding for containers and structures to fill them in with a color background. This all looks good on desktop devices, but on mobile devices it may make those elements less attractive. So, you may want to remove padding for mobile devices. Click the Device Preview icon at the top of the page to see how your email will look on desktop and mobile devices.
Next, click on the Block that you would like linked to this anchor.
- To link a piece of text in a Text Block, highlight it and click on the Change Link icon on the formatting toolbar. In the settings menu, go to Link and click the Site drop-down menu. At the bottom of the drop-down, select the anchor.
- To add the link to other Blocks, in the settings menu for that Block, go to Link and click the Site drop-down menu. At the bottom of the drop-down, select the anchor.
NOTE: Anchor links are not supported in some email clients: iOS Gmail app, iOS Apple Mail, Outlook app on Android, Outlook app for macOS and AMP Emails.
Hide element: If you wish to hide an image from view on either desktop or mobile devices, select the corresponding icon in the Hide element section.
Include in: By default, the image will be included in both HTML and AMPHTML emails. We do not recommend you change this setting.
Pro tip! There are a few reasons why you might need this option. For example, you may want to hide some elements on mobile devices to avoid horizontal scrolling, which could happen if you apply a large font size to the text. Click the Device Preview icon at the top of the page to see how your email will look on desktop and mobile devices.
Delete: To delete an Image Block, hover over it in the e-blast. A menu tab will appear on the right side of the block. Click the tab then click the trash can icon.