:recycle: tweaking endpoints to add galleries for single image blocks | tweaking frontend to accomodate new single image galleries

plugins/cia-endpoints/includes/class.make-endpoint.php

@@ -62,30 +62,6 @@ class Make_Endpoint_For extends WP_REST_Controller {
         return new WP_REST_Response( $this->prepare_all_items_for_response($args), 200 );
     }
 
-    private function _getAttachments($item, $galleries) {
-        // Get media
-        $desiredSizes = ['thumbnail', 'medium', 'large', 'full'];
-        $all_image_ids_in_gallery = array();
-        $all_image_ids = array();
-        foreach ( $galleries as $gallery ) {
-            array_push( $all_image_ids_in_gallery, $gallery[attrs][ids] );
-        }
-        foreach ( $all_image_ids_in_gallery as $ids ) {
-            foreach ( $ids as $id ) {
-                array_push($all_image_ids, $id);
-            }
-        }
-        $attachment_map = array();
-        foreach ( $all_image_ids as $id ) {
-            $imageSizes = array();
-            foreach ( $desiredSizes as $size ) {
-                $imageSizes[$size] = wp_get_attachment_image_url( $id, $size );
-            }
-            // store size:url map under image id
-            $attachment_map[$id] = $imageSizes;
-        }
-        return $attachment_map;
-    }
     public function prepare_single_item_for_response( $args ) {
         $collection = array();
 
@@ -95,21 +71,14 @@ class Make_Endpoint_For extends WP_REST_Controller {
 
             // Get those Block!
             $filtered[blocks] = get_rearrange_blocks(
-                parse_blocks( $item->post_content )
+                parse_blocks($item->post_content)
             );
 
-            // Galleries From blocks
-            $media_ids = array();
-            foreach ( get_attached_media( '', $item->ID ) as $attached_media ):
-                array_push($media_ids, $attached_media->ID);
-            endforeach;
-
             $filtered[galleries] = get_ids_from_gallery_block(
-                parse_blocks( $item->post_content )
+                parse_blocks($item->post_content)
             );
 
-            // Find all image info
-            $filtered[attached] = $this->_getAttachments( $item, $filtered[galleries] );
+            $filtered[attached] = get_images_from_content($item->post_content);
 
             // For your hero URL
             $filtered[hero] = get_post_meta( $item->ID, 'hero_header', true );
@@ -129,9 +98,6 @@ class Make_Endpoint_For extends WP_REST_Controller {
         foreach( get_posts($args) as $item ) {
             $filtered = default_post_format( $item, true );
 
-            // Find all image info
-            $filtered[attached] = $this->_getAttachments( $item, $filtered[galleries] );
-
             // For your hero URL
             $filtered[hero] = get_post_meta( $item->ID, 'hero_header', true );
 

plugins/cia-endpoints/includes/reformat-blocks.php

@@ -18,9 +18,34 @@
         $parsed_blocks = array();
         foreach ($blocks as $block) {
             if($block[blockName] === "core/gallery") {
-                array_push($parsed_blocks, $block);
+                array_push($parsed_blocks, $block[attrs]);
+            } elseif ($block[blockName] === "core/image") {
+                $ids = [];
+                $galleryFormat = [];
+                array_push($ids, $block[attrs][id]);
+                $galleryFormat[ids] = $ids;
+                $galleryFormat[columns] = 1;
+                $galleryFormat[linkTo] = 'none';
+                array_push($parsed_blocks, $galleryFormat);
             }
         }
         return $parsed_blocks;
     }
+    function get_images_from_content($content) {
+        $parse_images = array();
+
+        $dom = new DOMDocument();
+        @ $dom->loadHTML($content);
+        $images = $dom->getElementsByTagName('img');
+
+        foreach ($images as $image) {
+            if($image->getAttribute('data-id')) {
+                $parse_images[$image->getAttribute('data-id')] = $image->getAttribute('src');
+            } else {
+                $class_pieces = explode("-", $image->getAttribute('class'));
+                $parse_images[end($class_pieces)] = $image->getAttribute('src');
+            }
+        }
+        return $parse_images;
+    }
 ?>

vue-theme/src/components/content-block/block.vue

@@ -10,8 +10,10 @@ figure.block.embed(v-if="block[0].blockName == 'core/embed'")
     .not-youtube(v-else)
         p not youtube: {{ block[0].attrs }}
 
-rblock(v-else-if="typeof block === 'object'" :block="block")
-        
+//- Block clicking on certain block elements
+//- so we can choose when to open the gallery
+rblock(v-else-if="typeof block === 'object'" :block="block" @click.prevent.stop="openGallery")
+
 .block.single(v-else)
     .single--content(v-html="block")
 </template>
@@ -27,12 +29,15 @@ export default {
     methods: {
         fixYoutubeUrl(url) {
             let videoUid = url.split('https://youtu.be/').filter(pieces => pieces.length > 0)[0]
-            
+
             if(!videoUid) {
                 videoUid = url.split('https://www.youtube.com/watch?v=').filter(pieces => pieces.length > 0)[0]
             }
-            
+
             return `https://www.youtube.com/embed/${videoUid}`
+        },
+        openGallery(e) {
+            this.$emit('open-gallery', e.target)
         }
     },
     data() {

vue-theme/src/components/gallery.vue

@@ -2,27 +2,26 @@
 .gallery.active.f-col.center
     button(@click="hideGallery").hide hide gallery &#x25B2
     figure.f-col.center
-        img(v-if="Object.values(images).length > 0" :src="Object.values(images)[selected]['large']")
-        p active: {{ selected }}        
+        p {{images}}
+        img(:src="Object.values(images)[selected]")
+        p active: {{ selected }}
         .titledesc.t-left
             h2 Title goes here: create responsive designs that fit different screen sizes
             p Description goes here: London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
     .controls.f-row
         button(v-if="selected > 0" @click="prev") &#x25C0prev
-        .f-grow 
+        .f-grow
         button(v-if="selected < Object.values(images).length - 1" @click="next") next &#x25B6
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-
 export default {
     props: {
         activeImageIndex: { type: Number, required: true, default: 0 },
         images: { type: Object, required: true }
     },
-    data() { 
+    data() {
         return {
             selected: 0
         }
@@ -71,6 +70,7 @@ export default {
 @import '../sss/variables.sss'
 
 .gallery
+    overflow: hidden
     .wrap
         /* width: 60vw */
     &.active
@@ -103,8 +103,8 @@ export default {
                 max-width: 80vw
                 bottom: 1vh
                 background-color: rgba(255, 255, 255, 0.6)
-                padding: 4px 
-                text-align: left 
+                padding: 4px
+                text-align: left
                 h2, p
                     color: $cia_black
         .controls

vue-theme/src/pages/single.vue

@@ -1,5 +1,7 @@
 <template lang="pug">
 .page--single.f-row.between
+    gallery(v-if="activeGalleryIndex >= 0" :activeImageIndex="activeImageIndex" :images="imagesInGallery" @close="closeGallery")
+
     article(v-if="!post")
         header
             p loading...
@@ -14,7 +16,7 @@
                 p start: {{ dateFrom(post.start) }}
                 p end: {{ dateFrom(post.end) }}
 
-        block.post-single.block-wrapper(v-for="(block, index) in post.blocks" :block="block" :key="`block-${index}`")
+        block.post-single.block-wrapper(v-for="(block, index) in post.blocks" :block="block" @open-gallery="openGallery" :key="`block-${index}`")
 
         credits(v-if="type === 'episodes'" :post="post")
 
@@ -72,7 +74,8 @@ export default {
         },
 
         idsForGallery() {
-            return this.post.galleries[this.activeGalleryIndex].attrs.ids
+            if(!this.post || this.activeGalleryIndex < 0) return []
+            return this.post.galleries[this.activeGalleryIndex].ids
         },
         /**
          * We need a convenient way to get all the images
@@ -82,12 +85,9 @@ export default {
          */
         imagesInGallery() {
             if(!this.activeGalleryIndex < 0) return {}
-            // Create a map of images by their ID
-            // {
-            //     imageId: { 'thumbnail': url, 'large': url }
-            // }
+
             return this.idsForGallery.reduce((imageMap, id) => {
-                imageMap[id] = this.post.attached[id]
+                imageMap[id] = this.post.attached[parseInt(id)]
                 return imageMap
             }, {})
         },
@@ -103,23 +103,29 @@ export default {
         }
     },
     methods: {
-        getImageIdsForGallery(galleryIndex) {
-            console.log(galleryIndex)
-            return galleryIndex >= 0 ? this.post.galleries[galleryIndex].attrs.ids : []
-        },
         /**
          * We set the active gallery to the index.
          * Everything kicks off when activeGallery
          * is set. We also need to set the activeImageID
          * to the image clicked
-         * @param {number} galleryIndex
-         * @param {string} imageID
+         * @param {string} imageInfo
          */
-        openGallery(galleryIndex, imageID) {
-            this.activeGalleryIndex = galleryIndex
-            this.activeImageID = imageID ? imageID : 0
+        openGallery(imageInfo) {
+            const byIndex = this.post.galleries.reduce((byIndex, gallery, index) => {
+                byIndex[index] = gallery.ids
+                return byIndex
+            }, {})
+            let matchingIndex = 0
+            Object.keys(byIndex).forEach(galleryIndex => {
+                if(byIndex[galleryIndex].includes(parseInt(imageInfo.dataset.id))) matchingIndex = galleryIndex
+            })
+            this.activeGalleryIndex = matchingIndex
+            this.activeImageID = imageInfo.dataset.id ? parseInt(imageInfo.dataset.id) : parseInt(imageInfo.className.split('-').pop())
+        },
+        closeGallery() {
+            this.activeGalleryIndex = -1
+            this.activeImageID = -1
         },
-
         /**
          * Everytime the posts object changes
          * we use this to set a new HERO
@@ -155,11 +161,14 @@ export default {
             if(!this[`all${type}Loaded`] && allPostsOfType.length < 1) {
                 const res = await this.$store.dispatch(`getAll${type}`)
                 allPostsOfType = res
-                console.log(`reloaded ${type}...`)
+                // console.log(`reloaded ${type}...`)
             }
+
+            if(Object.values(allPostsOfType).length < 1) return
             const singlePostData = Object.values(allPostsOfType).filter(post => post.slug == this.$route.params.slug)[0]
 
             if(!singlePostData) return
+
             await this.$store.dispatch(`getSingle${dePluralize(type)}`, singlePostData.id)
         }
     },
@@ -168,7 +177,6 @@ export default {
             this.checkAndSetHero(newVal)
         },
         $route(newVal, oldVal) {
-            console.log('route changed...')
             this.loadPostData()
         }
     },

vue-theme/src/store/index.js

@@ -14,7 +14,7 @@ import exhibitions from './modules/exhibition'
 
 const debug = process.env.NODE_ENV !== 'production'
 
-// Vue.config.devtools = true 
+// Vue.config.devtools = true
 
 // Current page state
 const state = {
@@ -24,6 +24,7 @@ const state = {
     text: 'sample hero text',
     playbutton: true
   },
+  currentGallery: null,
   view: 'list'
 }
 
@@ -35,6 +36,12 @@ const mutations = {
       state.hero.text = hero
     }
   },
+  SET_GALLERY(state, idList) {
+    state.gallery = idList
+  },
+  CLEAR_GALLERY(state) {
+    state.gallery = null
+  }
 }
 
 const store = new Vuex.Store({