Picking the right images, cropping and preparing them properly can make a huge difference to the visual impact of your action, especially if you’re using a layout variation with a large banner or background image. As well as making sure they look good, preparing your images correctly will offer the best experience to your users.
This article will explain how to make best use of the three different types of images in your Impact Stack:
- Main image or video (all layouts)
- Content image (all layouts)
- Large image (banner/background image, layouts B-E)
We’ll also offer some guidance on picking images that will work well as banner or background images and explain how you can add images to your thank you emails.
Main image or video
This image will be placed between the page Title and Body in all layouts. It is added via the field “Main image or video”.
Images uploaded into this field will be automatically resized to a width of 800px, with the same aspect ratio (proportions) as the original image. The uploader will allow you to add a file up to 12MB, but we would recommend keeping your image as small as possible, without losing quality. Our new standard themes offer improved page load times - it would be a shame to make your users wait for a large image to download, and if they’re on a metered or slow connection, they might get frustrated and leave the page. If you add an image larger than 5Mb it won’t display correctly on Twitter cards.
Videos added to this field should ideally have an aspect ratio of 16:9, otherwise the video will display ‘pillarboxed’ or ‘letterboxed’ with black stripes either side.
In general, we don’t recommend adding video content to your forms. By the time someone has reached your form they’re probably ready to take action, and you don’t want to slow them down - but it’s an option if it’s right for your action.
Content image
As well as the main image, you can also add images to the content, for example the body section. These can be added to the content using the media browser in the WYSIWYG editor.
As with the main image, the image will be automatically resized to 800px width.
Large image
The ‘large image’ field will appear if you’re using one of the additional layout variations available with our standard themes. This is where you add the banner image for layout B: Banner image (2 columns), or the background image for layouts:
C: Fixed background image (2 columns)
D: Fixed banner image (2 columns)
E: Fixed background image (1 column)
Because large images will be used ‘as is’ they have stricter restrictions on the maximum file size: at least 1500x800 pixels and no more than 500KB. The ideal is the highest possible resolution (number of pixels) with the smallest possible file size; the upload restrictions try to help aim for a balance. Main and content images are scaled (and sometimes cropped) so the file size of the original image is less important.
We would recommend first cropping the image if needed and resize it to smaller dimensions, ie. 1500x800 pixels. Then export the image, ideally as jpg. Sometimes the smaller dimensions might be enough to get the image below 500KB, otherwise you can change the quality/compress it afterwards.
We recommend using a service like tinypng or tinyjpg to compress your images. A jpg can usually be compressed to a smaller size, so if you’re struggling to get an image small enough, try switching from a png to a jpg file format.
A banner image (Layout B) must be min width 1500px max file size 500KB. The image will display at 1:0.46, regardless of the display size. If your image is deeper than this ratio, an equal amount will be cropped from the top and bottom of the image.
A background image (Layouts C, D, E) must be min width 1500px, max file size 500KB. The image display will adapt to the browser window, and parts of the image may be cropped. The instructions below can help you make sure the key part of your background image is visible in most use cases.
Safe Zone
Large images may be cropped depending on your screen size. To ensure a certain part of the image is visible across screens, place the focus a bit to the left of the centre of your image on layouts B-D. On layout E different parts of the image will be visible on desktop and mobile, and a large proportion of your image will be covered by your form and content. This layout is therefore best suited to abstract images, landscapes like mountains, sea, and forest, and other images without a singular focus point.
Picking an image
If you don’t have access to a library of good images, it’s worthwhile investing in sourcing some quality stock photography. This can be via a paid-for service such as istock or shutterstock, or a service that provides royalty-free images such as Unsplash. (Don’t forget to consider where you’ll put the photo credit, if appropriate.)
Choosing images for the ‘Large image’ space needs particular care, as parts of the image might be covered by some elements or cropped (see above) depending on the layout and screen size.
It’s therefore worthwhile spending some time sourcing, preparing and testing some sample images ready for use, and making sure you test how they display across different devices and screen sizes. Image research can be time consuming, and you may not have much time if you need to launch an urgent action. You can ask for help from your design or photo library colleagues if you have them, or contact support for advice.
For the purpose of demonstrating image display on the different layout variations, we’ve used the following image throughout.
Original image as uploaded:
Banner image
In Layout B: Big banner (2 columns), when the form is displayed on a desktop screen, part of the image is covered by the form. Depending on the screen size and image aspect ratio, the image might be cropped to fit the screen. To ensure a certain part of the image is visible across screens, place the focus a bit to the left of the centre of your image.
On a mobile device, the banner image will appear after the header, before the page title, form and content. If you don’t use a display heading the entire image will be shown. With a display heading the image will appear more zoomed in to make sure there is enough vertical space to place the display heading on.
Layout B desktop display:
Layout B mobile display:
Background image
In Layout C: Fixed background image (2 columns) the top of the image is covered by the header, and part of the image is covered by the form and content on a desktop screen. Depending on the screen size and image aspect ratio, the image might be cropped to fit the screen. To ensure a certain part of the image is visible across screens, place the focus a bit to the left of the centre of your image.
On a mobile device, the background image will display between the header and the page title. Depending on the exact size of your device, roughly half your screen will be taken up by the background image. With a short display headline the image area doesn’t change. If you use a longer display heading, the image will extend downwards until finally a gradient is added at the bottom of the image to accommodate the headline text. The colour of this gradient will depend on your theme and can be overwritten on a per-action-basis with this code snippet. If you want to change the colour for your entire theme, reach out to the support team.
Layout C desktop display:
Layout C mobile display:
In Layout D: Fixed banner image (2 columns), similarly to Layout C, the top of the image is covered by the header, and part of the image is covered by the form and content on a desktop screen. Depending on the screen size and image aspect ratio, the image might be cropped to fit the screen. To ensure a certain part of the image is visible across screens, place the focus a bit to the left of the centre of your image.
On a mobile device, the background image will display between the header and the page title. Depending on the exact size of your device, roughly half your screen will be taken up by the background image. With a display headline, the background image will fill your entire screen, no matter the length of your headline text. The image will zoom in to fill the entire height of the screen, so only a small proportion of your image may be visible.
Layout D desktop display:
Layout D mobile display:
For Layout E: Fixed background image (1 column), on a desktop screen the top of the image is covered by the header and part of the image is covered by the form. As the form and content is placed in a single column, the majority of the central part of the image will be covered. This layout is therefore best suited to abstract images, landscapes like mountains, sea, and forest, and other images without a singular focus point.
On a mobile device, the background image will behave similarly to Layout C and will display between the header and the page title. Depending on the exact size of your device, roughly half your screen will be taken up by the background image. With a short display headline the image area doesn’t change. If you use a longer display heading, the image will extend downwards until finally a gradient is added at the bottom of the image to accommodate the headline text. The colour of this gradient will depend on your theme and can be overwritten on a per-action-basis with this code snippet. If you want to change the colour for your entire theme, reach out to the support team.
Layout E desktop display:
Layout E mobile display:
Changing the colour of the overlay gradient
On some layouts you might see a colour gradient overlayed onto your background images on mobile devices, if additional vertical space needs to be created to place a display heading. The colour of the gradient is defined in your Impact Stack theme.
In some cases, you might want to change the colour of the gradient to better match the image you are using for your action.
To override the colours on a per-action basis, switch the WYSIWYG editor to 'Source' mode to view the code and then add this code at the bottom of your action content. (Make sure you replace #xxxxxx with the hex code of your desired colour.)
<style>
#background {
background-color: #xxxxxx; }
</style>
If you want to change the colour for your entire theme, reach out to the support team.
How can I add images to Impact Stack thank you emails?
Images need to be added manually to html thank you emails in Impact Stack.
1/ Upload your image to Impact Stack
- Go to https://your.subdomain.org/admin/content/file
- Click "+Add file"
- Choose the file from your computer and click "Next"
- Select 'public' for the image (so people will be able to see it!)
- Add Title and Alt tags
- Click "Save"
2/ Get the URL of the image
In the admin/content/file view, click on the file name of the image you want (red link) to see a preview. Then right click on the image and choose "Copy Image Address" from the context menu. This will place the full URL of the image on your clipboard.
3/ Add the URL to the html of your email
Click on the "Source" button in the editor of your email to view the html source code. Look for the place where you want to have your image and add:
<img src="yourimageurl">
where "yourimageurl" is the URL you found in the first step.
Comments