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 screenshot-garden.neocities.org.

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.

make a directory somewhere on your computer. you can call it anything, i will call mine screenshot garden.
inside this directory, optionally make some folders.
drag some images into your screen garden directory.
open the garden directory in your terminal. you can do this by typing;

cd PATHTOYOURDIRECTORY

now you need to install a little utility called tree, which helps you look at directories
if you are on a mac and already have homebrew installed, simply type into the terminal:

brew install tree

and hit enter. if you get a permissions error, you may need to instead use sudo brew install tree, then enter your password. if you don't have homebrew already, or want more detailed instructions, click here .

if you are on RHEL/centOS or fedora linux:

yum install tree -y

if you are on debian/ubuntu or mint linux:

sudo apt-get install tree -y

if you are on windows, again i cannot help you, i am sorry - i don't program on windows and tree works differently there!

now that you have tree installed, you can use it to generate a list of your files

in the same directory, run the following command to generate a json file sorted by last time modified:

tree --timefmt=%F -trDJ ./ -o files.json

then run the following command to generate a static html site (technically optional for this to work, but a good thing to do for those that don't run javascript):

tree -H . -D -t -r -T screenshot_garden -o html.html

if you open either of these files, you should see a list of everything in your screenshot garden. neat!!

now you need an index.html that can load that json file. i've provided a template. you can download it here or copy the following code into a file then save it as index.html;

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
<head>
</head> 
<style type="text/css">

/* the following values keeps the image pinned as you scroll- don't edit unless you know some CSS! */

#image{
	position: sticky;
    position: -webkit-sticky;
	top: 0px;
}

#hover_img{
	position: absolute;
	top: 0px;
	left: 0px;
	visibility: hidden;
}

#hover_text{
	position: absolute;
	top: 0px;
	right: 0px;
}

#footer{
	position: relative;
	float: right;
	padding: 1%;
}

/* the following values are stylistic, and may be edited for ~flavor~ */

/* changes the entire page, unless overwritten by another style */
body {
	font-size: 11px;
	font-family: monospace;
	background-color: white;
}

/* the style for the image hover box */
#hover_img{
	max-width: 65vw;
	max-height: 70vh;
	min-width: 25px;
	min-height: 25px;
	border-width: 1px;
	padding: 5px;
	border-color: dimgray;
}

/* the style for the filename at the bottom of the page */
#hover_text{
	color: dimgray;
}

/* the style for the current line your mouse is over */
.highlighted {
	font-size: 13px;
	font-family: monospace;
	color: darkgray;
}

/* the style for a line you have previously moused over */
.previously-highlighted {
	font-size: 12px;
	font-family: monospace;
	color: dimgray;
}

/* the style for the title of the page */
.title {
	font-size: 12px;
	color:black;
	font-family: monospace;
	font-style: italic;
}

/* the style for the intro text */
.intro {
	font-size: 12px;
	margin-left: 10%;
	margin: 2%;
	width: 80%;
	font-family: monospace;
	font-style: italic;
	color: dimgray;
}

/* the style directory listing text */
.directory {
	font-size: 11px;
	font-family: monospace;
	text-decoration: underline;
	color: blue;
}

.directory:hover {
	font-size: 11.5px;
	cursor: pointer;
}

/* the style for the dates in the directory */
.date {
	font-size: 11px;
	font-family: monospace;
	font-style: italic;
}

/* the style for the filenames in the directory */
.filename {
	font-size: 11px;
	font-family: monospace;
}

/* the style for the separators in the directory (you can set these below) */
.separators {
	font-size: 11px;
	font-family: monospace;
	color: gray;
}

.directoryDiv {
	margin-left: 20px;
}

.fileDiv {
	margin-left: 20px;
}

}

</style>
<html>
<title>_screenshot garden_</title>

<div class="intro">
<text class="title"> ____ screenshot garden ____</text><br><br>

this page is a screenshot garden<br>
it is meant to be a public-facing screenshot folder<br>
(like a diary or a work blog)<br>
edit this text to be about you!<br><br>

build your own screenshot garden at <br>
<a href="https://screenshot-garden.neocities.org/build-your-own.html">screenshot-garden.neocities.org/build-your-own.html</a>!<br><br><br>

