Add photo gallery

docs/4.3-graphic-assets.md

@@ -10,23 +10,23 @@ navigation: 43
 
 [Download PDF](https://github.com/dweb-camp-2019/meshnet/blob/master/graphics/network-physical-map.pdf?raw=true)
 
-![thumbnail](thumbnails/network-physical-map.png)
+![thumbnail](thumbs/network-physical-map.png)
 
 ### Network Info Poster
 
 [Download PDF](https://github.com/dweb-camp-2019/meshnet/blob/master/graphics/network-info-poster.pdf?raw=true)
 
-![thumbnail](thumbnails/network-info-poster.png)
+![thumbnail](thumbs/network-info-poster.png)
 
 ### Network Steward Postcard
 
 [Download PDF](https://github.com/dweb-camp-2019/meshnet/blob/master/graphics/network-steward-postcard.pdf?raw=true)
 
-![thumbnail](thumbnails/network-steward-postcard-front.png)
-![thumbnail](thumbnails/network-steward-postcard-back.png)
+![thumbnail](thumbs/network-steward-postcard-front.png)
+![thumbnail](thumbs/network-steward-postcard-back.png)
 
 ### Network Steward Button
 
 [Download PDF](https://github.com/dweb-camp-2019/meshnet/blob/master/graphics/network-steward-button.pdf?raw=true)
 
-![thumbnail](thumbnails/network-steward-button.png)
+![thumbnail](thumbs/network-steward-button.png)

docs/4.4-photo-gallery.md

@@ -0,0 +1,5 @@
+---
+permalink: /gallery/2019/
+title: 4.4 Photo Gallery
+navigation: 44
+---

docs/Gemfile

@@ -1,2 +1,4 @@
 source "https://rubygems.org"
-gemspec
+gemspec
+
+gem 'jekyll-gallery-generator'

docs/_config.yml

@@ -16,3 +16,16 @@ exclude:
 sass:
   sass_dir: _sass
   style: compressed
+
+plugins:
+  - jekyll-gallery-generator
+
+# Configurations for ggreer/jekyll-gallery-generator
+gallery:
+  dir: gallery                         # Path to the gallery
+  symlink: false                       # false: copy images into _site. true: create symbolic links (saves disk space)
+  title: "4.4 Photo Gallery"           # Title for gallery index page
+  title_prefix: "4.4 Photo Gallery: "  # Title prefix for gallery pages. Gallery title = title_prefix + gallery_name
+  thumbnail_size:
+    x: 480                             # max width of thumbnails (in pixels)
+    y: 480                             # max height of thumbnails (in pixels)

docs/_layouts/gallery_index.html

@@ -0,0 +1,25 @@
+---
+layout: page
+---
+<style TYPE="text/css">
+.gallery-wrapper {
+  width: 35em;
+  text-align: center;
+  padding: 1em 0 4em 0;
+}
+.gallery-best-image{
+  max-height: 20em;
+  max-width: 20em;
+}
+</style>
+<h2 id="44-photo-gallery">4.4 Photo Gallery</h2>
+{% for gallery in page.galleries %}
+{% assign album_image = gallery['images'] | sort: 'name' | first %}
+<div class="gallery-wrapper">
+    <a href="{{ gallery['gallery'] }}">
+        <img class="gallery-best-image" src="{{ gallery['gallery'] }}/thumbs/{{ album_image.name }}">
+    </a>
+    <h3><a href="{{ gallery['gallery'] }}">{{ gallery["name"] }}</a></h3>
+    {{ gallery["images"] | size }} image{% if gallery["images"].size != 1 %}s{% endif %}
+</div>
+{% endfor %}

docs/_layouts/gallery_page.html

@@ -0,0 +1,31 @@
+---
+layout: page
+---
+<style TYPE="text/css">
+.gallery-image-wrapper {
+  height: 360px;
+  width: 400px;
+  display: inline-block;
+  margin: 1em;
+  position: relative;
+}
+.gallery-image {
+  margin: auto;
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  max-height: 100%;
+  max-width: 100%;
+}
+</style>
+<h2 id="44-photo-gallery">4.4 Photo Gallery</h2>
+<hr />
+{% assign sorted_images = page.images | sort: 'name' %}
+{% for image in sorted_images %}
+    <div class="gallery-image-wrapper">
+        <a name="{{ image.name }}"></a>
+        <a href="{{ image.name }}"{% if site.gallery.lightbox %} rel="lightbox[{{ page.gallery }}]"{% endif %}>
+            <img class="gallery-image" src="thumbs/{{ image.name }}" />
+        </a>
+    </div>
+{% endfor %}