# Image Upload Guide — Banners & Gallery

A quick guide for admins to manage website images via cPanel File Manager.

---

## How It Works

1. You upload images to specific folders on the server
2. A single PHP script (`manifest.php`) scans the folder and returns a list of images
3. The Framer website automatically fetches and displays them

**No code changes needed** — just upload, rename, or delete files via cPanel.

---

## Folder Structure on Server

```
public_html/
└── _RESTAURANT_MANAGER_ZONE/
    ├── WebsiteBanners/           ← Banner images go here
    │   ├── 01_Alt text_Title.jpg
    │   ├── 02_Alt text_Title.png
    │   └── ...
    └── Gallery/                  ← Gallery images go here
        ├── 01_Category_Title.jpg
        ├── 02_Category_Title.webp
        └── ...
```

---

## File Naming Rules

### Format: `ORDER_ALTTEXT_TITLE.extension`

Each filename has **3 parts** separated by underscores (`_`):

```
01_Vietnamese Food_Pho Bo Special.jpg
──  ───────────────  ──────────────
 │        │                │
 │        │                └── Part 3: Title (shown below image)
 │        └── Part 2: Alt text / Category
 └── Part 1: Order number (controls display order)
```

### Part 1 — Order Number
- Controls the display sequence
- Use two digits: `01`, `02`, `03`, ... `99`
- Images appear sorted by filename, so `01` shows first

### Part 2 — Alt Text / Category
- **For Banners**: This becomes the image alt text (for accessibility/SEO)
- **For Gallery**: This becomes the **category tab** name (images with the same category are grouped under the same filter tab)
- Use spaces freely — e.g. `Vietnamese Food`
- Use hyphens (`-`) if you prefer — they get converted to spaces automatically

### Part 3 — Title
- Displayed as the title text on the banner or below the gallery image
- Can contain spaces
- If you don't need a title, you can leave it empty: `01_Alt text_.jpg`

### Supported File Formats
`jpg`, `jpeg`, `png`, `webp`, `gif`, `svg`, `avif`

---

## Uploading Banner Images

### Steps:
1. Log in to **cPanel** → **File Manager**
2. Navigate to `public_html/_RESTAURANT_MANAGER_ZONE/WebsiteBanners/`
3. Upload your images with correct naming

### Example filenames:
| Filename | Order | Alt Text | Title |
|----------|-------|----------|-------|
| `01_Restaurant logo_Tô Tô Ravintola.jpg` | 1st | "Restaurant logo" | "Tô Tô Ravintola" |
| `02_Fresh bread_Bánh Mì.png` | 2nd | "Fresh bread" | "Bánh Mì" |
| `03_Pho bowl_Phở Bò.webp` | 3rd | "Pho bowl" | "Phở Bò" |

### Manifest URL for Framer:
```
https://api.totoravintola.fi/api/manifest.php?path=_RESTAURANT_MANAGER_ZONE/WebsiteBanners
```

---

## Uploading Gallery Images

### Steps:
1. Log in to **cPanel** → **File Manager**
2. Navigate to `public_html/_RESTAURANT_MANAGER_ZONE/Gallery/`
3. Upload your images with correct naming
4. The **category** (Part 2) determines which filter tab the image appears under

### Example filenames:
| Filename | Order | Category (Tab) | Title |
|----------|-------|----------------|-------|
| `01_Food_Phở Bò Special.jpg` | 1st | "Food" | "Phở Bò Special" |
| `02_Food_Bánh Mì.png` | 2nd | "Food" | "Bánh Mì" |
| `03_Drinks_Vietnamese Coffee.webp` | 3rd | "Drinks" | "Vietnamese Coffee" |
| `04_Interior_Main Hall.jpg` | 4th | "Interior" | "Main Hall" |

This would create **3 filter tabs**: ALL | Food | Drinks | Interior

### Manifest URL for Framer:
```
https://api.totoravintola.fi/api/manifest.php?path=_RESTAURANT_MANAGER_ZONE/Gallery
```

---

## Common Tasks

### Add a new image
1. Name it following the format: `ORDER_CATEGORY_TITLE.ext`
2. Upload to the correct folder (`_RESTAURANT_MANAGER_ZONE/WebsiteBanners/` or `_RESTAURANT_MANAGER_ZONE/Gallery/`)
3. Wait ~5 minutes for the cache to refresh (or clear browser cache)

### Remove an image
1. Delete the file from the folder
2. It disappears from the website automatically

### Reorder images
1. Rename the files to change the order number
2. Example: move image 3 to position 1 → rename `03_...` to `01_...`
3. Adjust other numbers to avoid duplicates

### Add a new gallery category
1. Just upload an image with a new category name in Part 2
2. The filter tab appears automatically
3. Example: uploading `05_Events_Opening Day.jpg` creates an "Events" tab

### Rename a category
1. Rename all files in that category to use the new name
2. Example: change all `_Food_` to `_Menu_` in filenames

---

## Troubleshooting

| Problem | Solution |
|---------|----------|
| Images not showing | Check filename has exactly 2 underscores separating 3 parts |
| Wrong order | Make sure order numbers are unique and zero-padded (`01`, not `1`) |
| Category tab missing | Ensure the category name (Part 2) matches exactly across files (case-sensitive) |
| Changes not visible | Wait 5 minutes for cache to expire, or hard-refresh the browser (Ctrl+Shift+R) |
| Image not accepted | Verify file extension is one of: jpg, jpeg, png, webp, gif, svg, avif |

---

## Quick Reference

```
Banner:  ORDER_ALT-TEXT_TITLE.ext     →  folder: _RESTAURANT_MANAGER_ZONE/WebsiteBanners/
Gallery: ORDER_CATEGORY_TITLE.ext     →  folder: _RESTAURANT_MANAGER_ZONE/Gallery/

Manifest URL:
  ?path=_RESTAURANT_MANAGER_ZONE/WebsiteBanners    — for banners
  ?path=_RESTAURANT_MANAGER_ZONE/Gallery           — for gallery
  &folder=subfolder                                — optional: target a subfolder
```