I’m currently building a custom panel section to display a number of links. I cannot quite figure out how to pass an image to the <k-collection> component.
This is my Vue file for the section:
<template>
<section class="k-links-section">
<header class="k-section-header">
<h2 class="k-headline">{{ label }}</h2>
</header>
<k-collection :items="links" :layout="layout" />
</section>
</template>
<script>
export default {
data() {
return {
label: "",
layout: "list",
links: [],
};
},
created() {
this.load().then((response) => {
this.label = response.label;
this.layout = response.layout;
this.links = response.links;
});
},
};
</script>
And this is the PHP file:
<?php
return [
'props' => [
'label' => function ($label = 'Links') {
return $label;
},
'layout' => function ($layout = 'list') {
return $layout;
},
'links' => function () {
$links = [];
$blogPosts = page('neuigkeiten/blog')->children()->listed()->filterBy('intendedTemplate', 'post')->limit(3);
foreach ($blogPosts as $blogPost) {
$links[] = [
'icon' => 'page',
'link' => $blogPost->url() . '.social',
'target' => '_blank',
'text' => $blogPost->title()->value(),
'image' => [
'query' => $blogPost->thumbnail()->toFile(),
'cover' => true,
],
'info' => 'Blog'
];
}
return $links;
}
]
];
The list of links is rendered correctly, but I only get a black square where the image should be. I am not sure how the array where I pass the props to the Vue file should look. Anyone have an idea?
