[WIP] Add Reeperlord build showcase

_includes/image-gallery.html

@@ -0,0 +1,38 @@
+<!-- adapted from https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/gh-pages/_includes/image-gallery.html -->
+
+<script type="text/javascript" src="/assets/js/lightbox.js"></script>
+<link rel="stylesheet" href="/assets/css/lightbox.css">
+
+<style>
+  .image-gallery {overflow: auto; margin-left: -1%!important;}
+  .image-gallery a {float: left; display: block; margin: 0 0 1% 1%; width: 19%; text-align: center; text-decoration: none!important;}
+  .image-gallery a span {display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 3px 0;}
+  .image-gallery a img {width: 100%; display: block;}
+</style>
+
+<!--
+  This is a bit of a hack. First, we search for the thumbnails, then we strip "thumbnail/" to find the full-size file.
+  This avoids relying on a third-party image resizing service for thumbnails (and lets us make nicer thumbnails).
+  I did it this way because I couldn't find a nice way to *add* "thumbnail/" to the path of the full-size file using the template syntax.
+-->
+
+<div class="image-gallery">
+{% for file in site.static_files %}
+  {% if file.path contains include.folder and file.path contains "/thumbnail/" %}
+    {% if file.extname == '.jpg' or 
+      file.extname == '.jpeg' or 
+      file.extname == '.JPG' or 
+      file.extname == '.JPEG' %}
+
+      {% assign filenameparts = file.path | split: "/" %}
+      {% assign title = filenameparts | last | replace: file.extname,"" %}
+      {% assign full_file = file.path | replace: "thumbnail/","" %}
+
+      <a href="{{ full_file }}" title="{{ title }}">
+        <img src="{{ file.path }}" alt="{{ title }}" />
+        <span>{{ title }}</span>
+      </a>
+    {% endif %}
+  {% endif %}
+{% endfor %}
+</div>

_posts/2020-07-10-build-showcase-reeperlord.md

@@ -0,0 +1,17 @@
+---
+layout: post
+title: "Community Build Showcase: Reeperlord"
+author: MD
+---
+
+Today's build showcase features builds by our most recently appointed builder, Reeperlord!
+
+<!--more-->
+
+{% include image-gallery.html folder="/images/showcase/reeperlord/" %}
+
+These builds were all planned in creative but were fully built in survival!
+
+## Build showcase? What's all this about?
+
+To highlight the effort that goes into builds on the server, we've decided to start a regular feature where we showcase exceptional builds from players. We're always looking to showcase more builds, so if you see any exceptional builds that deserve a place on the build showcase, let us know in **#server-discussion** on Discord or fill out the [builder nomination form](/help/builder)!

assets/css/lightbox.css

