Access file(s) content within a block component

Kirby 3 Solved ✅
,
1

Hi there,

I’m extending the image block and want to access the image content. My images have a focus field and I want to use the values directly in my vue component for styling reasons (object fit images). Unfortunately the object of the image doesn’t provide the content fields. I got an object like this with the files field:

1. dragText: (...)
2. filename: (...)
3. icon: (...)
4. id: (...)
5. image: (...)
6. info: (...)
7. link: (...)
8. text: (...)
9. type: "image"
10. url: (...)
11. uuid: (...)

Is there a way to access the content of the file(s)?

2

You would have to fetch the image via the API to access the content, example see

3

That’s a really good example. Thanks @pixelijn!

4

I opened a similar issue recently but found this thread now.

@pixelijn’s example works perfectly for image block, but it does not work for gallery block. This is part of my Vue code for block preview:

			data() {
				return {
					captions: {}
				};
			},
			created() {
				this.captionsLoader();
			},
			methods: {
				captionsLoader() {
					if(this.content.images) {
						for(let img of this.content.images) {
							this.$api.get(img.link).then(image => {
								this.captions[img.id] = image.content.caption;
							});
						}
					}
				}
			},

I have a field called caption in file blueprint and I want to load its value into block preview. However, using the above approach I’m not able to load the captions during the initial page load. I mean the values are loaded (I can console.log them or simply see them in Vue DevTools), but not rendered. The captions are rendered only after making changes on the page. Refreshing the page causes them to disappear again.

I assume the values arrive late, just after the component is rendered. Is there any way to fix this?