Panel-Block: Access related fields

Hi,

I’m using an own panel block for images (here: “image-extended”) with more fields and need to access actual field-data of the image (e.g. “caption”) in the panel block. Access of the image-url is working, that’s not the problem (as you can see in the code below).

The used blueprint for images (/site/blueprints/files/image.yml) has basic fields like caption, alternative text, copyright. Basically it is only META-Data.

This is /site/plugins/this-project-block-image-extended/index.js:

panel.plugin("this-project/block-image-extended", {
  blocks: {
    "image-extended": {
      computed: {
        caption() {
          /* Please help: How to access the field "caption" from the image ? */
        },
        src() {
          if (this.content.image[0] && this.content.image[0].url) {
            return this.content.image[0].url;
          }
          return false;
        }
      },
      template: `
        <figure @dblclick="open">
          <img v-if="src" v-bind:src="src">
          <caption v-if="caption"><!-- Also please help --></caption>
        </figure>
      `
    }
  }
});

Any help?

To get more information about the file, check out: Creating a custom block type from scratch | Kirby CMS

1 Like

@pixelijn: Thank you for the link, didn’t stumble upon it before. Got it running.