[FEATURE] Allow ability to upload/set logo for dashboard inventory view

[Joshndroid]

Within the dashboard inventory view it would be nice to have the primary view be a logo type setup with some of the details still visible with the expiry's (if a gift card) being able to be shown if the item differs from a gift card to a loyalty card.

Proposed I guess is something similar to catima but not quite... which has a card view but this method allows you to easily pick the card based on the logo/brand that you can upload the image as well a differentiate if its a loyalty card/gift card....

Catima's is quite small and would not allow you to differentiate between gift cards, loyalty cards, etc easily.

I like the way your inventory dashboard is displayed in mobile.

If you were able to have the background of the card have a logo picture, then have the details overlayed it would assist at a glance at just the dash board in determining what you are looking at using...

With gift cards, an issue/expiry date is shown.
For loyalty cards, no issue/expiry date is shown

I have included a couple example mock ups base on your current mobile view.

[l4rm4nd]

The idea is nice.

Following issues will occur:

• Users upload images with weird resolutions. As the VoucherVault application is responsive, the background images will be rendered differently depending on the client device's height/width. Can look weird.
• Users upload images with an unfitting color theme. The frontend will have a fixed CSS style and render text in a given color (e.g. black). If the user uploads a dark image, text will not or less be visible.
• Users upload images, which are not minimal. For example with big logos, repeating pattern etc. This will disturb the whole tile, which is currently minimalistic and clean.

I could provide some fixed background images for often used stores like Amazon, Steam etc. However, this will not introduce the flexibility you desire and requires maintenance (as many users will request more stores do be added).

Will have to think about this one and play around.

Examples

A random Amazon logo would currently look like this:

A random Jochen Schweizer logo:

[l4rm4nd]

Instead of the QR/EAN13 code displaying, which is rather useless atm, we could introduce a store icon. This would work flawlessly and would be less prone to user errors (choosing a fitting image).

I highly assume there are libraries with pre-existing logos we may choose from.

[l4rm4nd]

Instead of the QR/EAN13 code displaying, which is rather useless atm, we could introduce a store icon. This would work flawlessly and would be less prone to user errors (choosing a fitting image).

I highly assume there are libraries with pre-existing logos we may choose from.

Guessed right. There is a cool API on https://www.logo.dev/:

• https://logo.clearbit.com/amazon.com
• https://logo.clearbit.com/google.com
• https://logo.clearbit.com/jochen-schweizer.de
• https://logo.clearbit.com/netto-online.de
• https://logo.clearbit.com/mcdonalds.com
• https://logo.clearbit.com/bk.com

User can just submit a logo url and that's it. Maybe use some JS to obtain the logo's primary color and colorize the full tile in alike color.

[Joshndroid]

It's your program, however having something predefined and not user uploaded is going to end up just being an all-round pain for you and the users who want some flexibility... there are going to be 10's of thousands of businesses not within any of those predefined logo spaces. You'll end up with a bunch of requests or end up just opening it up, being sick of people asking for X company logo

Is it possible to have guidelines for an appropriately sized image?
Typically your target audience is going to be people who already have a technical ability to run a self hosted application.
Following some documentation or having a hint in the upload screen would be fairly simple.

I see the update regarding the app icon in the corner over the barcode and once again, its yours program but I don't necessarily enjoy that concept from a visual perspective (i understand it's all subjective)

One other work around could be a 'compact' view for your dashboard sub category inventory view...
User uploaded images that are displayed in a specific dimension in the compact view, which then moves to the box in the corner in general dashboard inventory view
This view could be unlocked in each category... say you have just gift cards.... so in the gift card sub category you have 'compact view' which just shows the user uploaded logo in a 200x300px rectangle with a $ value....
This could be contrasted in the loyalty card view where it just shows the 200x300px user uploaded logo....
it's likely this would end up being a pain probably to code or whatever i can imagine

[l4rm4nd]

I've created a new branch to play around with this.

https://github.com/l4rm4nd/VoucherVault/tree/feature-logos

Currently, the flexible logos via logo.clearbit.com is implemented. Works as intended by providing the user a chance to define a logo slug.

[Joshndroid]

Nice work.
I think there will be a bunch of people who will enjoy this.
I think I like the customization/tinker path a little more.
I will see how this develops and may end up coming back for a look.
Thanks for the responsive chat, your doing some cool stuff

[l4rm4nd]

Pushed a new release (v1.5.0) with the ability to define store logos.

See #28

Also overhauled the dashboard a bit.

[l4rm4nd]

Will close this issue for now as not planned.

Will still play around though whether custom background images are somehow possible.