Block: Image

An Image block for configuring an image to be displayed in the user interface.

Overview

An Image block is used for configuring an image, to be displayed within a frame. The image resizes itself to fit inside its parent container while maintaining the aspect ratio.

When configuring a solution, images are typically saved in an “assets” folder within the solution folder. See the assetsPath property of the Solution object for more information.

In order to minimize the sizes of the image files, it is advisable to resize the images to be as close to their target size as possible. Images in JPG format also tend to be smaller than PNG.

Example

Below is an example configuration.

  kind: Router
  routes:
    - frame: home-frame
frames:
  home-frame:
    kind: Frame
    contents:
      my-image:
        kind: Image
        path: assets/my-image.png

ImageConfig

Name	Type	Required	Description
`kind`	`"Image"`	Yes	Image
`path`	`string`	No	The path to an image file, relative to the solution folder. The image can be a ‘.jpg’, ‘.png’ or ‘.gif’.
`subscribe`	List<ImageModelSubscription>	No	A list of objects for subscribing the `Image` block to other blocks.

ImageModelSubscription

An object for configuring a subscription from an Image block to a Model block. The subscription allows the image path to be updated based on the output from a Grasshopper model.

Name	Type	Required	Description
`kind`	`"Model"`	Yes	A constant, `Model`.
`frame`	`string`	Yes	A string specifying the name of the frame in which the `Model` is located.
`source`	`string`	Yes	A string specifying the name of the `Model`.
`setImagePath`	`string`	Yes	A string specifying a name of a Packhunt `Data Output` component in the Grasshopper model that outputs the image path.