dece/gallery-gen.go

## gallery-gen.go
package main

import (
	"bufio"
	"encoding/json"
	"image"
	_ "image/jpeg"
	_ "image/png"
	"log"
	"os"
	"path/filepath"
)

// FileEntry contains informations for PowerSlide.
type FileEntry struct {
	Name    string `json:"src"`
	Width   int    `json:"w"`
	Height  int    `json:"h"`
	Caption string `json:"title"`
}

func main() {
	dir, err := os.Getwd()
	if err != nil {
		panic(err)
	}

	entries := buildEntries(dir)

	encodedJSON, err := json.MarshalIndent(entries, "", "  ")
	if err != nil {
		panic(err)
	}

	outputFile, err := os.Create(filepath.Join(dir, "data.json"))
	if err != nil {
		panic(err)
	}
	defer outputFile.Close()

	outputWriter := bufio.NewWriter(outputFile)
	_, err = outputWriter.Write(encodedJSON)
	if err != nil {
		panic(err)
	}
	outputWriter.Flush()
}

func buildEntries(root string) []FileEntry {
	var entries []FileEntry
	filepath.Walk(root, func(path string, info os.FileInfo, err error) error {
		ext := filepath.Ext(path)
		if !(ext == ".png" || ext == ".jpg" || ext == ".gif") {
			return nil
		}

		width, height := getImageDimensions(path)
		entries = append(entries, FileEntry{info.Name(), width, height, ""})
		return nil
	})
	return entries
}

func getImageDimensions(path string) (int, int) {
	file, err := os.Open(path)
	if err != nil {
		log.Println(err)
		return 0, 0
	}
	defer file.Close()

	config, _, err := image.DecodeConfig(file)
	if err != nil {
		log.Println(err)
		return 0, 0
	}

	return config.Width, config.Height
}

## gallery.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>EmlGallery</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        body {
            background: black;
        }
        /* 4 columns by default */
        .masonry {
            margin: auto;
            width: 1470px;
        }
        .masonry-item img {
            margin-bottom: 10px;
            width: 360px;
        }
        /* 3 columns on small desktop screens */
        @media only screen and (max-width: 1500px) {
            .masonry { width: 1100px; }
        }
        /* 2 columns on hybrid shit */
        @media only screen and (max-width: 1200px) {
            .masonry { width: 730px; }
        }
        /* 1 column on mobile */
        @media only screen and (max-width: 768px) {
            .masonry { width: 100%; }
            .masonry-item { width: 100%; }
            .masonry-item img { width: 100%; }
        }
    </style>

    <!-- jQuery -->
    <script src="/path/to/jquery.min.js"></script>

    <!-- Masonry & ImagesLoaded -->
    <script src="/path/to/masonry.pkgd.min.js"></script>
    <script src="/path/to/imagesloaded.pkgd.min.js"></script>

    <!-- Lightbox2 -->
    <link href="/path/to/lightbox.min.css" rel="stylesheet">
    <script src="/path/to/lightbox.min.js"></script>
</head>
<body>
    <div class="masonry">

    </div>

    <script>
        var dirname = path => path.replace(/\\/g,'/').replace(/\/[^\/]*$/, '');

        function initMasonry(json) {
            var $grid = $('.masonry');
            for (var i = 0; i < json.length; i++) {
                var entry = json[i];
                var $img = $(document.createElement('img'));
                $img.attr('src', entry.src);

                var $link = $(document.createElement('a'));
                $link.attr({
                    'href': entry.src,
                    'data-lightbox': 'gallery',
                    'data-title': entry.title,
                });
                $link.append($img);

                var $container = $(document.createElement('div'));
                $container.addClass('masonry-item');
                $container.append($link);

                $grid.append($container);
            }

            $grid.masonry({
                itemSelector: '.masonry-item',
                columnWidth: 360,
                gutter: 10,
            });

            $grid.imagesLoaded().progress(() => $grid.masonry('layout'));
        }

        var loc = dirname(location.pathname) + '/data.json';
        $(document).ready(() => {
            fetch(loc).then(response => response.json()).then(json => initMasonry(json));
        });
    </script>
