Photo
Upload and crop the cover photo for your donation page. Per-breakpoint cropping is the key concept to understand.
The cover photo takes up significant space on the donation form — on desktop it fills the right half of the page, on tablet it sits between the header and the form. Choosing the right photo and cropping it well for each breakpoint is one of the highest-impact things you can do for conversion. The cover photo is required — forms publish without one, but the photo area renders as broken.
Choosing a photo that converts
For the full rationale on what makes a donation form photo work — subject matter, composition, emotion, lighting — see our blog post The Science of Choosing the Right Photo for Your Donation Form. The short version: warm, candid, human, and specific beats staged, generic, or symbolic. Show the people or place the donation will help, not a logo or abstract concept.
Upload a cover photo
In the donation page editor, click the cover photo area in the form preview. If no photo has been uploaded yet, you'll see an Add Cover Photo placeholder with the recommended dimensions and accepted file formats.
The recommended dimensions are 1280 × 1800, in webp, jpg, or png. If image quality matters — for high-resolution displays or campaigns where the photo carries the brand — upload at 2x (2560 × 3600) and GiveForms will scale it down without losing sharpness.
Once a photo is uploaded, three controls appear on hover: Edit, Upload, and Delete.
Per-breakpoint cropping and replacement
Here's the part of the editor that's unique to GiveForms, and worth understanding before you upload: everything you do to the cover photo can be scoped to a single breakpoint or applied to all five.
The five breakpoints are Wide Desktop, Desktop, Tablet, Mobile Landscape, and Mobile Portrait. The layout of the donation form changes substantially across them — on desktop the photo sits beside the form, on tablet it sits above the form, on mobile it stacks differently again. A crop that frames a face perfectly on desktop may cut off the face on mobile. The per-breakpoint controls exist so you can fix that without compromising any single view.
Editing the crop
Click Edit to open the cropping tool. The dialog header tells you which breakpoint you're editing (for example, "Edit photo for Desktop breakpoint"). You can:
- Reposition the crop by dragging
- Zoom in and out
- Rotate the photo
- Flip the photo horizontally
- Undo recent changes
Click Save when the crop looks right for that breakpoint. To crop for a different breakpoint, switch breakpoints using the toggle in the top bar, then click Edit again.
Uploading a different photo per breakpoint
Click the Upload dropdown for two options:
- Upload for this breakpoint — replaces the photo only for the breakpoint you're currently viewing. The other breakpoints keep their existing photo.
- Upload for all breakpoints — replaces the photo everywhere.
Use per-breakpoint uploads when a single photo just can't be cropped to work across every screen size. A horizontal landscape photo might look great on desktop but feel cramped on mobile portrait, where a tighter close-up of the same subject would work better.
Deleting per breakpoint
Click the Delete dropdown for two options:
- Only this breakpoint — removes the photo for the current breakpoint only. The other breakpoints keep their photos.
- All breakpoints — removes the photo everywhere.
A workflow that scales
For most campaigns, the right sequence is:
- Upload one photo using Upload for all breakpoints.
- Crop it for Wide Desktop first — the largest canvas, where you'll spend the most attention.
- Switch to each smaller breakpoint and re-crop as needed. The photo carries over; only the crop changes.
- If a single photo doesn't work for one or two breakpoints, upload a different photo for just those.
Use preview mode (see Testing) to see how the photo lands in context with the rest of the form before publishing.