Images - Uploading images for app and web

For both mobile app and customer web "Go Active" (web/app generation 3) it is possible to show your own images. Images can be uploaded through/via BRP Configuration and the objects app, product resource and web category.

Mediatab for object

The object that you can upload images for have a tab called "Media". For most objects it is only possible to connect one image (for example web category object) but for other objects it is possible to connect several images (for example app object). The table below contains a listing for the different types of images that can be connected to objects.

How to connect an image to an object

1. Go to the view of the object that you want to connect an image towards.
2. Click on the "Media" tab.
3. Click on the field "Main image".
4. In the dialogue showing there are one or more tabs.
   1. One or more tabs that is connected to the object that you want to connect an image towards. For product there are for example multiple tabs to choose from. They are named by the product types. It is okay to choose image from all these tabs regardless of which product you want to connect an image towards.
   2. One or more tabs with "shared images". There is a set of pre-uploaded images with general themes that is free to use.
5. Mark an image and click "choose".
6. Click "save" in order to save all your changes.

How to upload an image

Follow these steps to upload an image and at the same time connect it to an object.

1. Go to the view of the object that you want to upload an image for.
2. Click on the tab "Media".
    
3. Click on the field that you want to upload an image for. The field could often be named "main image".
4. Click on the "upload" button in the dialogue that showed up.
   
   
   
   
5. Next there is three steps to do:
   1. Choose an image to upload. Write a title that describes the image.
      
      
      
   2. Crop the image in a way so that it does not contain any unnecessary edges or empty margins.
      
      
      
   3. 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).
      
      
      
6. Click "upload". It can then take a couple of seconds before the image is processed and saved, this is normal.
7. 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?

The maximum size for an image is 10 MB.

What are the requirements on resolution and width/height ratio?

Since all images uses the focus point there are no requirement on a specific width/height ratio. In order to ensure good results there are however some guidelines to follow:

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.