Document existing system for logos images in taxonomies and design new system

[stephanegigandet]

Problem description

Some taxonomy entries (in particular labels) have associated logo images that we display on the website. How to add those images is not obvious:

• images must be SVG or PNG
• the height of the image must be 90 pixels (because on the website we display them at 90 pixels height)
• the filename must end with [width]x90.[svg|png] to indicate the width of the image when the height is 90 pixels (this is to be able to specify the width of the image in HTML)
• the filename must be the canonical name of the entry in a specific language (e.g. fr:ab-agriculture-biologique -> ab-agriculture-biologique.74x90.png)
• the file must be located in a specific path: html/images/lang/fr/labels/ab-agriculture-biologique.74x90.png

It is possible to have different images for different languages.

Desired solution

We may want to define a better solution to handle taxonomy images. We probably need in particular to get a fresh look at the requirements, beyond just displaying the logos in the website.

It could be useful to keep high resolution images (for PNG), and have an automated process to scale them / rename them into smaller images.

Part of

• 📝 Documenting Product Opener (Tracker) #5559

[alexgarel]

I would say, have the file name in the taxonomy, it would be some kind of self documentation.

For size, maybe add a check in the CI ?

[aleene]

Also these images should percolate to Robotoff.

[github-actions]

This issue is stale because it has been open 90 days with no activity.

[nicorikken]

@stephanegigandet can you explain what the plan is for svg file resolution? Adding size numbers in the filename of a SVG doesn't make sense to me. Does an existing SVG have to be converted to adjust the resolution, or is it enough to take into account the aspect ratio and fix the smallest side to 90px to come up with the other dimension?

Also, what other files would have to be added/changed? I did notice links in https://github.com/openfoodfacts/openfoodfacts-server/blob/main/taxonomies/labels.txt and https://github.com/openfoodfacts/robotoff/blob/main/data/label_logos.json (only after publication)

[stephanegigandet]

@stephanegigandet can you explain what the plan is for svg file resolution? Adding size numbers in the filename of a SVG doesn't make sense to me. Does an existing SVG have to be converted to adjust the resolution, or is it enough to take into account the aspect ratio and fix the smallest side to 90px to come up with the other dimension?

It's enough to fix the height to 90px to get the width to put in the filename, the SVG files don't have to be changed. This is so that we can get the aspect ratio from the filename only, without having to parse the SVG.

Also, what other files would have to be added/changed? I did notice links in https://github.com/openfoodfacts/openfoodfacts-server/blob/main/taxonomies/labels.txt and

Those links are currently not used.

https://github.com/openfoodfacts/robotoff/blob/main/data/label_logos.json (only after publication)

Those I don't know, @raphael0202 ?

[raphael0202]

Those I don't know, @raphael0202 ?

label_logos.json was created in the absence of a clear way to know which label has a logo. It's used to display the logo in Hunger Games.
I would be happy to switch to a more centralized system if it's ready.