How we add art ♥

A step-by-step guide for Beatrice & Audrey (and Dad!)

💡 The big idea: there is only one file you ever change — data.js. To add a piece of art you do two things: put the photo in the img folder, then paste a little block into data.js. That's it!
1

Take a photo of the artwork

A phone photo is perfect. Try to take it straight-on with good light. Square photos look best on the site.

2

Put the photo in the img folder

Copy the photo into the img folder inside the website folder. Give it a simple name with no spaces, like bea-flowers.jpg or audrey-cat.jpg.

3

Open data.js

Double-click data.js to open it in a text editor (TextEdit or VS Code both work). You'll see a list of art blocks that look like the one below.

4

Copy this block and paste it near the top of the list

Paste it right after the window.ITEMS = [ line. Then change the words to match your art. Keep the quotes and the comma!

  {
    img: "img/PUT-YOUR-PHOTO-NAME.jpg",
    title: "Name of the artwork",
    artist: "Beatrice",          // or "Audrey"
    price: "$15",                // or "" to hide the price
    note: "Watercolor on paper", // a short description
    buyLink: ""                  // leave empty for the "Message to buy" button
  },
5

Save and refresh

Save data.js (Cmd+S). Go back to the website and refresh the page (Cmd+R). Your new art appears! 🎉

Helpful to know

✏️ Change a price or description

Just find that art's block in data.js, change the words inside the quotes, save, and refresh.

🗑️ Remove a piece

Delete its whole { ... } block (and the comma after it). Save and refresh.

💳 Let people pay by card

Right now the Message to buy button sends an email so you can arrange payment. When you're ready, make a free PayPal.Me link or Stripe payment link for a piece and paste it inside that item's buyLink: "". The button becomes Buy now automatically.

⚠️ If something looks broken

It's almost always a missing comma or a missing "quote" in data.js. Compare your block to the examples — every line ends the same way. Undo your last change (Cmd+Z) and try again.

← Back to the gallery