Project galleries
ServiceTitan Before & After Photo Galleries
A before and after pair is the most persuasive photo a contractor can publish. We build the field habits, pairing tools and website sliders that make good pairs routine instead of lucky.
The before photo is the one nobody remembers to take
The after shot is easy; everyone photographs finished work. The before shot needs a technician to think about marketing while standing on a cracked tile roof at 7 a.m., and then to stand in the same spot again when the job is done. Most galleries end up with a wide before shot from the street and a close-up after shot from the ridge, and the comparison falls flat.
Good before and after galleries are mostly a field habit, supported by software that makes the habit easy: an upload app that asks for the before set first, a reference image to match the angle, and a review step that pairs the two before anything goes live. The slider on the website is the easy part. This page covers pairing and presentation; the wider options are on the ServiceTitan project gallery overview.
Field conventions that make pairs work
Short enough to fit on a card in the truck.
Shoot the before first
The upload app opens on Before for a new job number and won't mark the job ready for review until an After set exists too.
Same spot, same angle
While the tech frames the after shot, the app shows the matching before photo as a reference, so the corner of the house or the edge of the cabinet lines up.
Horizontal, and wide enough
Landscape orientation, stepped back far enough to show context, then a close-up of the detail that matters. Two angles beat ten random ones.
Tag, don't rename
The tech taps Before, During or After and enters the job number. The system names files consistently, such as job number, stage and sequence, so nobody renames anything by hand.
Frame out what isn't yours to show
Point away from house numbers, cars in the driveway and people. It's faster than cropping later and saves photos that would otherwise be rejected.
From two photos to a published comparison
- 1
Upload with stage tags
Before and after sets arrive under the same job number in your company's media repository, not through ServiceTitan's API.
- 2
Pair in the review tool
The reviewer accepts suggested pairs, matched by stage and order, or drags a before onto its after, then crops both to the same frame. The photo review and approval tool handles this alongside consent and privacy checks.
- 3
Check, crop and caption
Consent confirmed, identifying details cropped, and a caption that says what changed: for example, cracked concrete tile and failed underlayment replaced, new flashing at the chimney.
- 4
Generate matched web images
Both images are exported at identical dimensions, converted to modern formats, and stripped of EXIF and GPS data.
- 5
Publish
The pair appears in the gallery, on the matching service page, and in a case study if the job gets one. In the automated project gallery this happens on the next publish after approval.
Slider or side by side
A slider lays the after image over the before and lets the visitor drag a handle across. It's the most striking format when the framing matches, and it looks broken when it doesn't. We build it on a standard range control, so it works with a mouse, a thumb, arrow keys and a screen reader, and each image keeps its own description.
Side by side is the better choice when the angles differ or the after shot is a tighter crop. On a phone it becomes stacked, before above after, which often reads better on a small screen than a slider does. We usually build both and let the reviewer choose per pair, so a slightly mismatched pair still gets published instead of thrown away.
Either way the comparison should load fast and sit inside the page your customers already use. On a site we design, it's part of the web design; on an existing site, it's added as a component that matches the current look.
Image quality and captions
Matched dimensions
Both images share one aspect ratio and size, so the slider never shifts as it moves.
Responsive sizes
Several widths of every image, so a phone downloads a phone-sized file and a desktop gets the sharp one.
Modern formats
WebP or AVIF with a fallback, compressed for the web from the private original, which stays untouched.
Captions written for people
Alt text describes each image on its own; the caption explains what changed and why. A neighborhood, never an address.
Before and after by trade
Roofing
Add a During photo. Damaged decking revealed at tear-off explains the price better than any sentence, and roofing before and after photos are what homeowners look for first.
HVAC
An old condenser on a sinking pad beside the new system on a level one; crushed attic ductwork beside new sealed runs. HVAC install photos work best shot from the same corner.
Garage doors
A dented panel door replaced with an insulated one. The street-facing shot almost always needs the house number and cars cropped.
Remodeling
The same corner of the kitchen before demolition and after the final clean. Mark the spot with tape on day one so the after shot matches.
Plumbing
A corroded tank water heater beside the new tankless install with clean venting and labeled shutoffs.
What ServiceTitan covers vs what we build
| Need | In ServiceTitan | Custom-built |
|---|---|---|
| Job photos | Photos can be attached to jobs inside ServiceTitan as part of the service record. | Your own repository with before, during and after tags, organized for publishing. |
| Showing the customer | Photos marked customer-facing appear for that customer in the New Customer Portal. | A public gallery of approved, consented pairs for prospects. |
| Pairing and presentation | Outside ServiceTitan's role; it's the system of record, not your website. | Pairing, matched cropping, sliders and side-by-side layouts on your site. |
What to have ready before we talk
None of this is required for a first call, but each answer makes the scope and the quote sharper.
- Which jobs make good pairs: replacements, remodels, storm repair
- Whether techs shoot before photos on every job or only on flagged job types
- Slider, side by side, or both
- Who pairs and approves photos in the office
- Your website platform and where the comparisons should appear
- How customer consent for photos is collected today
Related ServiceTitan development
Mesa Web Designers is an independent developer. We are not affiliated with, endorsed by, or a partner of ServiceTitan. ServiceTitan is a trademark of its owner. What an integration can do depends on your ServiceTitan products, the permissions your admin grants, and the APIs available to your account.
Start the conversation
Show the difference your work makes.
Tell us which jobs make your best comparisons and how your techs take photos now. We'll design the capture, pairing and slider around that.
- Web apps, portals and integrations start from $575, priced by complexity
- The developer who scopes it builds it and answers the phone
- Built for ServiceTitan contractors nationwide
What do you need built?
Pick what fits (pick any)
Rather talk? (480) 525-7582. 0% financing on any project, 25% down. See all pricing
Before & after galleries: questions we hear a lot.
Can you add a before and after slider to our current website?
Usually, yes. It's built as a component that fits your existing pages, fed by the approved pairs from the review tool. We confirm once we've seen your site's platform.
What if the before and after angles don't match?
The reviewer can publish the pair side by side instead of as a slider, which forgives different framing. Over time the reference photo in the upload app makes matched pairs the norm.
Do before photos need customer consent too?
Yes, the same consent covers every photo of the job. Before photos often show more of the property, such as cars, house numbers and neighbors' homes, so they get a closer privacy check.
Can we use photos already attached to jobs in ServiceTitan?
Going forward, the simplest route is for technicians to upload to your own photo app as well. For older jobs, staff can pick photos and upload them to the review tool by hand. We don't build an automatic feed from ServiceTitan's API to a public page unless ServiceTitan approves that use for your account.
Show the difference your work makes.
Tell us which jobs make your best comparisons and how your techs take photos now. We'll design the capture, pairing and slider around that.