A simple glitch-soc tweak

Mastodon recently added a cool feature that blurs images when they’re marked as sensitive and while they’re loading. I noticed that it automatically hides this blur when the image loads, but it’s trivial to put it back. Combined with the glitch-soc setting to display full images rather than cropping them, we can use two little CSS rules to change those ugly letterboxes and pillarboxes to a nice-looking blurred background!

Update: Fixed a bug that caused the media gallery to stop working properly

post with pillarboxing
The default behaviour
image with a blurred background
With my CSS tweak applied

The code

If you’d like to run this on your own instance, here’s the CSS:

.media-gallery__preview--hidden {
    display: block;
}
.media-gallery__item-thumbnail .media-gallery__preview--hidden {
    display: none;
}

To add it, go to your preferences page, click the Administration tab, choose “Site settings”, scroll to the bottom, and paste the above CSS into the Custom CSS area. Save your changes with the button at the bottom, and reload your glitch-soc tab.

Some more examples

Some more examples of how things look with this small change, because I think it looks really nice.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.