Improve support for transparent and non-rectangle images, icons, and emoji's

[sambouwer]

Is your feature request related to a problem? Please describe.
There are several bug reports on how Anytype deals with transparent images:

• Mobile - Problem with transparent PNG icon
• White background when using transparent profile icon - #4 by Oshyan

There are also several feature requests to improve how Anytype deals with transparent and non-rectangular images:

• Using images as icons with transparent background
• Remove Background Colour On PNG Icons Emojis
• Transparent PNG Page Icon Addition

Describe the solution you’d like
I think we can resolve all submitted bugs and combine all feature requests if we ask the Anytype team to:

• Allow the user to choose between no background or a background color (of choice) for any image
• Allow the user to choose a background style/shape (square, rounded square, squircle, or circle)
• For bonus points: allow to differentiate the color for light vs darkmode

The scope of this feature request is “any image”:

• Image on a canvas/in a block
• Cover image of an object
• Object icon

Describe alternatives you’ve considered
None yet

Additional context
Maybe this can be extended to be allowed for any object, like requested here:

Please Allow Editing the Page Object's Background Color

Currently, the background color for a page is a whitish color, which can be harsh for those who are light sensitive. I use a setting called Force Dark mode on my android device which changes the background color and I found it quite nice. Here is a screenshot of what it looks like: [image] Keeping in mind that an app-wide dark mode could be more difficult to implement currently, I’d like to request the ability to set the background color of a page object on both the desktop and android apps.…

[Bred]

Is your feature request related to a problem? Please describe.
Please allow for the removal of the background colour on transparent icons on pages. I find it very inconsistent with the page when the thing that should be transparent acts like a fake png, with a colour I didn’t want behind it.

Describe the solution you’d like
Allow the removal of the default background colour when using transparent images/emojis. Such as Notion’s design.

Describe alternatives you’ve considered
Having to add background colours to pngs to match that of anytype backgrounds. Which will take… hours

Additional context

[Eban]

Hi, I have this weird blue background behind my profile picture, I’m running Anytype 0.1.11 on Android 10

[Kirill_Lem]

@Eban Hi! Sorry for the long aswer. Please, send the original picture, it helps us to understand why it happend

[Eban]

Hi, here is the image https://community.anytype.io/assets/avatars/cd42gqU0hgDCX6tg.png it’s just a transparent PNG.

[Eban]

[div3xi]

That is just the background colour the devs have selected for profile icon, it would become transparent in the future.

[Kirill_Lem]

@Eban Hi! Please, describe the problem in detail.

[Oshyan]

@Kirill_Lem I believe they are using an image with transparency for their profile pic. The white in the image they attached should be “transparent”, and I think they expect that the background (blue-green “fibers” in this case) would show through instead of a white background in an oval.

[Eban]

Exactly !

[Kirill_Lem]

@Oshyan Thank you for the clarification!

[Kirill_Lem]

@Eban Thank you for your notice! We haven’t implemented this yet, but plan to do that in the future

[k.and]

I believe this issue is still ongoing.

When I add an icon with a transparent background sometimes I get this result (which is expected):

But sometimes it appears like that:

Please bring some consistency to how icons with transparent background are processed.

[sambouwer]

I’m happy to read this is in progress on iOS:

Anytype iOS 0.15.0 released

Highlights include: Polish and sparkle in the UI Further object customisation :wastebasket:Permanent deletion of your Anytype account New features: Fresh canvas animations for blocks Refreshed “featured relations” blocks Template selection for objects Create new objects from inside a Set Permanent Anytype account deletion Duplicate your object from object settings Object “quick actions” from the main screen/dashboard Improvements: We’ve renamed the delete button t…

[SenJay]

Is your feature request related to a problem? Please describe.

This request isn’t really related to a problem, but when setting icons for pages I noticed that they have an off-white box behind them.

Describe the solution you’d like

Instead of having the off-white background, having a transparent background for the page icons akin to Notion.

Describe alternatives you’ve considered

Another alternative to this would be to have a toggle to let the user choose whether they want a background to the icon or not.

Additional context

N/A

[Flip]

To fully understand it. Does your uploaded image had a background and you want Anytype to remove it or the image you uploaded doesn’t had a background an Anytype added one?

[Flip]

Thanks for the added information. I adjusted the title, so this topic will be easier to be find. Hope, you are ok with it. Otherwise, feel free to adjust, if its not fully matching your requested feature.

[kerbless]

I also would like Anytype to work with transparent png backgrounds for icons so +1

[Flip]

Just pasted an image with transparent background in dark mode. It’s very hard to read some parts of it.

Slightly better with “grey” background.

Please add “white” to the background options.

[Flip]

Additionally to my post. Also show the background color, when the image is viewed in the modal image viewer.