---
title: A simple glitch-soc tweak
date: 2019-05-19 15:34
author: Lynne
categories: [Scripts, The Fediverse]
---

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!

<!--more-->  
*Update: Fixed a bug that caused the media gallery to stop working properly*

![The default behaviour](https://wasabi.lynnesbian.space/bune-city/2019/05/9d7264e7e4245c14c5569fb6d7dcc460/sshot_2019-05-19_at_14-57-40-1558241860.png)

![With my CSS tweak applied](https://wasabi.lynnesbian.space/bune-city/2019/05/1b90819a4327b18465545bede7481663/sshot_2019-05-19_at_14-58-13-1558241893.png)

The code
--------

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

``` {.wp-block-code}
.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.

-   ![](https://wasabi.lynnesbian.space/bune-city/2019/05/d12970210c4933d4950c134c31b8a6a1/sshot_2019-05-19_at_15-29-33-1558243773.png)

-   ![](https://wasabi.lynnesbian.space/bune-city/2019/05/2123e7c63b371fc455b9e5ba2ddf920c/sshot_2019-05-19_at_15-17-37-1558243057.png)

-   ![](https://wasabi.lynnesbian.space/bune-city/2019/05/838e232660a060a4257af7c2530073fb/sshot_2019-05-19_at_15-20-01-1558243201.png)

[]{.wp-block-jetpack-slideshow_button-prev .swiper-button-prev .swiper-button-white}[]{.wp-block-jetpack-slideshow_button-next .swiper-button-next .swiper-button-white}[]{.wp-block-jetpack-slideshow_button-pause}