build your own screenshot garden

what is a screenshot garden?

i've been keeping a screenshot garden for about a year- a handmade place on the internet for my screenshots to live. it is somewhere between a diary, a work-in-progress blog, and my notes app!

you can visit my screenshot garden at

i use it to reference old material, store interesting images, and keep a little log in time about what i have been doing, reading, and thinking about.

how does it work?

i let screenshots collect on my desktop, then move some of them manually into my screenshot garden, which is a directory on my hard drive. inside this directory are a series of folders that i can sort my screenshots into (or i can always make a new folder). once a month or so, i run a few processes in the terminal that generate a json (data) file which lists all of these folders and images. inside this folder is an index.html file that uses the json file as input. after i run those processes, i upload any changes to neocities, and it is online.

how do i make it work on my computer?

note: this is only for unix (linux and mac) systems.

customizing the css style of your screenshot garden;

you can change the styling of your screenshot garden by editing the css in the index.html file. (if you're brand new to css, a good tutorial is here.)

some css classes are functional, but most are aesthetic. i've separated them out in the index.html file. everything is commented and it should be clear which applies to which element. play around! you can always redownload the template if something goes awry.
there are two variables in the javascript that are also an easy change - the separator variables, which are used in the display of the files.

the last thing you'll want to edit is the little intro text, which is between the < intro > tags. feel free to edit it to say whatever you wish.

some notes on privacy, metadata, and image optimization;

i'd highly encourage you do manually move screenshots into your garden, instead of setting it as your default screenshot folder. remember that these are public! don't screenshot private conversations! be careful what you put online! etc

if you're really only sharing screenshots, you don't need to worry about exifdata (image metadata). BUT if you are going to use your screenshot garden for pictures taken by your phone or other devices, you'll want to remove the information. some metadata can be very personal, like the gps location of where the image was taken.

there are a lot of ways to do remove metadata. if you are comfortable with the console, one of the simplest is simply installing a tool like jhead.

if you want to run a batch process outside of the console, i recommend imageoptim which also reduces the filesize of your images significantly. (you can elect to run lossy or lossless compression.)

you might even want to consider reducing the height and width of your images, which will help their load speed, energy usage, and storage space.

after you're done, you'll notice that the date modified on your images have changed. oh no!! but don't worry- you can change the date modified back to date created, by running this command in the console (mac);

for f in *; do
 olddate=$(stat -f %SB -t %Y%m%d%H%M "$f")
 touch -m -t $olddate "$f"

and as always, as you're trying out processes, it is always a good idea to make a backup.


the screenshot garden code is licensed under the ACSL 1.4, the full text of which is below;

that is it!! i hope you enjoy making your screenshot garden.

you can find me also on: