# How to Add New Categories and Cases to the Awesome-GPT-Image-2 Gallery

> Learn to add new categories and cases to the awesome-gpt-image-2 gallery by editing JSON data and running a script. Upload your image assets and update the site.

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

---

**To add new categories and cases to the gallery, edit the `categories` and `cases` arrays in [`data/cases.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/cases.json), place your image assets in `data/images/`, and run `node scripts/generate-site-data.mjs` to regenerate the static markdown pages.**

The Awesome-GPT-Image-2 gallery is a static site generated entirely from a single JSON data source. All category filters, style tags, and gallery entries are defined in [`data/cases.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/cases.json), which is processed by a Node.js script to produce the browsable documentation at build time. Understanding this pipeline is essential for contributors who want to add new categories and cases to the gallery correctly.

## Understanding the Data Architecture

The gallery frontend is built from three main data structures inside [`data/cases.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/cases.json):

- **`categories`** – A flat array of category names that powers the filter dropdown UI.
- **`styles`** – A flat array of style tags used by the style-library skill.
- **`cases`** – An array of case objects, each representing a single gallery tile with prompts, metadata, and image references.

During the build process, `scripts/generate-site-data.mjs` reads this JSON and writes static markdown files to [`docs/gallery-part-1.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/gallery-part-1.md) and [`docs/gallery-part-2.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/gallery-part-2.md). These files contain anchored headings (e.g., `#case-544`) that enable direct linking to specific examples.

## Step-by-Step Guide to Adding Categories and Cases

### Step 1: Define a New Category

To add a new category, append a unique string to the `categories` array in [`data/cases.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/cases.json). The gallery UI pulls filter options directly from this list, and the order here determines the dropdown order.

```json
{
  "categories": [
    "Architecture & Spaces",
    "Brand & Logos",
    "Characters & People",
    "New Category Name"
  ]
}

```

Ensure you also update [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json) with the same category additions to maintain consistency across the repository’s skills.

### Step 2: Create a New Case Object

Append a new object to the `cases` array. Each case requires a unique `id`, a valid `category` (matching an entry from the `categories` array), and specific metadata fields.

```json
{
  "id": 545,
  "title": "Minimalist Geometric Poster",
  "image": "/images/case545.jpg",
  "imageAlt": "Minimalist geometric poster design",
  "sourceLabel": "@YourHandle",
  "sourceUrl": "https://x.com/YourHandle/status/1234567890",
  "prompt": "Design a minimalist poster featuring a single geometric shape...",
  "promptPreview": "Design a minimalist poster featuring...",
  "category": "Posters & Typography",
  "styles": ["Poster", "UI"],
  "scenes": ["Tech", "Design"],
  "featured": false,
  "githubUrl": "https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/gallery-part-2.md#case-545"
}

```

Key fields include:
- **`id`** – A unique integer not used by other cases.
- **`category`** – Must exactly match a string from the `categories` array.
- **`styles`** and **`scenes`** – Arrays of tags for filtering.
- **`githubUrl`** – Points to the generated markdown anchor; according to the source code, this is automatically refreshed by the generation script.

### Step 3: Add the Image Asset

Place your image file (JPG or PNG) inside the `data/images/` directory. The `image` field in your case object should reference this file using the path format `/images/case545.jpg`, where the leading slash represents the `data` folder root.

### Step 4: Regenerate the Static Site

Run the generation script from the repository root to update the markdown anchors and Table-of-Contents links:

```bash
node scripts/generate-site-data.mjs

```

This script parses [`data/cases.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/cases.json), sorts cases by ID, and updates [`docs/gallery-part-1.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/gallery-part-1.md) and [`docs/gallery-part-2.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/gallery-part-2.md) with the new anchored headings.

## Source Files Involved in Gallery Generation

- **[`data/cases.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/cases.json)** – Master data source containing categories, styles, scenes, and case definitions.
- **[`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json)** – Mirrors the `categories` array for the style-library skill; keep synchronized with [`cases.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/cases.json).
- **`scripts/generate-site-data.mjs`** – Node.js script that transforms the JSON into static markdown gallery pages.
- **[`docs/gallery-part-1.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/gallery-part-1.md) & [`docs/gallery-part-2.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/gallery-part-2.md)** – Generated markdown files containing the clickable gallery anchors.
- **`data/images/`** – Directory holding all image assets referenced by case objects.

## Summary

- The gallery is generated from a single JSON source at [`data/cases.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/cases.json).
- To add content, modify the `categories` and `cases` arrays, then place images in `data/images/`.
- Always run `node scripts/generate-site-data.mjs` to regenerate the static markdown files; manual edits to `docs/gallery-part-*.md` will be overwritten.
- Keep [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json) synchronized with [`cases.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/cases.json) when modifying categories to maintain consistency across the repository.

## Frequently Asked Questions

### Can I add a case without creating a new category?

Yes. You can assign any existing category from the `categories` array to your case object's `category` field. New categories are only required when introducing a classification that does not already exist in the dropdown filter.

### What happens if I forget to run the generation script?

The new case will exist in the JSON data but will not appear in the public gallery pages. The markdown files in `docs/` remain unchanged until you execute `node scripts/generate-site-data.mjs`, which writes the necessary anchors and updates the Table-of-Contents links.

### Can I edit the generated markdown files directly?

No. Manual edits to [`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) will be overwritten the next time the generation script runs. All persistent changes must be made in [`data/cases.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/cases.json), which serves as the single source of truth.

### What image formats are supported?

While the examples predominantly use `.jpg`, the gallery accepts standard web formats including `.png` and `.jpg`. Ensure the file extension in the `image` field matches the actual file placed in `data/images/` and that the path format follows `/images/filename.ext`.