</body>
</html>
	package main

	import (
	"bufio"
	"encoding/json"
	"image"
	_ "image/jpeg"
	_ "image/png"
	"log"
	"os"
	"path/filepath"
	)

	// FileEntry contains informations for PowerSlide.
	type FileEntry struct {
	Name string `json:"src"`
	Width int `json:"w"`
	Height int `json:"h"`
	Caption string `json:"title"`
	}

	func main() {
	dir, err := os.Getwd()
	if err != nil {
	panic(err)
	}

	entries := buildEntries(dir)

	encodedJSON, err := json.MarshalIndent(entries, "", " ")
	if err != nil {
	panic(err)
	}

	outputFile, err := os.Create(filepath.Join(dir, "data.json"))
	if err != nil {
	panic(err)
	}
	defer outputFile.Close()

	outputWriter := bufio.NewWriter(outputFile)
	_, err = outputWriter.Write(encodedJSON)
	if err != nil {
	panic(err)
	}
	outputWriter.Flush()
	}

	func buildEntries(root string) []FileEntry {
	var entries []FileEntry
	filepath.Walk(root, func(path string, info os.FileInfo, err error) error {
	ext := filepath.Ext(path)
	if !(ext == ".png" \|\| ext == ".jpg" \|\| ext == ".gif") {
	return nil
	}

	width, height := getImageDimensions(path)
	entries = append(entries, FileEntry{info.Name(), width, height, ""})
	return nil
	})
	return entries
	}

	func getImageDimensions(path string) (int, int) {
	file, err := os.Open(path)
	if err != nil {
	log.Println(err)
	return 0, 0
	}
	defer file.Close()

	config, _, err := image.DecodeConfig(file)
	if err != nil {
	log.Println(err)
	return 0, 0
	}

	return config.Width, config.Height
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>EmlGallery</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<style>
	body {
	background: black;
	}
	/* 4 columns by default */
	.masonry {
	margin: auto;
	width: 1470px;
	}
	.masonry-item img {
	margin-bottom: 10px;
	width: 360px;
	}
	/* 3 columns on small desktop screens */
	@media only screen and (max-width: 1500px) {
	.masonry { width: 1100px; }
	}
	/* 2 columns on hybrid shit */
	@media only screen and (max-width: 1200px) {
	.masonry { width: 730px; }
	}
	/* 1 column on mobile */
	@media only screen and (max-width: 768px) {
	.masonry { width: 100%; }
	.masonry-item { width: 100%; }
	.masonry-item img { width: 100%; }
	}
	</style>

	<!-- jQuery -->
	<script src="/path/to/jquery.min.js"></script>

	<!-- Masonry & ImagesLoaded -->
	<script src="/path/to/masonry.pkgd.min.js"></script>
	<script src="/path/to/imagesloaded.pkgd.min.js"></script>

	<!-- Lightbox2 -->
	<link href="/path/to/lightbox.min.css" rel="stylesheet">
	<script src="/path/to/lightbox.min.js"></script>
	</head>
	<body>
	<div class="masonry">

	</div>

	<script>
	var dirname = path => path.replace(/\\/g,'/').replace(/\/[^\/]*$/, '');

	function initMasonry(json) {
	var $grid = $('.masonry');
	for (var i = 0; i < json.length; i++) {
	var entry = json[i];
	var $img = $(document.createElement('img'));
	$img.attr('src', entry.src);

	var $link = $(document.createElement('a'));
	$link.attr({
	'href': entry.src,
	'data-lightbox': 'gallery',
	'data-title': entry.title,
	});
	$link.append($img);

	var $container = $(document.createElement('div'));
	$container.addClass('masonry-item');
	$container.append($link);

	$grid.append($container);
	}

	$grid.masonry({
	itemSelector: '.masonry-item',
	columnWidth: 360,
	gutter: 10,
	});

	$grid.imagesLoaded().progress(() => $grid.masonry('layout'));
	}

	var loc = dirname(location.pathname) + '/data.json';
	$(document).ready(() => {
	fetch(loc).then(response => response.json()).then(json => initMasonry(json));
	});
	</script>
	</body>
	</html>