Hi there I am using Kirby as a backend for a Nuxt site. To do that I am fetching the data from Kirby through the plug-in Nuxt KQL (GitHub - johannschopplich/nuxt-kql: 🫧 Kirby's Query Language API for Nuxt). I managed fetching all of the textual data but I couldn’t find a way to fetch from KQL images. In particular I have single files fields as well as files fields nested in structure fields.
This is the Kirby blocks YML:
casecontentblocks:
label: Content
type: blocks
fieldsets:
textblock:
name: Text (1 column)
label: Text (1 column)
fields:
blocktitle:
label: Title
type: text
paragraph:
name: Text
label: Text
type: textarea
headings:
- 3
imageblock:
name: Image
label: Image
fields:
image:
label: Image
type: files
max: 1
width: 1/2
caption:
name: Caption
label: Caption
type: textarea
width: 1/2
doubletextblock:
name: Text (2 columns)
label: Text (2 columns)
fields:
blocktitle:
label: Title
type: text
paragraphleft:
name: Text (left)
label: Text (left)
type: textarea
width: 1/2
headings:
- 3
paragraphright:
name: Text (right)
label: Text (right)
type: textarea
width: 1/2
headings:
- 3
doubleimageblock:
name: Double image
label: Double image
fields:
imageleft:
label: Image (left)
type: files
max: 1
width: 1/2
captionleft:
name: Caption (left)
label: Caption (left)
type: textarea
width: 1/2
imageright:
label: Image (right)
type: files
width: 1/2
max: 1
captionright:
name: Caption (right)
label: Caption (right)
type: textarea
width: 1/2
imagesblock:
name: Images
label: Images
fields:
imagesblockimages:
label: Images
type: structure
fields:
imagesblockimagesimage:
label: Image
type: files
max: 1
imagesblockimagescaption:
name: Caption
label: Caption
type: textarea
spacerblock:
name: Spacer
label: Spacer
This is how I am displaying the fetched data in the .ts file:
casecontentblocks: { query: 'page.casecontentblocks.toBlocks' },
And this is how I am trying to display the images in the .vue template:
<div v-for="block in page?.casecontentblocks" :key="block.id" class="single-module">
<div v-if="block.type === 'textblock'" class="module-text-one-column">
<!-- textual block not needed here -->
</div>
<div v-else-if="block.type === 'imageblock'" class="module-image">
<div class="row">
<div class="col-lg-3 col-12"></div>
<div class="col-lg-9 col-12">
<img :src="page?.casecontentblocksimage.find(b => b.id === block.id).image.url" alt="Image" />
<div class="caption">
<span v-html="block.content.caption"></span>
</div>
</div>
</div>
</div>
<div v-else-if="block.type === 'doubletextblock'" class="module-text-two-columns">
<!-- textual block not needed here -->
</div>
<div v-else-if="block.type === 'doubleimageblock'" class="module-double-image">
<img :src="block.content.imageleft.url" />
<img :src="block.content.imageright.url" />
</div>
<div v-else-if="block.type === 'imagesblock'" class="module-images">
<div v-for="blockimages in block.content.imagesblockimages" :key="blockimages.id" class="single-image">
<img :src="blockimages.image.url" alt="Image" />
</div>
</div>
<div v-else-if="block.type === 'spacerblock'" class="module-spacer"></div>
</div>
Do you have any clue about how images urls inside Kirby blocks field should be queried? Especially when they are inside structure fields?
Thanks for any help!