Custom preview for block with image upload breaking on creation

Kirby 3 Solved ✅
1

i’m creating a preview plugin for a custom block that has 2 columns, one of which is an image, and i continuously run into the problem of the entire blocks field crashing when i add a new empty custom block, but the one i had previously configured works fine.
js:

panel.plugin("qi-docs/image-plus-text-block", {
  blocks: {
    "image-plus-text":
    {
      methods: {
        plcmnt: function(layout){
          return "flex-direction: " + ("left".localeCompare(layout) == 0 ? "row-reverse" : "row");
        }
      },
      template: `
      <div class="row" :style="plcmnt(content.layout)">
        <div class="column text-column">
        <div v-html="content.text"/>
        </div>
        <div class="column image-column" @click="open">
          <img :src="typeof content.image != 'undefined' ? content.image[0].url : 'image not found'">
        </div>
      </div>
    `
  }
  }
});

css:

.k-block-type-image-plus-text .row{
  display: flex;
}
.k-block-type-image-plus-text .text-column{
  display: flex;
  flex-wrap: nowrap;
}
.k-block-type-image-plus-text .image-column{
  display: flex;
}
.k-block-type-image-plus-text img{
  align-self: center;
  flex: 0 0 auto;
}

php:

<?php

Kirby::plugin('qi-docs/image-plus-text-block', []);

i get a “Cannot read property "open" of undefined” error when i try to create a new image-plus-text block, and when i reload after that, it’s changed to a “Cannot read property "url" of undefined” error. i have pretty much zero experience with vue, so it’s probably the js file somehow, but i’m having trouble figuring out what’s actually wrong.

2

I think its because until you edit the fields, the preview has nothing to work with until you save, which is why the first one works.

In my video preview block, which is for adding local videos, i used a computed property to solve this, and v-if.

panel.plugin("woo/localvideo", {
  blocks: {
    localvideo: {
      computed: {
        video() {
          return this.content.vidfile.length === 0 ? false : this.content.vidfile[0].url;
        }
      },
      template: `
        <div @click="open">          
          <video v-if="video" autoplay muted loop>
            <source :src="video" type="video/mp4">
            <p>Your Browser does not support video<p>
          </video>
          <div v-else>No video selected yet</div>
        <div> 
      `
    }
  }
});

It checks if the “vidfile” field has a value yet. If it does, it displays a preview of the video in the block. If it does not, you see the No video selected message.

3 Likes
3

you’ve inadvertently solved this AND another issue: i didn’t know how to access the content object within computed properties. Thanks!

1 Like