From d96fc36ded8a7829f681cc596b86f92c70f45e9c Mon Sep 17 00:00:00 2001
From: ManjaroOne666 <git@gabbaell.co.uk>
Date: Thu, 10 Jan 2019 14:44:28 +0000
Subject: [PATCH] gallery thumb background images implemented

---
 components/GalleryPage.vue   | 4 ++++
 components/GalleryThumbs.vue | 9 +++++++++
 pages/galleries.vue          | 6 +++---
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/components/GalleryPage.vue b/components/GalleryPage.vue
index 406bc14..84e881f 100644
--- a/components/GalleryPage.vue
+++ b/components/GalleryPage.vue
@@ -57,6 +57,10 @@ export default {
     }
   },
 
+  mounted () {
+    window.addEventListener('resize', () => { this.imageViewerIsVisible = false })
+  },
+
   methods: {
     handleFeaturedClick (index) {
       this.activeRow = index
diff --git a/components/GalleryThumbs.vue b/components/GalleryThumbs.vue
index eed6b6b..cd4780b 100644
--- a/components/GalleryThumbs.vue
+++ b/components/GalleryThumbs.vue
@@ -19,6 +19,7 @@
           <li v-for="(image, imageIndex) in gallery.images"
               :ref="galleryIndex == 0 && imageIndex == 0 ? 'thumbContainer' : null"
               class="thumb-container"
+              :style="{ 'background-image': 'url(' + image.thumbUrl + ')' }"
               :key="galleryIndex + '.' + imageIndex + '.' + image.url"
               @click="$emit('thumbClick', galleryIndex, imageIndex)">
             <ThumbNav class="thumb-nav thumb-nav--left mobile-only"
@@ -173,6 +174,11 @@ export default {
   margin: 0;
 }
 
+.thumb-container {
+  background-size: cover;
+  background-position: center center;
+}
+
 @media (max-width: $bp__layout) {
   .mobile-hide {
     display: none;
@@ -198,6 +204,9 @@ export default {
     position: relative;
     height: calc(50vh - #{$site-menu__header-height / 2});
     width: 100vw;
+
+    background-size: cover;
+    background-position: center center;
   }
 
   .thumb-nav {
diff --git a/pages/galleries.vue b/pages/galleries.vue
index 2fa14ba..a4e14bd 100644
--- a/pages/galleries.vue
+++ b/pages/galleries.vue
@@ -20,9 +20,9 @@ export default {
           featuredImage: 'https://via.placeholder.com/600x400/665588/ffffff?text=Featured+Gallery+Zero',
           images: [
             { thumbUrl: 'https://via.placeholder.com/400x300/885566/ffffff', url: 'https://via.placeholder.com/1920x1080/885566/ffffff?text=Zero0' },
-            { thumbUrl: 'https://via.placeholder.com/400x300/668855/ffffff', url: 'https://via.placeholder.com/1920x1080/668855/ffffff?text=Zero1' },
-            { thumbUrl: 'https://via.placeholder.com/400x300/558866/ffffff', url: 'https://via.placeholder.com/1920x1080/558866/ffffff?text=Zero2' },
-            { thumbUrl: 'https://via.placeholder.com/400x300/886655/ffffff', url: 'https://via.placeholder.com/1920x1080/886655/ffffff?text=Zero3' }
+            { thumbUrl: 'https://via.placeholder.com/300x400/668855/ffffff', url: 'https://via.placeholder.com/1080x1920/668855/ffffff?text=Zero1' },
+            { thumbUrl: 'https://via.placeholder.com/400x400/558866/ffffff', url: 'https://via.placeholder.com/1200x1200/558866/ffffff?text=Zero2' },
+            { thumbUrl: 'https://via.placeholder.com/320x180/886655/ffffff', url: 'https://via.placeholder.com/1600x900/886655/ffffff?text=Zero3' }
           ]
         },
         { title: 'Gallery One',