diff --git a/_includes/image-gallery.html b/_includes/image-gallery.html new file mode 100644 index 0000000..0aca8db --- /dev/null +++ b/_includes/image-gallery.html @@ -0,0 +1,38 @@ + + + + + + + + + +
+{% 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/","" %} + + + {{ title }} + {{ title }} + + {% endif %} + {% endif %} +{% endfor %} +
\ No newline at end of file diff --git a/_posts/2020-07-10-build-showcase-reeperlord.md b/_posts/2020-07-10-build-showcase-reeperlord.md new file mode 100644 index 0000000..e4762b2 --- /dev/null +++ b/_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! + + + +{% 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)! diff --git a/assets/css/lightbox.css b/assets/css/lightbox.css new file mode 100644 index 0000000..1a4e199 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/assets/images/showcase/reeperlord/Castle.jpg b/assets/images/showcase/reeperlord/Castle.jpg new file mode 100644 index 0000000..1ed11b1 Binary files /dev/null and b/assets/images/showcase/reeperlord/Castle.jpg differ diff --git a/assets/images/showcase/reeperlord/Castle.png b/assets/images/showcase/reeperlord/Castle.png new file mode 100644 index 0000000..df52145 Binary files /dev/null and b/assets/images/showcase/reeperlord/Castle.png differ diff --git a/assets/images/showcase/reeperlord/Church of Bread.jpg b/assets/images/showcase/reeperlord/Church of Bread.jpg new file mode 100644 index 0000000..aee2fab Binary files /dev/null and b/assets/images/showcase/reeperlord/Church of Bread.jpg differ diff --git a/assets/images/showcase/reeperlord/Church of Bread.png b/assets/images/showcase/reeperlord/Church of Bread.png new file mode 100644 index 0000000..f75f6c0 Binary files /dev/null and b/assets/images/showcase/reeperlord/Church of Bread.png differ diff --git a/assets/images/showcase/reeperlord/Palace.jpg b/assets/images/showcase/reeperlord/Palace.jpg new file mode 100644 index 0000000..376a59a Binary files /dev/null and b/assets/images/showcase/reeperlord/Palace.jpg differ diff --git a/assets/images/showcase/reeperlord/Palace.png b/assets/images/showcase/reeperlord/Palace.png new file mode 100644 index 0000000..5757ca3 Binary files /dev/null and b/assets/images/showcase/reeperlord/Palace.png differ diff --git a/assets/images/showcase/reeperlord/Village.jpg b/assets/images/showcase/reeperlord/Village.jpg new file mode 100644 index 0000000..6632c1e Binary files /dev/null and b/assets/images/showcase/reeperlord/Village.jpg differ diff --git a/assets/images/showcase/reeperlord/Village.png b/assets/images/showcase/reeperlord/Village.png new file mode 100644 index 0000000..9a76fc9 Binary files /dev/null and b/assets/images/showcase/reeperlord/Village.png differ diff --git a/assets/images/showcase/reeperlord/thumbnail/Castle.jpg b/assets/images/showcase/reeperlord/thumbnail/Castle.jpg new file mode 100644 index 0000000..b493898 Binary files /dev/null and b/assets/images/showcase/reeperlord/thumbnail/Castle.jpg differ diff --git a/assets/images/showcase/reeperlord/thumbnail/Church of Bread.jpg b/assets/images/showcase/reeperlord/thumbnail/Church of Bread.jpg new file mode 100644 index 0000000..475c3ec Binary files /dev/null and b/assets/images/showcase/reeperlord/thumbnail/Church of Bread.jpg differ diff --git a/assets/images/showcase/reeperlord/thumbnail/Palace.jpg b/assets/images/showcase/reeperlord/thumbnail/Palace.jpg new file mode 100644 index 0000000..603b8ef Binary files /dev/null and b/assets/images/showcase/reeperlord/thumbnail/Palace.jpg differ diff --git a/assets/images/showcase/reeperlord/thumbnail/Village.jpg b/assets/images/showcase/reeperlord/thumbnail/Village.jpg new file mode 100644 index 0000000..dd2ada0 Binary files /dev/null and b/assets/images/showcase/reeperlord/thumbnail/Village.jpg differ diff --git a/assets/js/lightbox.js b/assets/js/lightbox.js new file mode 100644 index 0000000..3abdd47 --- /dev/null +++ b/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 = '
'; + 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 = '
'; + 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 = '
'+this.getAttribute('title')+'
'+this.getAttribute('title')+''; + document.getElementById('lightbox').style.display = 'block'; + + setGallery(this); + }); + }); + +}); \ No newline at end of file