diff options
| -rw-r--r-- | .gitignore | 3 | ||||
| -rw-r--r-- | README.md | 31 | ||||
| -rwxr-xr-x | bp | 36 | ||||
| -rw-r--r-- | index.html | 88 |
4 files changed, 158 insertions, 0 deletions
diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..21bd3e1 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +# Images +*.jpg +*.png diff --git a/README.md b/README.md new file mode 100644 index 0000000..25981f1 --- /dev/null +++ b/README.md @@ -0,0 +1,31 @@ +Ben's Photostream (BP) +====================== +Minimal static photo-gallery generator. + +Photo galleries on the web are quite bloated. They use more javascript than +they would need to accomplish something extremely simple: display images. BP +is a simple shell script which generates a static webpage displaying a photo +gallery using a given folder. Photos are displayed in a relatively +chronological order from the date of the images creation. + +Usage: +------ + ++ Set the `photodir` variable to the folder where your photos are stored. All +photos should be at the root of this folder as BP doesn't search for images +recursively. + ++ Set the `galleryfile` variable to the html file in which you want the gallery +to appear. + ++ Make sure your `galleryfile` has the following lines somewhere (not having +them will lead to this file being erased): + +``` +<!-- GB --> + +<!-- GE --> +``` + ++ For insight into how the css styling should be configured, please consult the +included `index.html` file @@ -0,0 +1,36 @@ +#!/bin/sh + +photodir="stream" +galleryfile="index.html" + +bfile="$(sed '/<!-- GB -->/q' $galleryfile )" +efile="$(sed '1,/<!-- GE -->/d' $galleryfile )" + +perfour() { + # One out of every five lines: + batch="$(awk 'NR == 1 || NR % 5 == 0' - )" + # Add the html fluff: + list="$( + for i in $batch; do + base="$(echo "$i" | cut -f 1 -d "." )" + printf "\t\t<img src=\"$photodir/$i\" alt=\"$base\">\n" + done + )" + printf "\t<div class=\"column\">\n$list\n\t</div>" + +} + +all="$(ls -t $photodir)" +col1="$(echo "$all" | perfour)" +all="$(echo "$all" | sed '1d' )" +col2="$(echo "$all" | perfour)" +all="$(echo "$all" | sed '1d' )" +col3="$(echo "$all" | perfour)" +all="$(echo "$all" | sed '1d' )" +col4="$(echo "$all" | perfour)" + +gallery="$(printf "<div class=\"gallery\">\n$col1\n$col2\n$col3\n$col4\n</div>\n<!-- GE -->\n")" + +echo "$bfile +$gallery +$efile" > index.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..e902ae4 --- /dev/null +++ b/index.html @@ -0,0 +1,88 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width"> + <title>Photo Gallery - Chausse Benjamin</title> + </head> + <body> + <h1>My Photo Gallery</h1> + <p> + I like taking pictures every once in a while. Enjoy ;) + </p> + +<!-- GB --> +<div class="gallery"> + <div class="column"> + <img src="stream/_MG_6925.jpg" alt="_MG_6925"> + <img src="stream/_MG_6909.jpg" alt="_MG_6909"> + </div> + <div class="column"> + <img src="stream/_MG_6915.jpg" alt="_MG_6915"> + <img src="stream/_MG_6897.jpg" alt="_MG_6897"> + </div> + <div class="column"> + <img src="stream/_MG_6922.jpg" alt="_MG_6922"> + <img src="stream/_MG_6890.jpg" alt="_MG_6890"> + </div> + <div class="column"> + <img src="stream/_MG_6913.jpg" alt="_MG_6913"> + <img src="stream/_MG_6888.jpg" alt="_MG_6888"> + </div> +</div> +<!-- GE --> + + </body> + +<style> +* { + box-sizing: border-box; +} + +.header { + text-align: center; + padding: 32px; +} + +.gallery { + display: -ms-flexbox; /* IE10 */ + display: flex; + -ms-flex-wrap: wrap; /* IE10 */ + flex-wrap: wrap; + padding: 0 4px; +} + +/* Create four equal columns that sits next to each other */ +.column { + -ms-flex: 25%; /* IE10 */ + flex: 25%; + max-width: 25%; + padding: 0 4px; +} + +.column img { + margin-top: 8px; + vertical-align: middle; + width: 100%; +} + +/* Responsive layout - makes a two column-layout instead of four columns */ +@media screen and (max-width: 800px) { + .column { + -ms-flex: 50%; + flex: 50%; + max-width: 50%; + } +} + +/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ +@media screen and (max-width: 600px) { + .column { + -ms-flex: 100%; + flex: 100%; + max-width: 100%; + } +} +</style> + +</html> |