These notes apply to the new Impact Stack standard themes from 2021 onwards.
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)
and also offer some guidance on picking images that will work well as banner or background images.
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 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 on large screens, and will be cropped to a fixed ratio of 4:3 on small (mobile) screens.
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.
Banner image
In Layout B: Big banner (2 columns), when the form is displayed on a desktop/laptop 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.
On a mobile device, the Large Image will appear after the header, before the page title, form and content.
Original image as uploaded:
Layout B desktop display:
Layout B mobile display:
Background image
In Layouts C: Fixed background image (2 columns) and D: Fixed banner 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 computer screen. Depending on the screen size and image aspect ratio the image might be cropped to fit the screen.
On a mobile device, the background image will display between the header and the page title.
Original image as uploaded:
Layouts C and D desktop display
Layouts C and D mobile display:
For Layout E: Fixed background image (1 column), on the desktop screen top of the image is covered by the header and 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.
Layout E desktop display:
Layout E mobile display:
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