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.

Editing interface

This image shows an example of the SquizImage type input field in the editing interface. It also includes a title and a description.
Figure 1. The SquizImage input types editing interface field.

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.js",
      "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"
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}