How to Access Image Thumbnails in a Plugin’s Template

The CMS Questions
1

I’m working on a plugin / a custom block. In the backend, I want to preview an array of images, like so:

panel.plugin("me/mycustomplugin", {
	blocks: {
		mycustomplugin: {
			template: `
              <li v-for="image in content.myimagefiles" :key="image.id">
                <img
                  :src="image.url"
                  :srcset="image.image.srcset"
                 :alt="image.alt"
                />
              </li>
              `
		}
	}
});

This always loads the original (large) version of an image. Would it be possible to display only thumbnails instead?

2

This should actually work, although in your example above, a wrapping ul element is missing.

1 Like
3

Thank you for your response. In my actual project, I do have a surrounding <ol> tag — this must have been lost when preparing the code snippet above.

If the code looks okay to you, then maybe my assumption is wrong that thumbnails are automatically generated when uploading images?

Do I need to explicitly specify this in my file blueprint, maybe?

title:
  en: Image File
  de: Bild-Datei
accept:
  extension: png, jpg, webp
  maxsize: 4000000 # 4 MB
create:
  format: webp