...
| Type of image | Description | Can be connected to |
|---|---|---|
| Main image | The image that represents the object. Can be the image that is displayed in the top on the mobile app and customer web, an image for a product or a picture of an instructor. | App, Product, Resource, Web category |
Logo for light theme | For the app object it is possible to set a logotype. It needs to exist in two different variants. This one is the one supposed to work good on light backgrounds. | App |
| Logo for dark theme | For the app object it is possible to set a logotype. It needs to exist in two different variants. This one is the one supposed to work good on dark backgrounds. | App |
How to connect an image to an object
...
- Go to the view of the object that you want to upload an image for.
- Click on the tab "Media".
- Click on the field that you want to upload an image for. The field could often be named "main image".
- Click on the "upload" button in the dialogue that showed up.
- Next there is three steps to do:
- Choose an image to upload. Write a title that describes the image.
- Crop the image in a way so that it does not contain any unnecessary edges or empty margins.
- Mark a focus point in the image. This is to ensure that the most interesting/important part of the image is always showing regardless of screen/unit used for viewing (the image will have different resolution and height/width-ratio depending on the unit used).
- Choose an image to upload. Write a title that describes the image.
- Click "upload". It can then take a couple of seconds before the image is processed and saved, this is normal.
- Click "save" in order to save the change that has been made on the object.
Note! An image that you have uploaded is only available for objects of the same type. An image for a web category can only be used by other web categories, and not by products for example. An image that is uploaded for a product ends up in a catalog for the product type, for example "service". An image uploaded for a service product can however be used for a subscription product.
If you have a Les Mills license, additional images are available, but make sure you use the Les Mills images only for their classes, or for web categories that only contain their classes.
How large images can be uploaded?
...
| Image type | Good width/height ratio | Lowest resolution | Image format |
|---|---|---|---|
| App - Logotype | From 1:1 to 4:1. | The image should have a minimum height of 320 pixels. More than 640 pixels are not needed. | PNG. The logotype needs to have a transparent background in order for it to look good. JPG do not have support for transparency. |
| App - Main image | 16:9 | 1520 pixels wide. | JPG |
| Product | 1:1 | 1520 pixels wide. | JPG |
Resource | 1:1 | 512 pixels wide. | JPG |
| Web category | 16:9 | 1520 pixels wide. | JPG |
Picking an image from assets
The API provides image assets in an array containing various sizes. Both the web and app utilize following methods to determine the appropriate image to display based on the available screen space.
- selectClosestWidth
- selectClosestHeight
- selectClosestAspectRatio
- selectClosestWidthAndHeight
Displaying images
- When displaying the image on the web or app, the system detects the available space.
- The system dynamically resizes and positions the image so that the focal point remains as centered as possible within the visible area.