Skip to content

Adding photos to inventory items — what the kitchen sees on every screen

A pantry of three hundred items reads better with pictures. The kitchen scans the list looking for that one tinned tomato we tried last spring, not the row labelled San Marzano DOP, and an image is faster than a name. Photos sit on every inventory row that wants one, with a starred photo doubling as the row’s thumbnail across the list, the item header, and any hover preview. One upload, four surfaces light up.

This page is for two readers. If you’re the owner, “Why this page exists” is for you — start there. If you’re the head chef, jump to “How to upload” and skim down to the worked example.

Why this page exists

Pantry rows in a serious kitchen drift toward dense lists of similarly-named ingredients — three brands of pancetta from three suppliers, four flours that look identical on the shelf, six tomatoes that differ only in brand and packaging. The cook reaching for an ingredient mid-service doesn’t read the label; they recognise the can. The inventory app’s job is to let the kitchen recognise the can on the screen the same way they recognise it on the shelf. The photo is that recognition.

Beyond recognition, photos earn their keep on the margins dashboards and the detail pages where the owner hunts down the worst-margin items. A wall of text rows blends into itself; a wall of thumbnails reads as fast as the kitchen reads a shelf. The thirty seconds saved per click compounds across a hundred restock decisions a week.

The rule

Star one photo to make it the thumbnail everywhere. The starred photo is the row’s image — on the inventory list, on the item header, on every hover preview, on every report. Multiple photos are fine (different angles, different states) but exactly one is the face. Upload another and it lives in the gallery but stays in the background until you star it.

How to upload

Open any inventory item and click into the Media tab on the left sidebar. The page splits into an upload zone at the top and a gallery beneath.

Drop the file, or click the upload zone to pick from your file picker. Multiple files at once are fine — they upload in sequence so the first one shows first in the gallery. PNG, JPG, WebP, and HEIC all work; HEICs (the format every iPhone shoots in) are converted to JPEG automatically client-side, so you don’t have to think about it. Large originals are downscaled in the browser to about 4000 pixels wide before the upload starts — that keeps the round-trip fast on a venue’s restaurant Wi-Fi without losing the detail you’ll ever zoom into.

The first photo you upload auto-becomes the featured one — the star lights up by itself, the row thumbnail on the list switches from the placeholder icon to your photo, and the item header at the top of the detail page matches. You can star a different photo any time by hovering the one you want and clicking ★ Make featured — the previous featured photo loses its star in the same click. Delete a photo with the ✕ Delete button that appears on hover; if you delete the featured one, the next-earliest photo gets promoted automatically so the row keeps its thumbnail without you having to re-star.

Where the photo shows up

Once a photo is starred, you’ll see it on:

  • The inventory list — the small thumbnail at the left of each row, replacing the gray-gradient placeholder
  • The item header on the detail page — the 64-pixel block next to the item name
  • Hover previews — moving your cursor over either of those thumbnails pops up a larger version of the same photo (free to render; the file is already in the browser’s cache)
  • Future surfaces — the margins dashboards, the recipes-and-BOM tab on items that consume this ingredient, the receiving hub

Bandwidth and waiting

Each upload writes one image file to cloud storage; you’ll see a “Uploading…” spinner that disappears the moment the round-trip lands. The image starts appearing on every surface immediately — no separate save, no separate publish step. The hover-preview popup is bandwidth-free for now: every “size” the app displays (list thumb / header thumb / large hover preview) is the same file in the browser’s cache, just rendered at different CSS sizes.

Worked example — Pancetta Cured Pork Belly Roll

Marco is staring down three pancetta rows in the pantry: Pancetta Arrotolata Pizzagalli, Pancetta Affumicata Denervata, Pancetta Cured Pork Belly Roll. The names alone don’t tell him which is which; the supplier names (Lucilla / Unknown / Premium Food Thailand) tell him a little more, but on Sunday-prep morning the chef just wants to grab the right tube of pancetta from the fridge. A picture would help.

Marco opens the Pancetta Cured Pork Belly Roll detail page, taps Media on the sidebar. The gallery is empty. He drops a single photo — the actual roll, hung on the meat hook in the walk-in cooler with a slice next to it on the counter. The page hesitates for half a second; the thumbnail appears at the top, ringed in amber with a ★ FEATURED badge.

He clicks ← Inventory to bounce back to the list. The row now reads with his photo at the left instead of the meat-emoji placeholder. He hovers it; a 280-pixel preview of the same photo pops up to the right of the row. He flicks to Pancetta Arrotolata Pizzagalli next, drops a different photo — this one a tighter shot showing the spice rub on the cured pancetta. Hovers it; a different preview pops up.

Tomorrow morning, when the chef asks Marco’s prep cook for “the rolled pancetta”, the cook opens the inventory app, scrolls until they see the rolled pancetta photo, and walks to the cooler shelf where that exact roll lives. Two seconds. They never have to read the supplier name; the picture did the recognition.

If next month Marco decides the second photo of the rolled pancetta (showing it sliced) is more useful as the row image, he opens the gallery, hovers the sliced shot, clicks ★ Make featured, and watches the star migrate. The inventory list updates the next time he opens it; the item header updates immediately. No re-upload, no copy-paste, no rename.