Adding photos to a design

This article shows you how to get photos into a design: which layers accept photos, the two ways to add or replace a photo, which file types work, and how to choose the right fit mode.

Photo layers vs. static graphics

A design contains two kinds of image layers, and only one of them is meant for your photos:

• Photo layers — the slots that hold a different photo in every design. Select one and the properties panel shows a Dynamic Image heading with an amber Dynamic badge. These are the layers you fill with each customer's or athlete's photo.
• Static graphics — fixed artwork that's part of the template itself: backgrounds, logos, frames, decorative elements. The panel heading for these is Graphic. They stay the same in every design, so you normally leave them alone.

When you drop photos into a design, Templified only fills photo layers — static graphics are never overwritten by a drop.

Add a photo by drag and drop

The fastest way to add a photo is to drag the file from your computer straight onto the canvas.

1. Open the design in the editor.
2. Drag a photo file from your desktop or a folder over the canvas. The editor shows a Drop images here overlay.
3. Drop a single file directly on a photo layer to fill (or replace) that layer. A confirmation appears, e.g. Replaced image on "Player Photo".
4. Drop multiple files at once and the editor fills the design's photo layers in order — files are matched to layers alphanumerically by file name and layer name, so naming your files 01.jpg, 02.jpg, … gives you predictable placement.

If the layer uses face placement, dropping a photo also detects the subject's face automatically and positions the photo for you — no extra clicks.

Instant preview: the moment you drop or choose a photo, the picked image appears on the layer right away, straight from your browser — there's no blank layer or placeholder to wait through while the server works. The fully processed version then swaps in seamlessly once it's ready. This applies whether you're filling a brand-new design, dropping several files at once, or replacing a single photo.

Upload or replace from the properties panel

You can also manage a layer's photo from the panel on the right:

1. Select the photo layer on the canvas (or in the layer list).
2. In the properties panel, find the Placeholder section. It shows a thumbnail of the current photo.
3. Click Replace to pick a new photo, or Upload Placeholder if the layer is still empty. The × button next to Replace clears the photo.

Why "Placeholder"? On a template, the photo you upload here is a stand-in that gets replaced per design. In a design, it's simply the photo that will appear in the final render.

The photo's original filename appears in small type under the thumbnail. Long names are shortened to fit — hover the caption to read the whole thing. The stored file is renamed when it's uploaded, so this caption is the only place the photo's own name stays legible, which makes it the quickest way to confirm which photo a slot is holding. For photos pulled from a GFcrew order, the name carries the event and photo numbers through from the source. Removing the photo clears the filename with it.

Where a photo came from. When a photo arrives through an automated flow rather than being uploaded by hand, a small camera caption appears under the thumbnail naming who captured it and on which device. Hover it to see the capture time. The caption is informational only — there's nothing to set or dismiss — and it clears the moment the photo is replaced or removed.

Replacing from a GFcrew event. When your organization is connected to GFcrew, the photo button gains a chevron: choose From GFcrew and the Replace from GFcrew dialog pulls the photo straight off the event by order, event, and photo number instead of you uploading a file. It's a replacement like any other, so a photo of the opposite orientation falls back to Contain fit — see Photo fit modes explained and Build designs automatically from paid GFcrew orders.

What happens to the frame when you replace a photo

All three ways of attaching a photo — dropping a file on the layer, Replace in the properties panel, and the GFcrew lookup — leave the layer in exactly the same state. If the new photo is the same shape as the frame, nothing changes. If it isn't, and the layer is set to Cover, the editor adjusts the framing instead of quietly cropping the new photo's sides off, and tells you what it did with a notice:

• A photo slot that covers the whole artboard (a backdrop) — the frame is reshaped to the new photo's proportions, so the photo stays whole and runs past the artboard edges. The notice reads Photo kept whole — it runs past the artboard, followed by Drag it to choose what prints, or resize to fit it all in. A backdrop slot is never cropped by its own frame: the artboard decides what prints, and you slide the photo to choose which part that is.
• A normal Cover slot whose new photo is the opposite orientation — the layer switches to Contain fit so the whole photo is visible inside the frame the template drew. The notice reads Switched to Contain — the photo is the other orientation, followed by Use Crop photo to choose a crop and print size instead.

Slots placed inside a layout — an inset, a matted photo, a cell of a multi-up sheet — keep the exact position and size the designer gave them; only the fit changes. Layers already set to Contain, Fill, or face placement are left alone, because those modes handle their own scaling.

When the framing changes this way, a manual crop you'd set on the layer is cleared with it. A crop is measured against the photo it was drawn on, so keeping it would frame the new photo by a rectangle chosen for a different image. Draw a new one with Crop photo after the replacement.

Supported file types

Photo uploads accept JPEG and PNG files. Other formats are rejected with a message like "…is not a supported image type (JPEG/PNG only)". For size and quality recommendations, see Supported file types & image guidelines.

Fit modes: how the photo sits in its frame

Every photo layer has a Fit Mode that controls how the photo is scaled inside the layer's frame:

For a deeper look at Cover, Contain, and Fill, see Photo fit modes explained. For what face placement does and when to choose it, see Consistent team faces: what face placement does & when to use it.

Related articles

• Photo fit modes explained
• Manually cropping a photo
• Consistent team faces: what face placement does & when to use it
• Removing a background in Studio
• Supported file types & image guidelines