index * vault

Blur

2025 July 03 // 2025, guide, webdev

i recently learnt about css filters, and thought immediately that it would be so helpful with nsfw images in my gallery. before i used melon king's gallery maker, which is fantastic and does a lot of the work. but i didn't like how difficult it was to go in a do editing afterwards if needed to. i like my website because i have that level of control. for a workaround, i'd actually just opened csp and blurred the thumbnails that way LOL orz

i thought... there must be a better way!!! That's when i stumbled onto css filters.

it's so simple. in your style.css file (or whatever it is that is linked to your gallery) add:

.nsfw { filter: blur(5px) }

then back in your html, add as a class to your img src like so:

<img src="YOUR IMAGE PATH" class="nsfw">

TA-DA! your nsfw is now hidden! it works perfectly with the js script in kaylee rowena's gallery template. i havent tested it with anything else ^^;; but wow, isn't it great you can go back and fix or add things to your code? i like having power; being able to go back if i err'd on the side of caution or i simply forgot. bsky kinda feels like a weenie hut jr, and the culture of negging people who've forgotten to hit the labels or add alt text is a bit much... Shouldn't we be questioning why the site doesn't let you edit? especially if something is so important, like adding alt text.

hope this helps on your indieweb journey! if there's a better way, lemme know o7

--xoxo becky

« Next | Vault | Previous »

to top * main site * RSS


(c) gg8473 2023 - forever

Made with love and 11ty