added mixin and added lazy loading to interior hero

components/InteriorHero.vue

@@ -9,12 +9,11 @@
 </template>
 
 <script>
+import lazyBackgroundImageMixin from '~/mixins/lazyBackgroundImageMixin.js'
+
 export default {
+  mixins: [lazyBackgroundImageMixin],
   props: {
-    backgroundImage: {
-      type: String,
-      required: true
-    },
     title: {
       type: String,
       required: true
@@ -27,7 +26,7 @@ export default {
   },
   computed: {
     backgroundImageStyle: function () {
-      return `background-image: url('${this.backgroundImage}');`
+      return `background-image: url('${this.computedImageSrc}');`
     }
   }
 }

components/TimelineItem.vue

@@ -33,71 +33,38 @@
 </template>
 
 <script>
+import lazyBackgroundImageMixin from '~/mixins/lazyBackgroundImageMixin.js'
+
 export default {
+  mixins: [lazyBackgroundImageMixin],
   components: {
 
   },
   props: {
     item: {
       type: Object,
       required: true
-    },
-    imageSource: {
-      type: String,
-      required: true
-    },
-    loadingImage: {
-      type: String,
-      required: true
-    },
-    errorImage: {
-      type: String,
-      required: true
     }
   },
   data: function () {
     return {
-      imageState: 'loading',
-      asyncImage: new Image()
+
     }
   },
   mounted() {
-    if (this.loadingImage) {
-      this.$nextTick(() => {
-          this.fetchImage()
-      })
-    }
+
   },
   methods: {
-    fetchImage() {
-      this.asyncImage.onload = this.imageOnLoad
-      this.asyncImage.onerror = this.imageOnError
-      this.imageState = 'loading'
-      this.asyncImage.src = this.imageSource
-    },
-    imageOnLoad(success) {
-      this.imageState = 'loaded'
-    },
-    imageOnError(error) {
-      this.imageState = 'error'
-    }
+
   },
   computed: {
     backgroundImageStyle: function () {
       if (this.item.isTimePeriod) {
         return ''
       }
 
-      // return `background: linear-gradient(0deg, rgba(37, 41, 46), rgba(37, 41, 46, 0.6),rgba(37, 41, 46)), url('${this.item.backgroundImage}') center center / cover no-repeat;`
-
-      if (this.imageState === 'loading') {
-        return `background: linear-gradient(0deg, rgba(37, 41, 46), rgba(37, 41, 46, 0.6),rgba(37, 41, 46)), url('${this.loadingImage}') center center / cover no-repeat;`
-      }
-      if (this.imageState === 'error') {
-        return `background: linear-gradient(0deg, rgba(37, 41, 46), rgba(37, 41, 46, 0.6),rgba(37, 41, 46)), url('${this.errorImage}') center center / cover no-repeat;`
-      }
-      if (this.imageState === 'loaded') {
-        return `background: linear-gradient(0deg, rgba(37, 41, 46), rgba(37, 41, 46, 0.6),rgba(37, 41, 46)), url('${this.asyncImage.src}') center center / cover no-repeat;`
+      if (this.computedImageSrc) {
+        return `background: linear-gradient(0deg, rgba(37, 41, 46), rgba(37, 41, 46, 0.6),rgba(37, 41, 46)), url('${this.computedImageSrc}') top center / cover no-repeat;`
       }
 
       return ''
@@ -198,6 +165,7 @@ $primary-color-hover: scale-color($primary-color, $lightness: 32%);
 .timeline-item.event-hover {
   transition: all 0.5s ease-in-out;
   z-index: 2;
+  min-height:20em;
 }
 
 .timeline-item.event-hover:hover {

mixins/lazyBackgroundImageMixin.js

@@ -0,0 +1,60 @@
+
+export default {
+  props: {
+    imageSource: {
+      type: String,
+      required: true
+    },
+    loadingImage: {
+      type: String,
+      required: true
+    },
+    errorImage: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    fetchImage () {
+      this.asyncImage.onload = this.imageOnLoad
+      this.asyncImage.onerror = this.imageOnError
+      this.imageState = 'loading'
+      this.asyncImage.src = this.imageSource
+    },
+    imageOnLoad (success) {
+      this.imageState = 'loaded'
+    },
+    imageOnError (error) {
+      this.imageState = 'error'
+      console.error(error)
+    }
+  },
+  data: function () {
+    return {
+      imageState: 'loading',
+      asyncImage: new Image()
+    }
+  },
+  mounted: function () {
+    if (this.loadingImage) {
+      this.$nextTick(() => {
+        this.fetchImage()
+      })
+    }
+  },
+  computed: {
+    computedImageSrc: function () {
+      if (this.imageState === 'loading') {
+        return this.loadingImage
+      }
+      if (this.imageState === 'error') {
+        return this.errorImage
+      }
+      if (this.imageState === 'loaded') {
+        return this.asyncImage.src
+      }
+
+      return ''
+    }
+  }
+}

nuxt.config.js

@@ -33,7 +33,7 @@ export default {
   ** Plugins to load before mounting the App
   */
   plugins: [
-    
+
   ],
   /*
   ** Nuxt.js dev-modules

pages/events.vue

@@ -4,7 +4,10 @@
       <Navigation />
       <InteriorHero
         title="Events"
-        backgroundImage="https://images.unsplash.com/photo-1452626038306-9aae5e071dd3" />
+        imageSource="https://images.unsplash.com/photo-1452626038306-9aae5e071dd3"
+        loadingImage="https://images.unsplash.com/photo-1452626038306-9aae5e071dd3"
+        errorImage="https://images.unsplash.com/photo-1452626038306-9aae5e071dd3"
+         />
     </section>
 
     <div class="columns is-mobile">

pages/posts/index.vue

@@ -4,7 +4,10 @@
       <Navigation />
       <InteriorHero
         title="Posts"
-        backgroundImage="./images/hero-placeholder.jpg" />
+        imageSource="./images/hero-placeholder.jpg"
+        loadingImage="./images/hero-placeholder.jpg"
+        errorImage="./images/hero-placeholder.jpg" 
+        />
     </section>
 
     <div class="columns is-mobile">