Getting Started with Responsive Images

Getting Started with Responsive Images

In this article you will learn what is the easiest way to upload an image to the cloud and then resize it using Responsive Images to a predefined size.

Steps at a glance:

  1. Upload an Image File
  2. (Optional) Configure the Allowed Image Source Domains 1.Obtain the URI of the Image
  3. Make the Image Responsive

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. Open you app.
  2. Click Data > Files in the left-side navigation pane.
  3. Click the Upload files button.
  4. Drag and drop your image file to the right-side edit pane or browse for the file location.
  5. Click Save to upload the file.

"Uploading an image file"

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

  • Using the RESTful API: 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 Telerik Platform 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. Open you app.
  2. Click Data > Responsive Images in the left-side navigation pane.
  3. Click the Add Domain button.
  4. 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:

Make the Image Responsive

With the App ID of your Telerik Platform app and the URI of the image at hand, you have a unique endpoint at your disposal that you can use to manipulate your image. Construct a URL using this format:

https://bs1.cdn.telerik.com/image/v1/your-app-id/resize=rezise-options-here/URI-to-image-here

where rezise-options-here sets the image manipulation parameters that you want to use. See Responsive Images Resizing Options for more information.

For example, to fit an image in a set container of 300 by 300 px resolution, keeping the image aspect ratio, construct the URL as follows:

https://bs1.cdn.telerik.com/image/v1/your-app-id/resize=w:300,h:300,fill:contain/http://www.example.com/images/image.jpg

If the image is more than 300px wide or high, it will be downsized so that its width or height, depending on which is bigger, fits in the container. Similarly, if the image is smaller than the container, it will be upsized so that its width or height, depending on which is bigger, fills up the container.

If you set the fill mode to cover instead of contain, the entire container will be filled up but at the expense of cropping the picture.

The following picture illustrates the effects of contain and cover:

Differences between fill modes

Test your URL in your browser or in your favorite tool for making HTTP requests.

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.