Help Center

Menu

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": {
        "SquizImageField": {
          "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

SquizImage resource browser

Use SquizImage inputs when you need users to select images from your Squiz DXP image library, ensuring consistent asset management and automatic metadata inclusion.

Screenshot showing an image resource browser with a 'Browse' button
Figure 1. SquizImage resource browser in the editing interface

The SquizImage editing interface provides a resource browser that connects to your Squiz DXP image assets. Users can browse and select images from the managed library, with automatic inclusion of image metadata like dimensions, alt text, and multiple size variations. This ensures consistent asset management and optimized image delivery compared to manual URL entry.

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"
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}