How to render images

(Michael) #1

I know this is a basic question as I am new to Squiz and found the courses and documentation to not be helpful. I am finding it difficult to figure out how to render images selected by an editor.

In the properties of my manifest.json file, I have a “SquizImage” type:

"SquizImageExample": {
"type": "SquizImage",
"title": "My Image",
"description": "Pick an Image to use"
},

And in the previews section:

"SquizImageExample": {
"name": "My Image",
"alt": "The alt if the image doesn't load",
"caption": "This above is a loaded image",
"imageVariations": {
  "original": {
	"url": "https://picsum.photos/200/300",
	"width": 100,
	"height": 100,
	"byteSize": 1000,
	"mimeType": "image/jpeg",
	"aspectRatio": "1:1",
	"sha1Hash": "1234567890abcdef1234567890abcdef12345678"
  }
}
}

In the main.js file, I am able to display the preview value without a problem like this:

export default {
    async main({ quote, author, color, SquizImageExample }) {
        return `<div>
          <img
            alt="${SquizImageExample.alt}"
            src="${SquizImageExample.imageVariations.original.url}"
            width="${SquizImageExample.imageVariations.original.width}"
            height="${SquizImageExample.imageVariations.original.height}"
          />
		  </div>';
    },
};

But I have no idea how to render an image when the editor selects an image.