The Image Tile allows you to place a graphic image on a microapp page, subpage & overlay.
Supported Image File Types
.pdf .gif .jpg .jpeg .png .svgAdd an Image Tile
- To add a new image to your microapp, simply drag an Image Tile from the Tile panel to the desired location on the page, where you can resize it to your specifications. Then in the Properties Panel, under Image Source you can choose to either upload or paste a URL.
- If you've already imported your image as an asset (or synced it over from a plugin), simply drag your image from the Assets panel in the bottom right - onto the page canvas.
Image Properties & Settings
The Image Properties allow you to enable & configure the following settings for your image.
Position & Size
| Position & Size |
The X,Y coordinates and Width x Height dimensions of your image |
Image Source
| Image Source |
The source image file to upload, delete and / or choose a new image. You can also toggle between fit vs. fill settings and adjust the image opacity. |
| Position & Size |
The X,Y coordinates and Width x Height dimensions of your image |
| Image Source |
The source image file to upload, delete and / or choose a new image |
| Image Position | The position is the alignment of your image, respective to the Image Tile itself (i.e. Top Center, Center, Bottom, etc) |
| Rounded Corners | Adjust the appearance of your image by specifying the amount of pixels to round the corners |
| Shadow |
Select from Soft, Normal and Harsh drop shadow effects for your image asset - or None at all |
| Alt text | Add alt text (alternative text) to describe your image asset(s) and improve accessibility standards |
Events
| Hover |
Set an effect, or secondary image to display upon hover of your image tile |
| Click | Because hotspots will effectively block a hover interaction from taking place, you can use click states to set if / where an image tile will go when clicked. |
Hover state
Hover States allow you to further customize your microapp experience for users who are navigating your microapp with a mouse (cursor). You can set the following hover to either:
- Move & Scale
- Image Swap
Move & Scale will simply add an animated effect to your image asset, such as a Grow, Float, Shadow, etc.
Image Swap will enable you to swap in another image asset to serve up, when your image tile is hovered. A simple example of this would be a button that changes color.
Click state
Link the image to a Page, Overlay, URL, Email or Phone Number
You can link the image to a specific page or overlay in the microapp, so when users click the image the microapp opens the desired screen. From the Click dropdown list, select your desired click option & destination.
You can also configure a click state to link out to an external URL, or click-to-email and click-to-call - in which you can configure your destination settings for each.
Open Fullscreen to enlarge the image
You can also give your viewers the option to enlarge the image in the Image Tile. From the Click dropdown list, select Open Fullscreen.
When viewers click the picture, it enlarges so that the image is as large as the microapp page. When finished viewing the image in full screen, they click the X icon in the upper left corner to return to the standard view.
Replacing an image in the Image Tile
To replace the image in the Image Tile, simply drag a different image from the Assets Panel to the Image Tile on the page or the outline section of your Image settings. The asset replaces the existing image.
Deleting an Image Tile
To delete an Image Tile, ensure that the tile is selected and press the DELETE key.
Note: Once an image is placed in an Image Tile, it can not be removed, only replaced.