The Image Tile allows you to place a graphic image on a microapp page, state, overlay and scroll state.
Supported Image File Types
.pdf .gif .jpg .jpeg .png .svgAdd an Image Tile
- Navigate to the desired page of your microapp in the Microapp Builder. Drag an Image Tile from the Tile panel to the desired location on the page, where you can resize it to your specifications. You can double click the tile to make it full screen.
- Drag your graphic asset from the Assets panel of your Builder toolbar into the Image Tile on the page or the outline section of your Image toolbar. The asset is displayed in the Image as a thumbnail in the Image toolbar. For more information about assets, see Adding Assets to your Microapp.
Image Tile Settings
The Image tile settings allow you to configure the following options for your image.
| Position | The position is the x,y coordinates for the top left corner of the scroll tile, in relation to the top left corner of the Page Canvas. |
| Size | The size are the dimensions the width and height of the Tile denoted in pixels. |
| Behavior |
The Behavior option describes the way an asset observes the edge of the Image Tile. There are 3 behavior options: Fit Original The original version of the image is displayed, and it is not sized or positioned.
|
| Origin |
You can select the positioning squares to specify where the main focus of the original image should be. The center square is selected by default. Additionally, there are image fill options which are outlined below: |
| States | There are two types of Image States to control the interactivity of your image tile; Hover State and Click State. |
| Alt text | Add Alt text to describe your image. Adding Alt text is best practice to make your microapp ADA compliant and content indexable by search engines. More information here. |
| Preview | A preview of your creative asset. |
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 state options for your image:
- opacity
- scale
- transition
You can set a secondary image to set the hover state for an image tile by drag and dropping it into the flyout.
Click state
Link the image to a page
You can link the image to a specific page in the microapp, so when users click the image the microapp opens the desired page. From the Action dropdown list, ensure that Target is selected.
The Target dropdown list appears. Clicking the list displays the microapp pages and overlays by name in sequential order.
Click the Target dropdown list and select the desired page to link it to the image.
Enlarge the Image
You can give your viewers the option to enlarge the images in the Image Tile. From the Action dropdown list, ensure that Fullscreen is selected.
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.