We have added more ways to design your top module to add your own specific touch on the app. Previously the only option was to choose between a blurred version of the latest publication or a solid color.

Now we’ve added the options to adjust height of the module and choose specific images as background of the top module.

The settings you have:

1. Adjust content
2. Adjust height of the module
3. Adjust the top module background. Choose between either:
   1. Blurred version of latest edition (default)
   2. Solid color
   3. A specific image

If you would like this feature, please contact your Key Account Manager to discuss the options.

Adjust content

Right of the latest publication you can have different types of content. As default we show sections of the latest publication, but what if your publication only has 1 section or if you prefer to focus on other content in your app? Then you can add in something different. Your options are:

• Sections of latest publication (default) 
• Previous publications (must be from same folder as the latest publication)
• Related supplements 

If you choose related or previous publication, you can set a limit on how many you want displayed (eg. 5)

Adjust height

The height is set in pixels and default is 360px on tablet. When the height of the top module is adjusted, then the publications will adjust relative to the height change. On phone the height is calculated based on device size, so it's not a static number.

If the background is a specific image, then be aware that the changed height might affect the ideal aspect ratio.

Blurred version of latest edition

A blurred version of the latest edition. This is the default background and doesn’t have any settings.

Solid color

A solid background color. You can pick any color and give it to us in HEX code. Example: #42eff5.

You can find various web tools to pick a color with. Example: https://htmlcolorcodes.com/color-picker/

Background Image

Having an image as the background is an option for more customization of the app. However, more customization means more complications, especially if you pick the dynamic image option.

You can choose between static and dynamic images. Static images are hardcoded into the app, while dynamic images can be changed anytime, but requires more work from the customer.

Be aware that the images may not be displayed identically on all devices. Since the same picture can be displayed on many different devices, we need to be able to adjust the image depending on size and resolution of screen as well as height of the module.

 We do this through “Aspect Fit”. This means the image will not be stretched but will be fitted to the frame. First with a fit to the centrum of the image and then scale the image down to fit the width of the image, and the cut top/bottom off.

When picking file type we recommend png. File size is relevant for loadtime.

Static images

This solution is ideal if you have a set image you want as background and don’t need to change it. This is a simpler solution than dynamic images, because you pick the pictures once and you won’t need to think about it again.

You choose 3 images (or size variations of the same image): One for iPad portrait orientation, one for iPad landscape orientation and 1 for iPhone (which is locked to portrait orientation). These images will be hardcoded into the app and will require an app update to change.

We recommend the following image sizes:

• Phone portrait:1080x717
• Tablet portrait: 1536x637
• Tablet landscape: 2048x637

These will not be the same if you choose to adjust the height of the module.

Dynamic images

This solution is ideal if you want to change the images regularly and have the technical know-how in your organization to create a script that handles it.

Unlike static images, we don’t hardcode images, but instead an URL is used (which is agreed upon in the project).

The URL can be simple and link to a direct image or it can be complex and contain any number of specified parameters.

Simple URL example: https://www.device.e-pages.dk/newestissuebackground_politiken_tablet.jpg

Complex URL example: HTTPS://www.visiolink.com?frontpage.php?customer={CUSTOMER}&folder={FOLDER_ID}&orientation={ORIENTATION}&devicetype={DEVICE_TYPE}&APP_VERSION={APP_VERSION}

As you can see in the complex URL example, you can set the following parameters:

Customer: Prefix, which is relevant for apps with several customers/prefixes. Can be found in the HUB.

Folder ID: Folder, which is relevant if you want different images for different folders/regions. Can be found in the HUB.

Orientation: Which device orientation the image should be shown in (landscape or portrait)

Device type: Which device type the image should be shown in (tablet or phone)

App Version: Your app's version number, which is relevant if you want to differentiate images based on app versions.

Example: The URL below will set a specific image background which will be shown on the customer “TestCustomer” on a tablet held in landscape orientation.

HTTPS://www.visiolink.com?fontpage.php?customer={TestCustomer}& orientation={landscape}&devicetype={tablet}

Cached

Images are cached so you don’t need to load a new image every time. This means that for a dynamic setup you can’t point to a new image with the same name as the previous. The old image will keep showing. 

It also means that a dynamic changed image can take up to 1 day before taking effect, because the old image is still cached. 

Fallback of dynamic image

If there is no network or the image is not loaded for another reason (no access to the dynamic image), then the image backdrop color is shown (if specified). You can specify the backdrop color, which will be shown when the image is not loaded. This is defined in HEX color code like the solid background color.