Configuring Images on Templates
The Image Content element allows you to add photos, graphics, signatures, campaign artwork, and other visual elements to your template. You can upload images directly from your computer, select them from your organization's existing uploads, or add them from the available stock image library.
Once an image has been added to the template, select it on the canvas to open the image-specific settings on the right. From there, you can modify the image, adjust its display size and alignment, add alternative text, make it clickable, and control its spacing and responsive behavior.
Adding an Image to Your Template
There are three ways to add an image to a template. Uploaded image files can be PNG, JPG, or GIF. PDF files cannot be used as images within the Image element.
Image uploads are limited to 10 KB.
Add an Image Using the Image Content Element
From the Content tab, click and drag the Image element onto the location where you want the image to appear.
Once the Image element has been added, use the settings on the right to select the image source.
Upload Image | Opens the file selector so you can choose an image stored on your computer. |
More Images | Opens the available stock image library so you can search for and select an image. |
Drag and Drop | Allows you to drag an image file from your computer directly into the upload area. |
Add an Image directly from Uploads
You can also upload and manage images before placing them on the template.
Open the Uploads Design and Management Tab on the far right of the Template Editor.
Upload a new image or locate an image that has already been uploaded by your organization.
Click and drag the image directly from Uploads onto the desired location on the template.
Images stored in Uploads are available for reuse, which is helpful for frequently used organization graphics, campaign artwork, staff signatures, or other branded assets.
Uploaded images are shared within your DonorDock organization and can be accessed by other team members.
Add an Image from the Stock Image Library
The Images Design and Management Tab provides access to the available stock image library.
Use the search tools to locate an image, then click and drag the selected image directly onto the desired location on the template.
This allows you to add stock photography without first downloading the image and uploading it separately.
Editing the Image
After an image has been added to the template, select it and click Edit Image to open the built-in Image Editor. The Image Editor provides additional tools to modify the image itself rather than simply change how it appears in the template.
When you have finished editing, click Save to apply the changes and return to the Template Editor.
Image Editing Tools Available
AI Image Editing
The AI option provides AI-assisted tools for modifying the selected image. Supported capabilities may include removing or replacing backgrounds, removing unwanted objects, expanding the image, restyling visual elements, or making other edits from written instructions.
The exact AI options available may change as the editor's image tools are updated.
Filter Editing
The Filter tools let you adjust the image's appearance without replacing the original subject matter.
Filter Setting | What It Changes |
|---|---|
Brightness | Makes the overall image lighter or darker. |
Contrast | Increases or decreases the difference between the light and dark areas of the image. Higher contrast creates stronger separation, while lower contrast creates a softer appearance. |
Gamma | Adjusts the brightness of the image's midtones while having less impact on the brightest highlights and darkest shadows. |
Saturation | Controls the overall intensity of the colors. Reducing saturation moves the image closer to grayscale, while increasing it makes colors more pronounced. |
Vibrance | Increases or decreases color intensity more selectively, generally emphasizing less-saturated colors while preserving colors that are already strong. |
Hue | Shifts the colors throughout the image along the color spectrum. |
Sharpen | Increases edge definition to make details appear more distinct. Excessive sharpening can create an unnatural or grainy appearance. |
Blur | Softens detail and reduces sharpness across the image. |
Pixelate | Reduces visible detail by grouping pixels into larger blocks, creating a pixelated effect. |
Noise | Adds visual grain or texture to the image. |
Filters and effects can help with minor corrections or make different images within the same template feel more visually consistent.
Crop
The Crop tool controls which portion of the image remains visible.
Cropping options allow you to:
Manually adjust the visible area
Choose from available aspect ratios
Straighten or rotate the image as needed
Apply rounded corners within the image
Aspect ratios can be useful when multiple images throughout a template should have a consistent shape.
For example, using the same square or landscape ratio for several event photos can create a cleaner and more consistent layout.
Resize
The Resize tool changes the image's actual pixel dimensions by setting its width and height. This is different from the Auto Width and display-size controls available after you return to the main Template Editor.
Resizing inside the Image Editor changes the image file itself. Reducing the pixel dimensions and then displaying the image at a larger size later can reduce sharpness, while enlarging an image beyond its original resolution can also make it look softer or pixelated.
If you only need the image to appear smaller or larger within the template, use the Image element's display-width settings instead whenever possible. Those settings change how large the image is displayed without directly reducing its underlying pixel dimensions.
Draw
The Draw tool provides basic freehand drawing and annotation controls.
Use the available digital brush tools to draw directly on top of the image. This can be useful for simple markings, annotations, handwritten effects, or highlighting part of an image.
Text
The Text tool lets you add text directly on top of the image. This can be useful for creating:
Labels
Simple promotional graphics
Text overlays
Text added through the Image Editor becomes part of the image itself rather than a separate Heading or Paragraph element within the template.
For important communication copy, consider whether a separate Heading or Paragraph element would be more appropriate. Text that is embedded inside an image cannot be interpreted by screen readers in the same way as regular template text and may also become difficult to read when the image is resized.
Shapes
The Shapes tool lets you layer basic graphic shapes over the image.
Available shapes can include options such as:
Rectangles
Circles
Triangles
Lines
Other basic graphic shapes
Shapes can be used to highlight an area, create a background behind overlaid text, add visual emphasis, or provide decorative design elements.
Stickers
The Stickers tool provides decorative graphics that can be layered onto the image.
Available options can include stickers, icons, emoji-style graphics, or other visual decorations. Once added, the sticker can be positioned and adjusted within the image.
Use decorative elements selectively so they support the purpose of the communication rather than making the image unnecessarily busy.
Frame
The Frame tool applies a preset frame treatment to the image.
Frames are applied within the image itself, so the frame becomes part of the edited image when you save the changes.
This is different from the Border settings available elsewhere in the Template Editor. A Frame affects the image internally, while a Border added through the Image element settings is applied around the outside of the displayed image.
Image Display Settings
Image Display Settings control how the image appears within the template without directly modifying the underlying image file. To open these settings, select the image on the template canvas to open the image-specific settings on the right.
Auto Width
Auto Width is enabled by default and allows the editor to automatically determine an appropriate display width for the image based on the available space within the template and the column containing the Image element.
When Auto Width is enabled, the image can adjust to the available Content area without requiring you to manually set its width.
If you want more direct control over the displayed image size, turn Auto Width off. A slider will appear so you can increase or decrease the displayed image width.
Unlike the Resize tool inside the Image Editor, changing the display width does not directly reduce the image's underlying pixel dimensions. This makes the width control a better option when you simply need to change how large the image appears within the template.
When manually increasing an image's display size, keep the original image quality in mind. Displaying a small source image much larger than its original dimensions may still make it look blurry or pixelated.
Alignment
Alignment controls how the image is positioned within the available Content area.
Left | Positions the image along the left side of the available area. |
Center | Centers the image within the available area. This is the default alignment. |
Right | Positions the image along the right side of the available area. |
Justify | Uses the available width according to the editor's justified image layout. |
Alignment becomes especially noticeable when the image is narrower than the full Content area.
Alternative Text
The Alternative Text field, commonly called alt text, provides a written description of the image.
Alt text is an important accessibility feature. Screen readers can use this description to communicate the purpose or meaning of an image to recipients who cannot see it. Alt text may also provide useful context when an email application is unable to display the image.
Good alt text should be concise while still explaining the meaningful information the image conveys.
For example: Volunteers assembling backpacks for the annual school supply drive
provides considerably more context than: Volunteer photo
Avoid using the file name or generic descriptions such as image, graphic, or photo when a more meaningful description can be provided.
If the image contains important written information, make sure that information is also available elsewhere in the email whenever possible rather than relying entirely on text embedded in the image.
Adding an Action to an Image
Images can be made clickable using the Action settings. This allows the image itself to function similarly to a Button or linked Heading.
For example, an event graphic could open the event registration page, a Giving Day banner could open a DonorDock Giving Page, or a video thumbnail could direct the recipient to the hosted video.
Open Website
Open Website lets you enter the URL that opens when the recipient selects the image.
The Target setting determines whether the destination opens in the Same Tab or a New Tab. New Tab is selected by default.
This can be used for webpages, Giving Pages, event registration, hosted documents, videos, or other online resources.
Send Email
Send Email opens a new message in the recipient's supported email application.
Field | What It Does |
|---|---|
Mail To | Sets the email address that will populate as the recipient. |
Subject | Sets the subject line that will populate in the new message. |
Body | Adds predefined wording to the body of the new email. |
Call Phone Number
Call Phone Number lets you enter a telephone number to use when the image is selected.
On a compatible device, the recipient will be prompted to initiate a call to that number.
Go to Page Section
Go to Page Section allows the image to act as internal navigation within a longer email.
Select one of the Page Sections already configured within the template. When the recipient selects the image, the email will move to that section.
General Settings
The General settings control the Image element's placement and behavior within the surrounding template.
Container Padding
Container Padding controls the amount of space surrounding the Image element.
The default setting is 10 px on all sides.
Setting | What It Does |
|---|---|
Container Padding | Adds space outside the image and separates it from surrounding Content elements. |
More Options | Allows the Top, Right, Bottom, and Left padding values to be controlled independently. |
Increasing Container Padding can help prevent an image from appearing crowded against nearby Headings, Paragraphs, Buttons, or other elements.
Section Name
The Section Name field allows the Image element to serve as a destination for internal navigation within the email.
Enter a short, recognizable name if another Menu item, Button, linked Heading, Image, or other supported element should direct recipients to this location using Go to Page Section.
For example, an image beginning your Volunteer Opportunities section could be assigned a Section Name of volunteer, allowing navigation near the top of the email to jump directly to that area.
Responsive Design
Responsive Design controls whether the Image appears based on the recipient's viewing device.
When editing in Desktop view, the available setting is Hide on Desktop. When enabled, the Image will not appear in the desktop version of the email.
When editing in Mobile view, the setting changes to Hide on Mobile. When enabled, the Image will not appear for recipients viewing the mobile version.
This can be useful when a particular graphic doesn't work well at a certain screen size or when you've created separate desktop and mobile images.
If you hide an image on one device type, review the surrounding Content carefully to make sure the communication still makes sense without that image.
Image Tips
Images can make a communication more engaging, but they should support the message rather than carry all of the important information on their own. Some email applications or recipient settings may prevent images from displaying automatically, so critical information should also be communicated through regular Heading or Paragraph elements.
Use appropriately sized images and avoid unnecessarily large files, particularly in Email templates. Large or numerous images can increase loading time for recipients. Unlayer also recommends keeping email visuals purposeful and balancing images with written email content.
Add meaningful alt text to images that convey useful information and review the template in both Desktop and Mobile views before sending. Unlayer identifies alt text as an important way to provide context for recipients using assistive technology or recipients whose email settings prevent images from displaying.
For images that have been modified using the Image Editor, remember that edits such as filters, annotations, text overlays, shapes, stickers, and frames alter the image itself, while settings such as Auto Width, Alignment, Container Padding, and Responsive Design control how that image is presented within the template. Unlayer's current Image Editor supports AI-assisted edits, filters and color adjustments, drawing and annotation, text, shapes and frames, and stickers and icons.