mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-08-09 00:42:46 +08:00
72 lines
2.2 KiB
Markdown
72 lines
2.2 KiB
Markdown
---
|
|
name: integrating-unsplash-images
|
|
description: Adds high-quality Unsplash images to React pages. Use when the user asks to add a hero image, background image, placeholder image, stock photo, decorative image, or any Unsplash-sourced imagery to the web application.
|
|
---
|
|
|
|
# Unsplash Images
|
|
|
|
## When to Use
|
|
|
|
Use this skill when:
|
|
- Adding hero banners, section backgrounds, or decorative images
|
|
- The user asks for stock photography or placeholder images
|
|
- A page needs visual appeal without custom assets
|
|
|
|
---
|
|
|
|
## Step 1 — Determine image purpose
|
|
|
|
Identify what the image is for:
|
|
|
|
- **Hero / banner** — full-width background behind text or a CTA
|
|
- **Section accent** — smaller image alongside content (stats, testimonials, features)
|
|
- **Card thumbnail** — image inside a card component
|
|
- **Background texture** — subtle decorative background
|
|
|
|
If unclear, ask:
|
|
|
|
> "Where should the image appear — as a hero banner, a section accent, or a card thumbnail?"
|
|
|
|
---
|
|
|
|
## Step 2 — Select the right Unsplash URL format
|
|
|
|
Read `implementation/usage.md` for the full reference. Key rules:
|
|
|
|
1. **Always use `images.unsplash.com/photo-{id}` format** with explicit `w` and `q` parameters.
|
|
2. **Never use `source.unsplash.com`** — it is deprecated and returns 404s.
|
|
3. **Pin every image by its photo ID** — never rely on random or search endpoints.
|
|
|
|
---
|
|
|
|
## Step 3 — Validate image URLs
|
|
|
|
Before using any Unsplash URL in code:
|
|
|
|
1. Open the URL in a browser or fetch it to confirm it returns a 200 status and a valid image.
|
|
2. If the URL returns a 404, redirect loop, or broken image, **discard it** and pick a different photo ID.
|
|
3. Never ship a URL you have not personally verified.
|
|
|
|
---
|
|
|
|
## Step 4 — Implementation
|
|
|
|
Read `implementation/usage.md` and follow the instructions there.
|
|
|
|
---
|
|
|
|
## Verification
|
|
|
|
Before completing:
|
|
|
|
1. Confirm every Unsplash URL loads a valid image (no 404, no redirect loops).
|
|
2. Confirm `alt` text is set appropriately (empty `alt=""` for decorative, descriptive for meaningful).
|
|
3. Run from the web app directory:
|
|
|
|
```bash
|
|
cd force-app/main/default/webapplications/<appName> && npm run lint && npm run build
|
|
```
|
|
|
|
- **Lint:** MUST result in 0 errors.
|
|
- **Build:** MUST succeed.
|