# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.criticalmoments.io/actions-in-app-messaging/modals/modal-images.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.