A Claude agent diagnosed and fixed a gallery page on Hippo Roofing’s rebuilt WordPress site — identifying that blue-overlaid tiles were caused by baked-in image pixels (not CSS), correcting an inverted tile HTML structure, and replacing six branded banner graphics with actual roofing photographs.
6
Gallery tiles rebuilt with correct image-on-top, label-at-bottom structure
2
Specific photos uploaded by user and wired in via WP REST API media search
$0.04
Agent cost vs. $53+ for a human designer at $35/hr
Understand the Assignment
Hippo Roofing’s gallery page (WordPress Post ID 572) displayed six category tiles — Metal Roofing, Shingle Roofing, Tile Roofing, Storm Damage, Gutters, and Commercial Roofing. Each tile should show a photograph on top with a labeled navy bar at the bottom, exactly as seen on the Netlify reference site.
The user reported: the tiles were “highlighted or covered in blue.” A screenshot comparison showed the reference had clean photos above clean label bars — but the live WordPress page rendered with a blue overlay across all tile images and the label bar appearing at the top rather than the bottom. Two distinct problems, not one.
Walk Through Every Step
Step 1 — Fetch and read the current page content. The agent retrieved Post ID 572’s content via /wp-json/wp/v2/pages/572 and read the rendered HTML. The tile structure in the page content had the label bar div appearing before the image div — inverted from the reference. The label was at the top, the background image div was at the bottom of each tile card.
Step 2 — Identify the image source problem. The images being used were named metal.jpg, shingle.jpg, etc. — these were the original site’s mainstage hero/banner graphics, which had a dark blue overlay composited directly into the JPEG pixels as part of the original branded design. They were never plain photographs. No CSS override could remove a color baked into an image file.
Step 3 — Search the WP media library for clean photos. The agent queried the WordPress media library REST endpoint (/wp-json/wp/v2/media?search=install&per_page=10 etc.) to find actual job-site photographs uploaded during earlier sessions. Found: install.2507101044078.jpg (shingle install), tile-roofing.2507181727086.jpg, gutter.2507101044070.jpg, commercial.2507101044076.jpg.
Step 4 — User uploads two specific images. For Metal Roofing, the user uploaded Screenshot-2025-07-16-at-11.45.46-PM.2507162345562.png (aerial view of a metal roof home). For Storm Damage, the user uploaded storm.2507091741210.jpg (house with blue storm tarp). The agent confirmed both via REST media search before wiring them in.
Step 5 — Rebuild tile HTML with correct structure. Each tile was rebuilt as: outer wrapper div → image div (background-image, 240px height, center/cover) → label bar div (navy background, white bold text, centered). Pushed the corrected page content via REST API PATCH to Post ID 572 with status: publish.
Step 6 — Clear cache and verify. Cleared WP Engine cache, loaded the live gallery page, and confirmed all six tiles rendered with clean photographs and label bars at the bottom.
Spot the Critical Decisions
Decision 1 — Pixel diagnosis over CSS fix. A quick CSS fix (adding mix-blend-mode: normal or removing a filter) would have been the instinctive first attempt. The agent identified that the blue was in the source image pixels — confirmed by the fact that the same blue appeared even with inline background styles and no CSS classes applying any filter. The only real fix was replacing the images.
Decision 2 — Separate the two problems. The structure inversion (label on top, image on bottom) and the blue overlay were independent bugs with independent causes. Fixing only the CSS structure without replacing the images, or replacing only the images without fixing the structure, would have left the page half-broken. Both problems had to be addressed in a single rebuild pass.
Decision 3 — Confirm uploads via REST before publishing. When the user said “done” after uploading the two specific photos, the agent did not assume the filenames — it queried /wp-json/wp/v2/media?search=Screenshot-2025-07&per_page=5 to get the actual hosted URL before embedding it in the tile HTML. This prevents broken images from cached or renamed uploads.
Compare the Effort and Cost
| Task | Agent Time | Human Time | Agent Cost | Human Cost ($35/hr) |
|---|---|---|---|---|
| Fetch and read page HTML | ~30 sec | 5–10 min | $0.01 | $3–$6 |
| Diagnose blue overlay root cause | ~1 min | 20–30 min | $0.01 | $12–$18 |
| Media library search for clean photos | ~1 min | 15–20 min | $0.01 | $9–$12 |
| Rebuild and publish corrected tile HTML | ~3 min | 20–30 min | $0.01 | $12–$18 |
| TOTAL | ~6 min | 60–90 min | $0.04 | $36–$54 |
What the Agent Handled — and What It Couldn’t
Handled autonomously: Reading page HTML, diagnosing both the structure inversion and the pixel-level blue overlay, searching the media library for existing clean photos, confirming uploaded file URLs before use, rebuilding tile HTML structure, pushing the update via REST API, and verifying the fix after cache clear.
Required human input: Uploading the two specific replacement photos (the metal roof aerial shot and the storm tarp house). The agent could search for existing media but cannot upload new image files — that physical file upload step requires the human.
Proof ledger: Tile structure fix self-reported from REST API response (newLen=43355 for Post 572). Visual QA confirmed via live gallery page screenshot showing clean photos and correct label placement. Media file URLs verified by querying /wp-json/wp/v2/media before embedding in HTML — not assumed from upload confirmation.
THE DELIVERABLE
See the fixed gallery live
The Hippo Roofing gallery page with all six corrected tiles — clean photographs, correct structure, no blue overlay.