# Gasser Reference Cards — Placeholder Photos Without Looking Fake

Session-derived pattern from the Gasser construction-site rebuild.

## Problem

The site had several real legacy references, but no distinct approved project photos for each card. Reusing the same photo on every card made the page feel fake/unfinished; switching to plain beige image boxes still looked like empty placeholders.

## Better Pattern

When photos are missing or not yet approved, make the absence intentional:

- Replace repeated photos with a designed project header/tile.
- Use brand language, not generic placeholders:
  - dark anthracite background
  - subtle orthogonal blueprint grid
  - large low-opacity brand initial/mark
  - category, location, year/service labels in the tile
- Keep real project facts visible below:
  - category
  - location
  - year
  - title
  - summary
  - service tags
- Add a short intro note on the reference index: project photos will be added where approved; until then, location, service, and context are foregrounded.
- Use the same treatment on reference detail hero areas so list/detail pages feel coherent.

## Astro Implementation Notes

- Pass `services={reference.data.services}` into cards so the visual header and tags use structured content rather than hardcoded copy.
- Detect placeholder assets with a simple convention, e.g. `heroImage.includes('reference-hero')`, then render the designed tile instead of `<img>`.
- If scoped Astro CSS does not appear to apply to a conditional class, verify with browser computed styles. In this session, the element showed the expected class name but the `.visual--placeholder` background did not apply until the `class:list` expression was replaced with a plain template-literal class string:

```astro
<figure class={`visual ${isPlaceholderImage ? 'visual--placeholder' : ''}`}>
```

Do not assume class presence means the visual styling applied; check computed styles or screenshot.

## Verification

- Run the build.
- Browser-check the reference index and one detail page.
- Use visual QA to confirm the cards read as intentionally designed project tiles, not empty image placeholders.
- Confirm no text/card overlap and no console errors.