Critical Moments Docs
Quick StartHomepageAccount
  • Documentation Home
  • What is Critical Moments?
  • Quick Start
  • Concepts Overview
  • Remote Control / Service
    • Host Config on Github Pages
  • Config File Structure
  • Demo App
  • Homepage & Account
  • 📚Guides
    • Mobile App Toolbox: 13 Features Most Apps Need
    • Reduce App Churn with Notifications
    • Improve your App Store Rating
    • Feature Flags Guide
  • ⏰Notifications
    • Intro to Notifications
    • Notifications Spec
    • Smart Delivery
    • Badges
  • 🎯Conditional Targeting
    • Intro to Conditions
    • Built-in Properties
    • Custom Properties
    • Syntax and Operators
    • Conditional Guides
      • Working with Dates
      • Locations and Weather
      • Event and Property History
  • 🎪Events
    • Event Overview
    • Recommended Events
    • Built-In Events
  • 💬Actions / In App Messaging
    • Actions Overview
    • Modals
      • Modal Content Sections
      • Modal Buttons
      • Modal Images
    • Banners
    • Alerts
    • App Reviews
    • Open Link
    • Custom Actions
    • Conditional Actions
    • Triggers
  • 🎨Themes
    • Theme Overview
    • Built In Themes
  • ⛳Feature Flags
    • Feature Flag Guide
    • Conditional Feature Flags
    • Named Conditions Config
  • 🔑Trustless SaaS
  • 👋Support
  • 👩‍💻SDK API Reference
Powered by GitBook
On this page
  • Shared Properties
  • Image Type: Local Image
  • Image Type: SF Symbols
  • More Examples

Was this helpful?

  1. Actions / In App Messaging
  2. Modals

Modal Images

How to include images in your modal UIs

Last updated 1 year ago

Was this helpful?

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.

Example Local Image Config
{
    "imageType": "local",
    "height": 60.0,
    "imageData": {
        "path": "logo.png"
    },
}

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

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

More Examples

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

💬
SF Symbols