instructions:<br>
click on each directory to expand <br>
then mouse over each filename to view <br>
(they may take a second to load)<br><br>

a static, html-only directory is <a href="html.html">here --></a><br>
</div>

<div id="image">
</div>
<br><br>
<a id="screenshot garden" name="screenshot garden" class="directory directoryDiv"><center>unfold the screenshot garden</center><br><br></a>
<div id="screenshot gardendiv">
</div>
<br>

<div id="footer">
build your own screenshot garden at <a href="https://screenshot-garden.neocities.org/build-your-own.html">screenshot-garden.neocities.org</a></div>
</html>

full instructions on building your screenshot garden available at; 
https://screenshot-garden.neocities.org/build-your-own.html

---

to generate the json:
go to the local directory/folder where your files are stored
open your terminal
run the following command;

tree --timefmt=%F -trDJ ./ -o files.json

----

to generate the html file:
go to the local directory/folder where your files are stored
open your terminal
run the following command;

tree -H . -D -t -r -T screenshot_garden -o html.html

-----

to test locally, if needed :

php -S localhost:8080

----

the following variables are the separators. you can make them anything you want!

----

var separator1 = " ~~~> "
var separator2 = " >~~~ "

----

the following code is the core functionality of the screenshot garden. feel free to edit it as needed, but be warned that doing so might break some things!

----

//creates the json log and the image & text elements
const garden = document.getElementById("screenshot garden");
const image = document.getElementById("image");

const hover_img = document.createElement("img");
const hover_text = document.createElement("text");

var directoryCatcher = [];

hover_img.id = "hover_img";
hover_text.id = "hover_text";

image.appendChild(hover_img); 
image.appendChild(hover_text);

//loads the json document in and waits for a response
fetch("files.json")
  .then(response => response.json())
  .then(json => populate(json));

//creates a series of expandable directories with contents listed out of the json. only searches one folder deep
function populate(json){

garden.onmousedown = function(){show(garden)};

for (x=0;x<json[0].contents.length;x++){

var currentFile = json[0].contents[x];

if (currentFile.type == "file"){
			appendFileDir(currentFile,"screenshot garden")
		}

else if (currentFile.type == "directory"){
			appendDirectory(currentFile,garden,"")
		}
	}
}

function appendDirectory(currentFile,divToAttach,pastDivs){

divToAttach = document.getElementById(divToAttach.id+"div")

line = document.createElement("div");
 			line.id = currentFile.name;
 			line.classList = ["directoryDiv"]
 			currentDirectory = currentFile.name;
			line.innerHTML = "<text class=date>" + currentFile.time + "</text><text class=separators>" + separator1 + "</text><br><text class=separators>" + separator2 + "</text>";

file = document.createElement("text")
 			file.innerHTML = "directory: <text class=directory>" + currentFile.name + "</text><br><br>";
			file.onmousedown = function(){show(currentFile)};

div = document.createElement("div");
			div.id = currentFile.name+'div';

line.appendChild(file); 
			line.appendChild(div); 
			if (pastDivs == undefined || pastDivs == ""){
				pastDivs = "";
				divToAttach.appendChild(line); 
			}
			else{
				divToAttach.prepend(line); 
			}

line.style.display = "none";

pastDivs = pastDivs + currentFile.name + "/"

fileAppender(currentFile,currentDirectory,line,pastDivs)

}

function fileAppender(currentFile,currentDirectory,line,pastDivs){
			if (currentFile.contents != undefined){
			for (d=0;d<currentFile.contents.length;d++){
				var newFile = currentFile.contents[d];
				if (newFile.type == "file"){
					appendFileDir(newFile, currentDirectory, pastDivs) 
				}

else if (newFile.type == "directory"){
					console.log(newFile)
					setTimeout((a,b,c) => {
					  	appendDirectory(a,b,c)
					}, 100,newFile,line,pastDivs)
				}
			}
		}

}