@@ -0,0 +1,96 @@
+/* from https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/gh-pages/css/lightbox.css */
+
+#lightbox {width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.85); z-index: 9999999; line-height: 0; cursor: pointer; display: none;}
+#lightbox .img {
+    position: relative; 
+    top: 50%;
+    left: 50%;
+    -ms-transform: translateX(-50%) translateY(-50%);
+    -webkit-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+    max-width: 100%;
+    max-height: 100%;
+}
+#lightbox .img img {opacity: 0; pointer-events: none; width: auto;}
+@media screen and (min-width: 1200px) {
+    #lightbox .img {
+        max-width: 1200px;
+    }
+}
+@media screen and (min-height: 1200px) {
+    #lightbox .img {
+        max-height: 1200px;
+    }
+}
+#lightbox span {display: block; position: fixed; bottom: 13px; height: 1.5em; line-height: 1.4em; width: 100%; text-align: center; color: white; text-shadow:
+    -1px -1px 0 #000,
+    1px -1px 0 #000,
+    -1px 1px 0 #000,
+    1px 1px 0 #000;  
+}
+
+#lightbox span {display: none;}
+
+#lightbox .videoWrapperContainer {
+    position: relative; 
+    top: 50%;
+    left: 50%;
+    -ms-transform: translateX(-50%) translateY(-50%);
+    -webkit-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+    max-width: 900px;
+    max-height: 100%;
+}
+#lightbox .videoWrapperContainer .videoWrapper {
+    height: 0;
+    line-height: 0;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    padding-bottom: 56.333%; /* custom */
+    background: black;
+} 
+#lightbox .videoWrapper iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+    display: block;
+}   
+#lightbox #prev, #lightbox #next {height: 50px; line-height: 36px; display: none; margin-top: -25px; position: fixed; top: 50%; padding: 0 15px; cursor: pointer; text-decoration: none; z-index: 99; color: white; font-size: 60px;}
+#lightbox.gallery #prev, #lightbox.gallery #next {display: block;}
+#lightbox #prev {left: 0;}
+#lightbox #next {right: 0;}
+#lightbox #close {height: 50px; width: 50px; position: fixed; cursor: pointer; text-decoration: none; z-index: 99; right: 0; top: 0;}
+#lightbox #close:after, #lightbox #close:before {position: absolute; margin-top: 22px; margin-left: 14px; content: ""; height: 3px; background: white; width: 23px;
+-webkit-transform-origin: 50% 50%;
+-moz-transform-origin: 50% 50%;
+-o-transform-origin: 50% 50%;
+transform-origin: 50% 50%;
+/* Safari */
+-webkit-transform: rotate(-45deg);
+/* Firefox */
+-moz-transform: rotate(-45deg);
+/* IE */
+-ms-transform: rotate(-45deg);
+/* Opera */
+-o-transform: rotate(-45deg);
+}
+#lightbox #close:after {
+/* Safari */
+-webkit-transform: rotate(45deg);
+/* Firefox */
+-moz-transform: rotate(45deg);
+/* IE */
+-ms-transform: rotate(45deg);
+/* Opera */
+-o-transform: rotate(45deg);
+}
+#lightbox, #lightbox * {
+    -webkit-user-select: none;  
+    -moz-user-select: none;    
+    -ms-user-select: none;      
+    user-select: none;
+}

assets/js/lightbox.js

