# Modal Images

### Shared Properties

* `height` \[float, optional]: the height of the image in system "points" (where  a standard phone is about 390 points wide). Defaults to 40.0 if not specified.
* `imageType`: \[string, required]: one of "local" or "sf\_symbol". 
* `imageData`: \[object, required]: properties that vary depending on the type. See "Image Type" below.
* `fallback`: \[object, optional]: a fallback image if the image described in this object can not be rendered on this system. Same format as root image object. Example of situations where we can't render: SF-Symbol objects can't be rendered on iOS 12, your symbol wasn't included in earlier versions of iOS, or local image path is not found. It's common to nest several fallbacks; we'll continue to search until one we find one that works. 

If the image (and fallbacks) can not be rendered, the image will not be shown.

### Image Type: Local Image

Local images are images that are included in your app bundle. 

* `path`: \[string, required]: the path to the image in the asset bundle. Typically this is the name of the image (eg: "logo.png"). The image must be an asset included in your app's bundle, or it won't be found.

<details>

<summary>Example Local Image Config</summary>

```json
{
    "imageType": "local",
    "height": 60.0,
    "imageData": {
        "path": "logo.png"
    },
}
```

</details>

### Image Type: SF Symbols

SF Symbols are only avilable on iOS 13+.

* `symbolName`: \[string, required]: the name of the symbol. Example "coloncurrencysign.square.fill". Download the [SF Symbols](https://developer.apple.com/sf-symbols/) app to explore options. If the symbol you choose isn't available on the earliest version of iOS your app supports, be sure to include a fallback image (another symbol available on earlier iOS, or a local image)
* `weight`: \[string, optional]: the visual weight of the symbol. One of the following (ascending weight): "ultralight", "thin", "light", "regular", "medium", "semibold", "bold", "heavy",  "black". Defaults to "regular".
* `mode`: \[string, optional]. Which render mode to use. Options include
  * `mono`: monochromatic
  * `hierarchical`: one color shade, but various opacities/strengths of the color to give it a feeling of depth
  * `palette`: a color palette of 2 colors
* `primaryColor`: \[string, optional]: a string in hex color format (`#ff0000`), specifying the primary color of the symbol. If omitted, will use your default tint color from the modal's theme, your default theme, or the system theme.
* `secondaryColor`: \[string, optional]: a string in hex color format (`#ff0000`), which will be used as the second color in `palette` mode. No effect in other modes.

<details>

<summary>Example SF Symbol Config</summary>

```json
{
    "imageType": "sf_symbol",
    "height": 80.0,
    "imageData": {
        "symbolName": "cloud.moon.bolt",
        "weight": "light",
        "mode": "palette",
        "primaryColor": "#3366ff",
       "secondaryColor": "#ffcc00"
    }
}
```

</details>

### More Examples

See the action `imageStylesModal` , in "config.json", in the sample app for more examples.