(Feature request) Support images with transparent background

[meichthys]

Describe feature

https://www.reddit.com/r/Trilium/comments/1ew21dq/transparent_layers_in_png_files/

Additional Information

No response

[doobes]

Hoot!

Thanks guys

[SiriusXT]

Trilium itself displays transparent images, which can be achieved by adding the following custom css:

img.note-detail-image-view{
    background-color: #ccc;
    background-image: 
        linear-gradient(45deg, #eee 25%, transparent 25%),
        linear-gradient(-45deg, #eee 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #eee 75%),
        linear-gradient(-45deg, transparent 75%, #eee 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

If you need png and other images in text notes to display a transparent background, you can try adding css:

img{
    background-color: #ccc;
    background-image: 
        linear-gradient(45deg, #eee 25%, transparent 25%),
        linear-gradient(-45deg, #eee 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #eee 75%),
        linear-gradient(-45deg, transparent 75%, #eee 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

[doobes]

Looking through the demo info, we have this:

So like the SiriusXT says, it's already possible.

My question is how?

Where would you add the css referenced above?

cheers

[SiriusXT]

You can read this document to see how to add custom css:
https://github.com/TriliumNext/Docs/blob/main/Wiki/themes.md#custom-css
1：Create a css type note

2：Add a note label

3：Add css

img{
    background-color: #ccc;
    background-image: 
        linear-gradient(45deg, #eee 25%, transparent 25%),
        linear-gradient(-45deg, #eee 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #eee 75%),
        linear-gradient(-45deg, transparent 75%, #eee 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

[eliandoran]

@meichthys , make sure you also have image compression in settings disabled otherwise I think you lose the transparency. Then re-upload the image.

Since you have a white background instead of the transparent one then most likely this is the issue. Then you can proceed with the custom CSS to add the checkmark pattern.

[meichthys]

also have image compression in settings disabled

That's it! It works fine for me with compression disabled.
Closing.

[doobes]

Yep!

Great work!