Image tile :: configuration examples

Note

The optimal ratio for images in tiles is 5:11 with a max size of 320x60px

Ex1: Image from asset

  1. Select the tile type “Image”
  2. Select the source configuration type “Asset”
  3. Select your image from the dropdown menu

Your tile now displays an image from your assets !

Code mode configuration
type: "image"
src: "my-image"

Ex2: External image

  1. Select the tile type “Image”
  2. Select the source configuration type “External”
  3. Enter the URL of your image, for example https://toucantoco.com/img/logo-toucan-toco.png

Your tile now displays an external image!

Make sure that the image will not change or be removed from the external website, else it will reflect on the tile.

Code mode configuration
type: "image"
src: "https://toucantoco.com/img/logo-toucan-toco.png"

Ex3: Image from report selection

You might want to change the picture in your tile depending on your report ! No worries we have a way to do just that :)

Use the following steps :

  • Select “Image” in the tile type
  • Change the file name to : <$= assetUrl(appRequesters.report) $> or <$= assetUrl(appRequesters.report.column_name_containing_my_asset) $>
  • This syntax is called templating : take a look at our documentation to see how it works :)
  • What you have to know :
    • <$= assetUrl(appRequesters.report) $> will take the name of your selected report/view. For example, if you are on your “France” report, your image should be called “France.jpeg” or “France.png” to show.
    • <$= assetUrl(appRequesters.report.image) $> : for this syntax, make sure you have an “image” column in the dataset containing your reports/views and that the option completeObjectMode is on true in your report configuration in the optional parameters (see image).
complete object mode option

The complete object mode will allow you to select values from any of your report dataset column using templating. Your image column should contain the exact name of your images in the Assets Panel.

country image
France france_image
USA usa_image

When you will select a report, the image will change !

Note

You can also modify the background image of your app depending on your requester : just go in the advanced parameters and select your report requester and the column of your report dataset containing the name of your image.

Code mode configuration
type: "image"
src: "<$= assetUrl(appRequesters.report) $>"

The “bgSize” option

It is an option available for your image tile with two possible values :

  • cover : I want my image to fill the whole size of the tile
  • contain : I want my image to be refitted to be seen completely in the tile (you might have white margins)