Welcome to the ImageCDN documentation

In this documentation you'll find all the information needed to start using this component in your applications.

Introduction

While developing OutSystems applications we sometimes face the challenge of having to show images that are not inside the application, such as dynamic images that are stored in a database. There are other options to store images and one of them is to store them in a CDN. A CDN stands for Content Delivery Network and it’s not only a file storage system, but it’s also a geographically distributed network of proxy servers and their data centers with the goal to provide high availability and performance by distributing the service spatially relative to end-users. In this document, we will talk about the component that the OutSystems Experts team created to handle CDN images, it’s advantages, and how to use it.

Vision

Offer a component that allows using a CDN service, manages cache, is thought for offline, and supports multiple settings per image.

Choosing the CDN service

There are multiple CDN services available, a quick google search demonstrates that. We chose Sirv for because it has some unique and useful features, such as: 

• It has a free plan that allows to store up to 500mb

• It has an API to upload images and get the file information, among others

• Allows requesting an image with multiple settings, such as a specific size, rotation, file format, quality, effects, and many other features.

Features

The component makes available a block with some input parameters. The features are:

• Image settings to be used when requesting the image to Sirv, such as rotation, size, crop, etc.

Advantages

Using this component has many advantages when compared with a traditional approach. 

1. Because it uses a CDN service the content is distributed globally and served spatially relative to end-users, meaning that it’ll increase availability and speed.

2. The block developed does all the logic needed to show the right image to the end-user, depending on the network conditions for example.

3. Because we use Sirv we have the ability to have multiple images, for multiple devices, with just one original image. That means that from one image stored in Sirv we can request as many images as we want, for different resolutions or with different effects. Check the .. section to know more

Image settings

Using Sirv as the CDN service allows us to get multiple images with different mutations, such as: 

• Size (Width/Height, Crop)

• Canvas opacity

• Canvas color

• Canvas border

• Rotation

• Quality

• Format (GIF, PNG, JPG, WebP, Optimal or Original)

• Light (Brightness/Contrast/Exposure/Shadows/Hightlights)

• Color (Hue/Saturation/Lightness)

Using the Block

Using this component it’s easy. Just follow the following steps:

1. Download the component from the OutSystems Forge. 

2. Add the SirvImage block to your application and screen

3. Fill all input properties of the block: 

   1. Url - Sirv image URL - example: https://itratenc.sirv.com/Images/Apple%20Watch%20white.jpg

   2. ImageSettings - The settings that will be used when retrieving the image. Check the Image Settings topic to know more.

Using the API

The API component allows sending images from an OutSystems application to Sirv. To use it, follow these steps:

1. Download the ImageCDNAPI from forge

2. Go to the Settings in your Sirv account and under the tab API and S3/FTP create a new API Client (https://my.sirv.com/#/account/settings/api)

3. Use the Sirv_Upload server action to upload the file, passing the file name and the binary as input parameters.

Any questions please use the forum. 

As always, if you like it, rate it! :D