Last active
June 15, 2018 13:02
-
-
Save dece/6ade177047653b987e81fe30a1ac1640 to your computer and use it in GitHub Desktop.
EmlGallery - Elementary Masonry & Lightbox Gallery - Generate JSON metadata with gallery-gen.go, serve gallery.html with your files for friends & family.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment