Add ingredient images

[rolandgeider]

Use case

Seeing the image when logging or searching for a product would be really useful and comfortable for the user (can see the brand, etc. )

Proposal

Add images for the ingredients, there is already a branch in the backend that retrieves them if none is known locally, but we need to think on how to make retrieving them more performant.

https://github.com/wger-project/wger/tree/feature/ingredient-images
wger-project/wger#653

[Coffiie]

Hello,
I see you have lots of good first issues open and would like to contribute to them. @rolandgeider

[rolandgeider]

Hi @Coffiie ! Sure! Did you want to do this one?

[Coffiie]

Sure, please assign this to me and I can begin

[rolandgeider]

It's yours!

Note that you need the branch for the backend to return the images. Do you want to setup a local docker instance? I could setup a test server the next days otherwise

[Coffiie]

Hmm, I have no idea how docker works... but if you think it'd be easy then I can give it a try

[rolandgeider]

We can try :)

1. First clone the web application (https://github.com/wger-project/wger) somewhere, leave master for now

2. Start the docker container, you should be able to open localhost:8000 on the browser.

docker run -ti  \
  -v /path/to/your/wger/checkout:/home/wger/src \
  --name wger.devel \
  --publish 8000:8000 wger/devel

if you use windows I had problems with -v use this instead --mount type=bind,source='"C:\path\to your\checkout"',target=/home/wger/src

3. Load the ingredient data with docker exec wger.devel wger load-online-fixtures.

4. Now checkout the feature/ingredient-images branch and run the database migrations with docker exec wger.devel python3 manage.py migrate

You can e.g. go to nutrition > ingredients and click on one or you can also use the search bar The way this still works is that if an ingredient has no images locally, it retrieves them and that's a process that needs 2 API calls per image, so specially for the autocompleter, it can take some time (but that's a backend problem). The API response is here /api/v2/ingredient/

[rolandgeider]

FYI, I have reworked the way the test server was setup, now I can add separate instances for different branches like the ingredient images

[Coffiie]

Hi, I will set this up once I get time. Thanks! Can we use this thread for further questions as well?

[rolandgeider]

Sure, you can also write me on discord for a more real-time conversation.

If you don't want to setup everything, just register here, then you will be able to login with the flutter app (click on custom server). You can trigger the image download on the backend by visiting an ingredient detail page (well, for most of them), and here's the api result