Hosting Your Own Preview Images

This page walks through that from zero. You do not need to know Git, and you do not need to use the command line. If you've never made a GitHub account, start at step 1 and follow along.

[!NOTE] This is entirely optional. Without preview images the shop still works perfectly, garments show a clean category icon instead of a photo.

🤔 Do I Even Need This?Copy Anchor Link

[!TIP] The simplest option of all: put your images in the resource's preview/ folder and skip GitHub entirely. The downside is every player downloads them on join, which grows your resource. GitHub hosting keeps your server lightweight.

1️⃣ Make a GitHub AccountCopy Anchor Link

GitHub is a free website for storing files. That's all we're using it for here, a free, fast place to keep images.

1. Go to github.com/signup.
2. Enter an email, a password, and a username. The username becomes part of your image URL, so pick something you don't mind being public.
3. Verify your email.
4. Choose the Free plan when offered. Everything here works on Free.

That's it, no payment details, no configuration.

2️⃣ Install GitHub DesktopCopy Anchor Link

GitHub Desktop is a normal Windows app that syncs a folder on your PC with GitHub. You drag files into a folder, click two buttons, and they're online. No commands to memorise.

1. Download it from desktop.github.com.
2. Install and open it.
3. Click Sign in to GitHub.com and log in with the account from step 1.
4. When it asks for a name and email for your commits, accept the defaults.

3️⃣ Copy the Reference RepositoryCopy Anchor Link

Rather than starting empty, copy the official one so you inherit the correct folder layout and all the base-game images.

1. Open the link above while logged in.
2. Click Fork (top right) → Create fork. You now have your own copy at github.com/YOUR-USERNAME/kartik-clothing-images.
3. In GitHub Desktop, go to File → Clone repository, pick your fork from the list, choose where to put it on your PC, and click Clone.

You now have a kartik-clothing-images folder on your computer containing a preview folder. That folder is your image library.

4️⃣ Generate Your ImagesCopy Anchor Link

Use the built-in shot-taker in game, it names every file correctly for you:

/takeshots

See Asset & Development Tools for the full options. It writes files into the resource's screenshot output folder using the exact naming the UI expects.

[!TIP] Making them by hand instead? Read the format table below carefully. The names are not flexible, the UI builds the path and requests it, it never searches for a close match.

5️⃣ Put Them In The Right FoldersCopy Anchor Link

Copy your generated images into the preview folder in your cloned repository, matching this layout:

preview/
├─ male/
│  ├─ 11/              <- Tops (component 11)
│  │  ├─ 19.webp       <- drawable 19, first colour
│  │  └─ 19_2.webp     <- drawable 19, third colour
│  ├─ prop_0/          <- Hats
│  │  └─ 4.webp
│  └─ overlay_1/       <- Facial hair
│     └─ 3.webp
└─ female/
   └─ ...same structure

[!WARNING] Texture 0 has no number after it. The first colour of drawable 19 is 19.webp, not 19_0.webp. Getting this wrong is the single most common mistake: that one colour shows a blank card while every other colour of the same garment loads fine.

Use .webp files. They're a fraction of the size of PNG at the same quality, and the shot-taker already outputs them.

6️⃣ Upload With GitHub DesktopCopy Anchor Link

1. Open GitHub Desktop. Your new files appear automatically in the left panel.
2. Type a short message in the Summary box at the bottom left, e.g. Add EUP police uniforms.
3. Click Commit to main.
4. Click Push origin at the top.

Your images are now online. Repeat these four steps any time you add more.

7️⃣ Point The Script At Your ImagesCopy Anchor Link

Open shared/config.lua and set Config.MediaUrl to your fork, replacing YOUR-USERNAME:

Config.MediaUrl = 'https://raw.githubusercontent.com/YOUR-USERNAME/kartik-clothing-images/main/preview'

Note the parts that matter:

• raw.githubusercontent.com: not github.com. The normal URL serves a web page, not the image file.
• /main/: your branch name. GitHub Desktop uses main by default.
• /preview at the end, with no trailing slash.

Restart the resource and open a shop.

✅ Checking It WorkedCopy Anchor Link

Open any image in your repository on github.com and click the Raw button. The URL in your address bar should look exactly like your Config.MediaUrl plus the folder path. If you can see the image there in your browser, the script can too.

[!TIP] The script always tries the resource's local preview/ folder first and only falls back to Config.MediaUrl. A local file with the same name will quietly win over your hosted one.