> For the complete documentation index, see [llms.txt](https://visionstore.gitbook.io/visionstore-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://visionstore.gitbook.io/visionstore-docs/scripts/advanced-clothing/guides/addon-thumbnails.md).

# Add-on thumbnails

Add thumbnails for the add-on clothing packs your server streams.

The script ships **4,778 thumbnails** for base-game and Rockstar DLC clothing. They are stored by clothing collection (`components/male/11/_base/15.webp`), so they stay on the right items whatever add-on clothing you stream. **Add-on items show a category placeholder** until you add images for them. This page is only for that.

You need [Node.js](https://nodejs.org) on your PC for the helper scripts in `tools/`:

| Script                  | What it does                                                                                                |
| ----------------------- | ----------------------------------------------------------------------------------------------------------- |
| `convert-thumbnails.js` | Converts your PNG renders to WebP, keeping the folder layout (`npm install sharp` first)                    |
| `migrate-thumbnails.js` | Moves renders named by global drawable number into the collection layout, using the map from `/clothingmap` |
| `build-manifest.js`     | Rebuilds `html/assets/images/index.json`. Run it after adding or removing images                            |

{% hint style="info" %}
Run the commands from inside the `Chapo_advanced_clothing` folder. Images go in `html/assets/images/` as WebP; nothing changes in `fxmanifest.lua`.
{% endhint %}

## Option A: render straight into the collection layout

{% stepper %}
{% step %}

### Make the map

In game, as an admin, run **`/clothingmap`**. It writes `data/thumbnail-map.json`. Its `collections` lists the folder name of every clothing pack on your server (for example `mp_m_mypack`), and its ranges translate a global drawable number into the index inside that pack.
{% endstep %}

{% step %}

### Name your renders

Name each render by its pack folder and its index inside the pack:

```
in/components/male/11/mp_m_mypack/0.png
in/props/male/0/mp_m_mypack/3.png
in/hair/female/mp_f_mypack/1.png
```

{% endstep %}

{% step %}

### Convert and rebuild

```
node tools/convert-thumbnails.js ./in html/assets/images --width 228 --quality 82
node tools/build-manifest.js
```

Restart the resource.
{% endstep %}
{% endstepper %}

## Option B: translate numbered screenshots

Most screenshot tools name images by the global drawable number of the server they ran on. Translate them with that server's map (your screenshot folder is not touched):

```
node tools/migrate-thumbnails.js --map <that server's thumbnail-map.json> --in <screenshots> --out ./staging
node tools/convert-thumbnails.js ./staging html/assets/images --width 228 --quality 82
node tools/build-manifest.js
```

The migrate tool reads nested numbered folders (`components/male/11/1600.png`, `props/female/0/3.png`, `hair/male/40.png`) and flat names (`male_11_1600.png`, `female_prop_0_3.png`, `male_2_40.png`). Skip the convert step when your screenshots are already sized `.webp` files.

{% hint style="warning" %}
**Make the map on the server the screenshots were taken on, with exactly the same clothing packs.** A map from a different pack setup puts the images on the wrong items. Try `--dry-run` first: a large `number not in the map` count means the map doesn't match.
{% endhint %}

## After adding images

* Name the new items in `config/names.lua` or `html/assets/images/names.json` ([Item names](/visionstore-docs/scripts/advanced-clothing/configuration/clothing-catalog.md#item-names)).
* For big packs, fill the neckwear `subgroups` and add clipping rules ([Clothing catalog](/visionstore-docs/scripts/advanced-clothing/configuration/clothing-catalog.md)).
* Images on Linux hosts are case-sensitive: use lower-case file and folder names.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://visionstore.gitbook.io/visionstore-docs/scripts/advanced-clothing/guides/addon-thumbnails.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.