Progress will discontinue Telerik Platform on May 10th, 2018. Learn more

Getting Started with Responsive Images

Getting Started with Responsive Images

Probably the most straightforward way to use Responsive Images is to request an optimized image from the server that matches the size of the image container. This article provides step-by-step instructions as to how to do this, including how to upload an image to Files.

You can also apply the information in this article to any native Android app where you want to use the Responsive Images service. Simply skip to Connect Your App to the Responsive Images Service.

Steps at a glance:

  1. Upload an Image File
  2. (Optional) Configure the Allowed Image Source Domains
  3. Obtain the URI of the Image
  4. Connect Your App to the Responsive Images Service
  5. Prepare the Resize Parameters
  6. Request a Resized Image
  7. Display the Resized Image

Prerequisites

  • A Telerik Platform account.
  • The App ID for your Telerik Platform app. You can access it from Settings.
  • The Data service enabled.

Upload an Image File

You can optimize any publicly available image file using its HTTP(S) URL. However, if you want to store your images using Telerik Platform, you can take these steps to upload an image:

Image files with a larger size and resolution take greater advantage of Responsive Images.

  1. Log in to the Telerik Platform portal.
  2. Click your app.
  3. Navigate to Data > Files.
  4. Click the Upload files button.
  5. Drag and drop your image file to the right-side edit pane or browse for the file location.
  6. Click Save to upload the file.

"Uploading an image file"

To upload an image programmatically, use any of these approaches:

  • Using the Android SDK: Uploading Files
  • Using the Telerik Kendo UI HTML5 & jQuery Upload Component: Upload
  • Using the Telerik UI for ASP.NET AJAX Cloud Upload Control: RadCloudUpload

(Optional) Configure the Allowed Image Source Domains

Skip this step if you store your images in Cloud Files.

If you want to optimize image files from an outside source, you need to whitelist its domain name in Telerik Platform. Not allowing other sources makes your Responsive Images endpoint more secure.

  1. Log in to the Telerik Platform portal.
  2. Click your app.
  3. Navigate to Data > Files > Responsive Images.
  4. Click the Add Domain button.
  5. In the Name text box, enter the name of the domain that you want to trust and click Save. Use the following format:

    (subdomain.)domainname.tld

    For example:

    telerik.com or images.telerik.com

    Do not enter protocol prefixes, slashes, or port numbers. Wildcards are not supported.

Note that it takes several minutes for the setting to take effect. During that time you get an error if you attempt to optimize images from the recently added domain.

"Adding an allowed domain"

Obtain the URI of the Image

You need the image URI before you can pass it to Telerik Platform for optimization. Depending on where the image is stored, use one of the following approaches to get its URI:

  • If you store your image outside of Telerik Platform, use the specific steps for the storage service you are using.
  • If you store your image in Telerik Platform, take these steps to get its URI:

    1. Open you app.
    2. Click Data > Files in the left-side navigation pane.
    3. Select the file entry in the file browser.
    4. In the right-hand pane, right-click the hyperlink under the file preview thumbnail and select to copy the URL.

To get the URL of an image programmatically, get the file using the following method. In the request, set the X-Everlive-Fields header value to {"Uri" : "1"} to only return the Uri field instead of the entire object:

Connect Your App to the Responsive Images Service

Add the Responsive Images server's address as a constant of your app's activity. You will refer to it whenever you need to request a mobile-optimized image. Then declare the App ID of your Telerik Platform app.

 private static final String APP_ID = "your-app-id";
 private static final String IMAGE_SERVER_BASE_URL = "https://bs1.cdn.telerik.com/image/v1/" + APP_ID + "/";

Prepare the Resize Parameters

You need to know the properties of the target image container to determine the resized image's dimensions and fill mode (how to handle the image in case the container has a different aspect ratio).

The following code reads the container's width and height and sets the fill mode to contain, which keeps the image information but may not fill the entire container. You can also set the fill to cover which fills the entire container but at the expense of cropping the picture.

ImageView imageView = (ImageView) findViewById(R.id.imageView);

int width = imageView.getWidth();
int height = imageView.getHeight();
String fillMode = "contain"; // or "cover"

ArrayList<String> resizeParametersArrayList = new ArrayList<>();
resizeParametersArrayList.add(0, "w:" + width);
resizeParametersArrayList.add(1, "h:" + height);
resizeParametersArrayList.add(2, "fill:" + fillMode);

// The resize parameters should be in the format "resize=w:400,h:300,fill:contain"
String resizeParameters = "resize=" + TextUtils.join(",", resizeParametersArrayList);

For the full list of sported resizing parameters, see Responsive Images Resizing Options.

Request a Resized Image

After assembling the parameters string, you can contact the Responsive Images service to request the resized image's URI. In the next example, the original image location (uploadedFileUri) is explicitly set, but in the real world you would use the Android SDK to query Cloud Files and find the image URL or use some other means of acquiring it if you are reading the image from an external source.

String uploadedFileUri = "https://bs1.cdn.telerik.com/v1/TopkyrLaF3O6CGiC/c473ea72-f7c0-11e4-87db-713680c9d2da"; //Or use an external URI

String resizedImageUrl = null;
resizedImageUrl = IMAGE_SERVER_BASE_URL + resizeParameters + "/" + uploadedFileUri;

Display the Resized Image

Now that you have the resized image's URI, you are ready to display it. For instance:

Bitmap image = null;
try {
    image = BitmapFactory.decodeStream((InputStream) new URL(resizedImageUrl).getContent());
} catch (Exception ex) {
    ex.printStackTrace();
}

Next Steps

To combine this article with Getting Started with Files: App Integration, take the code from steps 6, 7, and 8 and place it the UploadImageTask class from the Cloud Files article, right after getting the uploaded image's URI.

See Also

Start a free trial Request a demo
Contact us: +1-888-365-2779
sales@telerik.com
Copyright © 2016-2017, Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.