NEW: Start my new Ultimate Portfolio App course with a free Hacking with Swift+ trial! >>

How do I add new images to Pauls iDine app?

Forums > Swift

Hi All

Just curious as to how I add or amend the images in the iDine example app Paul has on his site please? I tried two methods of creating new images, by replicating what I see in the downloaded images folder and amending the existing images, and also by adding new images of my own, then updating the respective json file with the correct data (though not entirely sure of the ID field format - it's very long HEX type string).

However when I do this it causes issues in the presentation of ContentView and ItemDetail files vis-a-vis the images are not there!!

What would be the correct process here please?

Thanks John


Hi John

You will need to add the two image sets to the Assets.xcassets file (or same file (.xcassets) as the other images) with the new-name and new-name-thumb where new name is the name of your item. eg black-bean-soup and black-bean-soup-thumb

then in the menu.json file add it

"name": "Breakfast",
        "items": [
        "id": "1", // <- This can be any unique string that not in any other menu item
                "name": "Black Bean Soup", //<- It needs the same spacing as image name without the "-"
                "photoCredit": "John Smith",
                "price": 100,
                "restrictions": ["V", "N"],
                "description": "This is the best of Soup you will every have!!!"
                "id": "EDCD038C-036F-4C40-826F-61C88CD84DDD",
                "name": "Maple French Toast",
                "photoCredit": "Joseph Gonzalez",
                "price": 6,
                "restrictions": ["G", "V"],
                "description": "Sweet, fluffy, and served piping hot, our French toast is flown in fresh every day from Maple City, Canada, which is where all maple syrup in the world comes from. And if you believe that, we have some land to sell you…"

what happens is the struct Menu Selection it converts the name to the image name in Assets with this

var mainImage: String {
    name.replacingOccurrences(of: " ", with: "-").lowercased()

var thumbnailImage: String {

as you see that it take the name in JSON and then replaces the space with "-" and makes it lowercase and for thumb adds -thumb which is then used to call image.

Hope that makes sense



Many thanks Nigel - yes, I see what you have explained, many thanks for your help here - I am very much learning!!!

However... I am getting an error. Here's what I have done...

In the json file, I added this...

                "id": "1", // <- This can be any unique string that not in any other menu item
                "name": "80M band", //<- It needs the same spacing as image name without the
                "photoCredit": "John Smith",
                "price": 100,
                "restrictions": ["V", "N"],
                "description": "This is the best of Soup you will every have!!!"

And I created two images, one at 1024x1024 and the other at 60x60, and named these;

80M-band.png 80M-band-thumb.png

When I build this to the simulator, I get an error on line 24 of Helper.swift which says "Thread 1: Fatal error: Failed to decode menu.json from bundle."

Any pointers?



Nigel - I think I have discovered what the issue is. It appears the code won't accept image names starting with a number! When I changed the name of the image to "eighty band" it worked, as long as I don't have the name entry starting with a number as well. Not sure how I am going to work around this one, as for me it is important for what I want to use the app for that I can use numbers in the json name field.

Any ideas for me please?


Hi John,

The Fatel Error was NOT due to the the name of the image but to do with the syntax of the JSON file. If you miss a comma, open brace, close brace etc then it will not decode it. I use JSON Editor Online (copy/paste in then it tell of error) to check for errors in JSON file.

{ // <- open brace
  "id": "1", // <- comma after each dictionary item and make sure of colon between the 'Key' and the 'Value'
  "name": "80M band", // <- so this will work
  "photoCredit": "John Smith",
  "price": 100,
  "restrictions": ["V", "N"],
  "description": "This is the best of Soup you will every have!!!"
},// <- notice this comma after the close brace


Hacking with Swift is sponsored by Emerge

SPONSORED Emerge helps iOS devs write better, smaller apps by profiling binary size on each pull request and surfacing insights and suggestions. Companies using Emerge have reduced the size of their apps by up to 50% in just the first day. Built by a team with years of experience reducing app size at Airbnb.

Set up a demo!

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

Unknown user

You are not logged in

Log in or create account

Link copied to your pasteboard.