Multiple images custom block - panel preview

The CMS Questions
1

Hi - I try to make a custom block in which I can add multiple images - I would Like to be able to see all the images in the panel preview - I only managed to show the 1 image.

this is the index.js:

panel.plugin("gallery/freeimg", {
    blocks: {
      freeimg: {
        computed:{
            source() {
                return this.content.img[0] || {};
              }
        },
        template: `

        
        <div class='freeimg-container'>
            <img class='freeimg' id='dd' :src='source.url'>
        </div>


        `
    }
    }
  });

maybe someone can help me with that?
thanks!

2

Any reason why you don’t use the gallery block? But check out the gallery preview how to achieve that if you need a custom block.

3

I have the same question and am hoping to avoid creating a .vue file because I am not familiar with them.

Can this be done with an index.js file? For example, I’ve tried creating a for loop but am struggling to make the preview display multiple files :frowning:

Thank you for your time
N

4

Yes, you don’t necessarily need the single file components but can use the same code a bit differently in the index.js file, see examples here: Block factory: Creating your own blocks collection | Kirby CMS and creating the same stuff with and without single file components: To bundle or not to bundle: differences of creating plugins with or without a build process | Kirby CMS

But check out the original gallery block preview how to handle multiple files: kirby/panel/src/components/Forms/Blocks/Types/Gallery.vue at main · getkirby/kirby · GitHub