The SquizImage input type
The Squiz Component Service introduces the SquizImage type for JSON schema which provides a consistent image data object structure for the component output function. Within the editing interface, the SquizImage type is presented as a resource browser which allows users to select images from Squiz DXP sources.
Schema definition
To define a property as a SquizImage in JSON Schema, you use the "type" keyword with the value "SquizImage".
"input": {
"type": "object",
"properties": {
"SquizLinkField": {
"title": "Example image",
"type": "SquizImage",
"description": "The image to show"
}
},
"required": []
},This example also demonstrates how to provide a description and title to the SquizImage field for use within the editing interface.
Input object structure
The SquizImage input type is available to consume in the main function through the input object. The SquizImage field is an object of image related data.
const input = {
SquizImageField: {
name: "My Image",
alt: "The alt if the image doesn't load",
caption: "This above is a loaded image",
imageVariations: {
original: {
url: "http://example.com/image.jpg",
width: 100,
height: 100,
byteSize: 1000,
mimeType: "image/jpeg",
aspectRatio: "1:1",
sha1Hash: "1234567890abcdef1234567890abcdef12345678"
}
}
}
};
module.exports = async function (input) {
return `
<div class="mySquizImageWrapper">
<figure>
<img
alt="${SquizImageField.alt}"
src="${SquizImageField.imageVariations.original.url}"
width="${SquizImageField.imageVariations.original.width}"
height="${SquizImageField.imageVariations.original.height}"
/>
<figcaption>${SquizImageField.caption}</figcaption>
</div>`;
};Full manifest definition
Expand to see the manifest.json file with a string input field
{
"$schema": "http://localhost:3000/schemas/v1.json",
"name": "mySquizImage",
"version": "1.0.0",
"mainFunction": "main",
"displayName": "SquizImage example",
"namespace": "squiz-image-component",
"icon": {
"id": "list_alt",
"color": {
"type": "hex",
"value": "#2D2D2D"
}
},
"description": "This component is set up as a demonstration component for documentation purposes.",
"functions": [
{
"name": "main",
"entry": "main.cjs",
"input": {
"type": "object",
"properties": {
"SquizImageExample": {
"type": "SquizImage",
"title": "My Image",
"description": "Pick an Image to use"
}
},
"required": []
},
"output": { "responseType": "html" }
}
],
"previews": {
"firstPreview": {
"functionData": {
"main": {
"inputData": {
"type": "inline",
"value": {
"SquizImageExample": {
"name": "My Image",
"alt": "The alt if the image doesn't load",
"caption": "This above is a loaded image",
"imageVariations": {
"original": {
"url": "http://example.com/image.jpg",
"width": 100,
"height": 100,
"byteSize": 1000,
"mimeType": "image/jpeg",
"aspectRatio": "1:1",
"sha1Hash": "1234567890abcdef1234567890abcdef12345678"
}
}
}
}
}
}
}
}
}
}