:sparkles: fixing gallery to work with new endpoint

vue-theme/src/components/gallery.vue

@@ -1,12 +1,11 @@
 <template lang="pug">
 .gallery.active.f-col.center
     button(@click="hideGallery").hide hide
-    p {{ imageIds }}
-    p image: {{ imageIds[selected] }}
-    ul
-        li(v-for="(image, i) of images" :class="{ active: i === selected }")
-            .image-wrapper.f-col.center
-                img(:src="image")
+
+    figure.f-col.center
+        img(v-if="selectedImageUrl" :src="selectedImageUrl")
+        p placeholder caption
+
     .controls.f-row
         button(@click="prev") left
         .f-grow
@@ -18,11 +17,21 @@ export default {
     props: {
         imageIds: { type: Array, required: true },
         activeImageIndex: { type: Number, default: 0 },
-        activeGalleryIndex: { type: Number },
+        imageSizes: { required: true }
     },
     data() { 
         return {
-            selected: -1
+            selected: 0
+        }
+    },
+    computed:{
+        selectedImageId() {
+            return this.imageIds[this.selected]
+        },
+        selectedImageUrl() {
+            const image = this.imageSizes[this.selectedImageId]
+            if(!image) return
+            return image.large
         }
     },
     methods: {
@@ -82,18 +91,7 @@ export default {
             z-index: 1011
         button.hide
             z-index: 1100
-        ul
-            list-style: none
-            li
-                display: none
-                &.active
-                    display: block
-                .image-wrapper
-                    height: 100%
-                    width: 50vw
-                    background-color: yellow
-                h1
-                    color: green
+
         .controls
             position: absolute
             width: 100vw

vue-theme/src/pages/single.vue

@@ -8,7 +8,7 @@
 
         section(v-if="post")
             h4 {{ post.title }}
-            p {{ activeGalleryIndex }}
+
             .block-wrapper(v-for="(block, i) in post.blocks")
                     //- ?: are objects are always gallery blocks
                     .gallery.block(v-if="typeof block === 'object'")
@@ -19,20 +19,20 @@
                         //- Fullscreen gallery
                         gallery(
                             v-if="activeGalleryIndex == (i - 1)"
-                            :activeGalleryIndex="activeGalleryIndex"
                             :image-ids="post.galleries[block.gallery].ids"
                             :activeImageIndex="activeImageIndex"
                             v-on:close="activeGalleryIndex = -1"
+                            :image-sizes="post.attached"
                         )
 
                     //- Just a regular block
                     .block(v-else v-html="block")
 
-    //- sidebar(v-if="sidebar" :type="`${type}`")
-    //-     .shadow
-    //-         h1.t-up single slot
-    //-         div
-    //-             p body whatever
+    sidebar(v-if="sidebar" :type="`${type}`")
+        .shadow
+            h1.t-up single slot
+            div
+                p body whatever
 </template>
 
 <script>
@@ -100,6 +100,14 @@ export default {
 
             const json = JSON.parse(post.hero)
             this.$store.commit('SET_HERO', json)
+        },
+        async checkAndSetImages(posts) {
+            const post = posts[this.$route.params.slug]
+            if(!post || ! post.attached) return
+
+            const imagesAttached = post.attached
+            await this.$store.dispatch(`getMediaById`, imagesAttached)
+            console.log(this.$store.media)
         }
     },
     watch: {
@@ -108,11 +116,12 @@ export default {
             // this.checkForImages(newVal)
             
             this.checkAndSetHero(newVal)
+            this.checkAndSetImages(newVal)
         }
     },
     created() {
         let type = convertTitleCase(this.$route.params.type)
-        this.$store.dispatch(`getMediaById`, [7])
+        
         if(!this[`all{type}Loaded`]) {
             // console.log('Retrieving...', type)
             this.$store.dispatch(`getAll${type}`)

vue-theme/src/utils/api.js

@@ -20,7 +20,7 @@ export default {
             }).catch(e => { cb(e) })
         }
     },
-    getSingleMedia(id) {
+    getSingleMedia(id, cb) {
         axios.get(SETTINGS.API_MEDIA_PATH + `${id}`).then(response => {
             cb(response.data)
         }).catch(e => { cb(e) })