Access panel cards srcset

Kirby 3 Solved ✅
1

I’m making a preview component for a pages block. How can I make use of the srcset and sizes which are used for images (k-card-image) in the cards layout?

2

I think I’ve used panelImage() and panelIcon(). in the past to return this information. This is without checking but 99.9% sure this is what you need. It returns an object with all of the image and icon data in, including the scrset urls.

3

I was using my own formatting before, but decided not to reinvent the wheel.
The Card component with the underneath code gives me the sizes but not srcset though, can anybody solve the last piece of the puzzle?

<k-cards>
  <k-card 
    v-for="page in content.pages"
    :key="page.id"
    :image="{
      ratio: '3/2',
      cover: true,
      back: 'pattern',
      url: page.image.url,
    }"
    :icon="{
      type: 'page',
      back: 'black'
    }"
    :text="page.text"
  />
</k-cards>

<script>
export default {
  props: {
    value: Array
  }
};
</script>
4

Answering my own question: this gives srcset and sizes and prevents error when no image is available and an icon is displayed.

<template>
  <k-grid>
    <k-column width="1/3" v-for="page in content.pages" :key="page.id">
      <k-card
      v-if="page.image.url"
      :image="{
        ratio: '3/2',
        cover: true,
        back: 'pattern',
        url: page.image.url,
        srcset: page.image.cards.srcset
      }"
      :icon="{
        type: 'page',
        back: 'black'
      }"
      :text="page.text" />

      <k-card
      v-else 
      :icon="{
        type: 'page',
        back: 'black'
      }"
      :text="page.text" />
    </k-column>
  </k-grid>
</template>

I can’t find anything about srcset in the reference, it would be nice to if it did?
This took me way to much time to figure out. Mind you, I did learn something about Vue and the Kirby UI Kit which I haven’t used before Kirby 3.5.