Hi everybody,
I have built a custom panel field plugin that allows me to display an image. The content of the image is written to the content file via an api in form of a bas64 string.
The image is a screenshot taken during the build process on another platform and is then saved to Kirby into a structure field alongside a product name, version and build number.
The image can be downloaded via a download button and i would like to put together the download’s name using the product name, version and build number.
How can I access the value of the sibling fields?
I tried a few approaches to no avail:
let productname = this.$parent.data.productname;
OR
this.$store.getters["content/values"]()['myField']
These were stabs in the dark since I could not find any documentation on the patterns.
Here is the code of the index.js file:
panel.plugin("myproduct/base64image", {
fields: {
base64image: {
props: {
value: String
},
computed: {
imageSrc() {
return this.value && this.value.startsWith("data:image")
? this.value
: `data:image/png;base64,${this.value}`;
},
screenShotTitle() {
let productname = this.$parent.data.productname;
let version = this.$parent.data.version;
let buildnumber = this.$parent.data.buildnumber;
// // Combine the fields to form a title
let title = `${productname}_${version}_${buildnumber}`;
return title;
}
},
methods: {
downloadImage() {
if (!this.imageSrc) return;
const safeTitle = this.screenShotTitle.replace(/[^a-zA-Z0-9-_]/g, "_");
const link = document.createElement("a");
link.href = this.imageSrc;
link.download = `${safeTitle}-${new Date().toISOString().replace(/[:.]/g, "-")}.png`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
},
template: `
<div>
<img v-if="imageSrc" :src="imageSrc" alt="Base64 Image"/>
<p v-else>No image available</p>
<button v-if="imageSrc" @click="downloadImage" class="k-button">
Download Image
</button>
</div>
`
}
}
});
Any help is very much appreciated!