//appends file element to a directory
function appendFileDir(currentFile, currentDirectory, pastDivs){

divToAppend = document.getElementById(currentDirectory+"div")
	line = document.createElement("div");
	line2 = document.createElement("div");
	line.appendChild(line2);
 	line.id = pastDivs + currentFile.name;
 	line.style.display = "none";

line.classList = ["fileDiv"]
	line2.innerHTML = "<text class=date>" + currentFile.time + "</text><text class=separators>" + separator1 + "</text><br><text>" + currentDirectory + "</text> <br><text class=separators>" + separator2 + "</text><text id=filename>" + currentFile.name + "</text><br><br>";
	line.onmouseover = imgHover;

divToAppend.appendChild(line);
}

//the function that is called as each line is hovered over, which populates the hover_img search
function imgHover(){

if (this.id != "undefined" && (hover_text.innerHTML + "" != this.id + "")){

if (hover_text.innerHTML != ""){
		    var last_line = document.getElementById(hover_text.innerHTML)
		    last_line.classList.remove("highlighted");
		    last_line.classList.add("previously-highlighted");
		}

hover_img.src = "";
	    this.classList.remove("previously-highlighted");
		this.classList.add("highlighted");
		hover_img.src = this.id;
		hover_text.innerHTML = this.id;

hover_img.style.visibility = "visible";

//the following variables are technically editable, but place the image and text on the page- proceed with caution
		hover_text.style.right = 20+"px";
		hover_text.style.top = window.innerHeight-25+"px";

hover_img.style.top = window.innerHeight/20+"px";
		hover_img.style.left = window.innerWidth/4+"px";

//preloads images around the current image
		if (this.nextSibling != null){
			preloadImage(this.nextSibling.id)
		}

if (this.previousSibling != null){
			preloadImage(this.previousSibling.id)
		}
	}
}

//preload invisibly
function preloadImage(url)
{
    var img=new Image();
    img.src=url;
}

//expands directories
function show(element){

console.log(element)

var element = document.getElementById(element.name+'div');

for (f=0;f<element.children.length;f++){
		var check = element.children[f];
		if (check.style.display == "none" || check.style.display == ""){
			check.style.display = "block";
		}
		else {
			check.style.display = "none";
		}
	}
}

----

screenshot garden demo code was made by everest pipkin - make build your own screenshot garden at .

this code licensed under the ACSL v 1.4; license at anticapitalist.software

----

*/
</script>

again, this file needs to be named index.html and live in your base directory, in the same place as your .json and html.html files.

you can now write a little intro and customize the css/style if you want! (more on that below)

if you want to test your screenshot garden without uploading it online, you can start a localhost in this directory. for instance on a mac, type the following command into the terminal:

php -S localhost:8080

and then go to localhost:8080/ in your browser

once you're satisfied with how it looks, you can upload your screenshot garden to the internet.

to do this, you'll want to move everything inside your screenshot garden directory to a website directory. on neocities, where i am hosting my screenshot garden, this is easy - you can simply make a new site, go to 'edit site', and drag all the folders and files in.

alternatively, the neocities command line tool will push (sync) the entire folder for you. i find this much easier to use!

neocities has a great quickstart page about installing their CLI here.
on mac, you just need to run gem install neocities, or sudo gem install neocities. (on linux you'll need to install ruby first if it isn't already- follow the tutorial linked above).
once it is installed, simply again cd to the directory in the terminal and run

neocities push .

to sync the entire folder. (if you just type neocities into the terminal, you can get help)

your screenshot garden should now be online!

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"
done

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

license;

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

ANTI-CAPITALIST SOFTWARE LICENSE (v 1.4)

This is anti-capitalist software, released for free use by individuals and organizations that do not operate by capitalist principles.

Permission is hereby granted, free of charge, to any person or organization (the "User") obtaining a copy of this software and associated documentation files (the "Software"), to use, copy, modify, merge, distribute, and/or sell copies of the Software, subject to the following conditions:

1. The above copyright notice and this permission notice shall be included in all copies or modified versions of the Software.

2. The User is one of the following:
a. An individual person, laboring for themselves
b. A non-profit organization
c. An educational institution
d. An organization that seeks shared profit for all of its members, and allows non-members to set the cost of their labor

3. If the User is an organization with owners, then all owners are workers and all workers are owners with equal equity and/or equal vote.

4. If the User is an organization, then the User is not law enforcement or military, or working for or under either.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT EXPRESS OR IMPLIED WARRANTY OF ANY KIND, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

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

you can find me also on:
everest-pipkin.com
mastodon
twitter