@@ -0,0 +1,143 @@
+// from https://raw.githubusercontent.com/jhvanderschee/jekyllcodex/gh-pages/js/lightbox.js
+
+function is_youtubelink(url) {
+    var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
+    return (url.match(p)) ? RegExp.$1 : false;
+}
+function is_imagelink(url) {
+    var p = /([a-z\-_0-9\/\:\.]*\.(jpg|jpeg|png|gif))/i;
+    return (url.match(p)) ? true : false;
+}
+function is_vimeolink(url,el) {
+    var id = false;
+    var xmlhttp = new XMLHttpRequest();
+    xmlhttp.onreadystatechange = function() {
+        if (xmlhttp.readyState == XMLHttpRequest.DONE) {   // XMLHttpRequest.DONE == 4
+            if (xmlhttp.status == 200) {
+                var response = JSON.parse(xmlhttp.responseText);
+                id = response.video_id;
+                console.log(id);
+                el.classList.add('lightbox-vimeo');
+                el.setAttribute('data-id',id);
+
+                el.addEventListener("click", function(event) {
+                    event.preventDefault();
+                    document.getElementById('lightbox').innerHTML = '<a id="close"></a><a id="next">&rsaquo;</a><a id="prev">&lsaquo;</a><div class="videoWrapperContainer"><div class="videoWrapper"><iframe src="https://player.vimeo.com/video/'+el.getAttribute('data-id')+'/?autoplay=1&byline=0&title=0&portrait=0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></div>';
+                    document.getElementById('lightbox').style.display = 'block';
+
+                    setGallery(this);
+                });
+            }
+            else if (xmlhttp.status == 400) {
+                alert('There was an error 400');
+            }
+            else {
+                alert('something else other than 200 was returned');
+            }
+        }
+    };
+    xmlhttp.open("GET", 'https://vimeo.com/api/oembed.json?url='+url, true);
+    xmlhttp.send();
+}
+function setGallery(el) {
+    var elements = document.body.querySelectorAll(".gallery");
+    elements.forEach(element => {
+        element.classList.remove('gallery');
+	});
+	if(el.closest('ul, p')) {
+		var link_elements = el.closest('ul, p').querySelectorAll("a[class*='lightbox-']");
+		link_elements.forEach(link_element => {
+			link_element.classList.remove('current');
+		});
+		link_elements.forEach(link_element => {
+			if(el.getAttribute('href') == link_element.getAttribute('href')) {
+				link_element.classList.add('current');
+			}
+		});
+		if(link_elements.length>1) {
+			document.getElementById('lightbox').classList.add('gallery');
+			link_elements.forEach(link_element => {
+				link_element.classList.add('gallery');
+			});
+		}
+		var currentkey;
+		var gallery_elements = document.querySelectorAll('a.gallery');
+		Object.keys(gallery_elements).forEach(function (k) {
+			if(gallery_elements[k].classList.contains('current')) currentkey = k;
+		});
+		if(currentkey==(gallery_elements.length-1)) var nextkey = 0;
+		else var nextkey = parseInt(currentkey)+1;
+		if(currentkey==0) var prevkey = parseInt(gallery_elements.length-1);
+		else var prevkey = parseInt(currentkey)-1;
+		document.getElementById('next').addEventListener("click", function() {
+			gallery_elements[nextkey].click();
+		});
+		document.getElementById('prev').addEventListener("click", function() {
+			gallery_elements[prevkey].click();
+		});
+	}
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+
+    //create lightbox div in the footer
+    var newdiv = document.createElement("div");
+    newdiv.setAttribute('id',"lightbox");
+    document.body.appendChild(newdiv);
+
+    //add classes to links to be able to initiate lightboxes
+    var elements = document.querySelectorAll('a');
+    elements.forEach(element => {
+        var url = element.getAttribute('href');
+        if(url) {
+            if(url.indexOf('vimeo') !== -1 && !element.classList.contains('no-lightbox')) {
+                is_vimeolink(url,element);
+            }
+            if(is_youtubelink(url) && !element.classList.contains('no-lightbox')) {
+                element.classList.add('lightbox-youtube');
+                element.setAttribute('data-id',is_youtubelink(url));
+            }
+            if(is_imagelink(url) && !element.classList.contains('no-lightbox')) {
+                element.classList.add('lightbox-image');
+                var href = element.getAttribute('href');
+                var filename = href.split('/').pop();
+                var split = filename.split(".");
+                var name = split[0];
+                element.setAttribute('title',name);
+            }
+        }
+    });
+
+    //remove the clicked lightbox
+    document.getElementById('lightbox').addEventListener("click", function(event) {
+        if(event.target.id != 'next' && event.target.id != 'prev'){
+            this.innerHTML = '';
+            document.getElementById('lightbox').style.display = 'none';
+        }
+    });
+
+    //add the youtube lightbox on click
+    var elements = document.querySelectorAll('a.lightbox-youtube');
+    elements.forEach(element => {
+        element.addEventListener("click", function(event) {
+            event.preventDefault();
+            document.getElementById('lightbox').innerHTML = '<a id="close"></a><a id="next">&rsaquo;</a><a id="prev">&lsaquo;</a><div class="videoWrapperContainer"><div class="videoWrapper"><iframe src="https://www.youtube.com/embed/'+this.getAttribute('data-id')+'?autoplay=1&showinfo=0&rel=0"></iframe></div>';
+            document.getElementById('lightbox').style.display = 'block';
+
+            setGallery(this);
+        });
+    });
+
+    //add the image lightbox on click
+    var elements = document.querySelectorAll('a.lightbox-image');
+    elements.forEach(element => {
+        element.addEventListener("click", function(event) {
+            event.preventDefault();
+            document.getElementById('lightbox').innerHTML = '<a id="close"></a><a id="next">&rsaquo;</a><a id="prev">&lsaquo;</a><div class="img" style="background: url(\''+this.getAttribute('href')+'\') center center / contain no-repeat;" title="'+this.getAttribute('title')+'" ><img src="'+this.getAttribute('href')+'" alt="'+this.getAttribute('title')+'" /></div><span>'+this.getAttribute('title')+'</span>';
+            document.getElementById('lightbox').style.display = 'block';
+
+            setGallery(this);
+        });
+    });
+
+});