# How to Add New Case Studies to the Gallery Documentation in awesome-gpt-image-2

> Learn to add new case studies to the awesome-gpt-image-2 gallery documentation by placing images, updating cases.js, and linking in Markdown. Contribute your projects today!

- Repository: [苍何/awesome-gpt-image-2](https://github.com/freestylefly/awesome-gpt-image-2)
- Tags: how-to-guide
- Published: 2026-09-11

---

**To add a new case study to the gallery documentation, place your image in `public/images/`, append a case object to [`src/image25/cases.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/image25/cases.js), and insert a Markdown link in [`docs/gallery-part-1.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/gallery-part-1.md) or [`docs/gallery-part-2.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/gallery-part-2.md) depending on the case ID.**

The `freestylefly/awesome-gpt-image-2` repository maintains a curated gallery of GPT-4o image generation examples powered by a React and Vite frontend. When you need to add new case studies to the gallery documentation, you must synchronize three distinct layers: the JavaScript data models, the Markdown navigation files, and the static image assets.

## Understanding the Gallery Architecture

The gallery system relies on a tightly-coupled three-tier architecture that separates data from presentation.

### Data Source Layer ([`src/image25/cases.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/image25/cases.js))

The primary data store is [`src/image25/cases.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/image25/cases.js), which exports the `comparisonCases` array. Each case object must include an `id`, bilingual `title` (Chinese and English), the full `prompt` string, an `image` path, bilingual `alt` text, `source` metadata, `sourceUrl`, and a `focus` description highlighting the technical emphasis.

### Markdown Navigation Layer (`docs/gallery-part-*.md`)

Human-readable indexes live in [`docs/gallery-part-1.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/gallery-part-1.md) (covering cases 1–165) and [`docs/gallery-part-2.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/gallery-part-2.md) (covering cases 166–544). These files contain Markdown links that point to anchor fragments (`#case-<id>`) automatically generated by the React router based on the `id` field in the data source.

### Static Asset Layer (`public/images/`)

Images referenced by the `image` field (e.g., `/images/case550.jpg`) resolve to files inside `public/images/`. Vite serves this directory directly at the site root, requiring no additional build configuration for new assets.

## Step-by-Step Guide to Adding a Case Study

Follow this workflow to ensure your new case appears correctly in the rendered gallery.

### Step 1: Prepare the Image Asset

Place your PNG or JPG file in `public/images/` using a consistent naming convention like `case{id}.jpg`. The path you specify in the data object should be relative to the site root (e.g., `/images/case550.jpg`).

### Step 2: Define the Case Object in [`cases.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/cases.js)

Open [`src/image25/cases.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/image25/cases.js) and append a new object to the `comparisonCases` array. Ensure the `id` uses the format `gallery-{number}` and that `sourceCaseId` matches the numeric identifier used in the documentation.

### Step 3: Update the Markdown Gallery Index

Choose the correct Markdown file based on the case number. For cases 1–165, edit [`docs/gallery-part-1.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/gallery-part-1.md); for cases 166 and above, use [`docs/gallery-part-2.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/gallery-part-2.md). Insert a list entry following this pattern:

```markdown
- [例 {number}: {Title}](./gallery-part-{X}.md#case-{number})

```

### Step 4: Verify with the Dev Server

Run `npm run dev` to start the Vite development server. Navigate to the gallery and confirm that the new entry renders the image, displays bilingual metadata, and scrolls correctly to the anchor generated from the `id` field.

## Implementation Example: Adding Case #550

Here is a complete walkthrough for adding a hypothetical "Winter Ski Resort Poster" as case 550.

First, define the data structure in [`src/image25/cases.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/image25/cases.js):

```javascript
// src/image25/cases.js
export const comparisonCases = [
  // …existing cases
  {
    id: 'gallery-550',
    sourceCaseId: 550,
    title: {
      zh: '滑雪度假海报 · 场景与氛围',
      en: 'Ski resort poster · Scene & atmosphere'
    },
    prompt: `Create a premium winter ski‑resort travel poster in the style of a high‑end tourism magazine. The composition features a snow‑covered mountain valley, a sleek ski lift, and a cozy chalet with warm light spilling from the windows. Use cool blue‑white tones, soft sunrise glow, subtle cloud reflections, and elegant sans‑serif typography that reads “WINTER ESCAPE” and “EXPLORE THE SNOW‑CAPPED PEAKS • 2026”.`,
    image: '/images/case550.jpg',
    alt: {
      zh: '雪山度假海报，滑雪缆车与小木屋的温暖灯光',
      en: 'Winter ski‑resort poster with lift and chalet lights'
    },
    source: {
      zh: '原案例 #550 · @SnowArtist（仅作示意）',
      en: 'Original case #550 · @SnowArtist (illustration only)'
    },
    sourceUrl: 'https://x.com/SnowArtist/status/1234567890123456789',
    focus: {
      zh: '场景氛围、光影与排版',
      en: 'Atmosphere, lighting and typography'
    }
  }
];

```

Next, add the navigation link to [`docs/gallery-part-2.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/gallery-part-2.md) since case 550 exceeds 165:

```markdown
<!-- docs/gallery-part-2.md -->
- [例 550：滑雪度假海报 · 场景与氛围](./gallery-part-2.md#case-550)

```

Finally, ensure the image file exists at `public/images/case550.jpg`.

## Critical Files and Their Roles

Understanding these file paths is essential for maintaining the gallery:

- **[`src/image25/cases.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/image25/cases.js)** – The canonical data source containing the `comparisonCases` array; defines all metadata and anchor IDs.
- **[`src/image25/realCases.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/image25/realCases.js)** – Optional secondary store for "real" user recreation cases that include actual generated result images.
- **[`docs/gallery-part-1.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/gallery-part-1.md)** – Markdown index for cases 1 through 165.
- **[`docs/gallery-part-2.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/gallery-part-2.md)** – Markdown index for cases 166 through 544 and beyond.
- **`public/images/`** – Static directory where all case images must reside for Vite to serve them correctly.
- **[`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx)** – React entry point that reads the case arrays and renders each section with the appropriate `#case-<id>` anchor.

## Summary

- **Store images** in `public/images/` and reference them with root-relative paths (`/images/filename.jpg`).
- **Append case objects** to [`src/image25/cases.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/image25/cases.js), ensuring all bilingual fields (`title`, `alt`, `source`, `focus`) and the `id` are populated.
- **Update Markdown indexes** in [`docs/gallery-part-1.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/gallery-part-1.md) or [`docs/gallery-part-2.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/gallery-part-2.md) based on the case number, linking to `#case-<id>` fragments.
- **Verify changes** using `npm run dev`; the Vite hot-module replacement reflects updates to [`cases.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/cases.js) instantly without rebuilding.

## Frequently Asked Questions

### Do I need to manually create HTML anchors in the Markdown files?

No. The React component in [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx) automatically generates the anchor tags from the `id` field in your case object. You only need to reference the anchor in the Markdown link using the format `#case-<id>`.

### Can I add cases to [`realCases.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/realCases.js) instead of [`cases.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/cases.js)?

Yes. If your case represents a "real" user recreation with an actual generated result image, you can add it to [`src/image25/realCases.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/image25/realCases.js). Ensure you import and merge this array into the main application logic if it is not already included in [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx).

### What image formats are supported?

The gallery accepts standard web formats including JPG, PNG, and WebP. Store files in `public/images/` and reference them with absolute paths starting with `/images/` to ensure Vite resolves them correctly during both development and production builds.

### Why is my new case not appearing in the gallery?

Verify that the `id` field in your case object matches the fragment used in the Markdown link (e.g., `gallery-550` generates `#case-550`). Also confirm the image file exists in `public/images/` and that the `npm run dev` server has been restarted if you added new files to the public directory.