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.

Steps at a glance:

  1. Upload an Image File
  2. (Optional) Configure the Allowed Image Source Domains
  3. Create a Hybrid App
  4. Add the JavaScript SDK to the App
  5. Initialize the Everlive Instance
  6. Add a Data Source to Images
  7. Mark the Tag for Processing
  8. Call Responsive Images

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 JavaScript 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 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"

Create a Hybrid App

Begin this tutorial by creating a Hybrid Telerik Platform app. Click the Create app button, select Cordova Hybrid, give the app a name, and finally click Create App.

Add the JavaScript SDK to the App

In the Code window, include the following script resource in your index.html file immediately after the cordova.js reference.

<script src="https://bs-static.cdn.telerik.com/latest/everlive.all.min.js">

You can learn about other ways to install and access the SDK in Getting Started with the JavaScript SDK.

Initialize the Everlive Instance

The Everlive object connects the client application to a Telerik Platform app.

To initialize the Everlive object in your application's entry point add the following code to the onDeviceReady handler in js/index.js right after the navigator.splashscreen.hide(); call.

var everlive = new Everlive({
    appId: "your-app-id",
    scheme: "https"
});

Add a Data Source to Images

Replace the src attribute of each image that you want Responsive Images to autoresize for you with the data-src attribute. Keep the attribute value:

<img data-src="http://www.example.com/images/image.jpg" />

Mark the Tag for Processing

Add the data-responsive attribute to each tag that you want Responsive Images to autoresize for you:

<img data-src="http://www.example.com/images/image.jpg" data-responsive />

Call Responsive Images

Responsive Images provides methods that iterate over all images on an app view or a web page and requests them resized and loaded from a CDN for you. It automatically calculates the display size of the images, and ensures that no bytes are wasted over the wire. It handles all request parameters for you.

To requests processing of all tags that you marked with data-responsive earlier, include this line of code in your application:

el.helpers.html.processAll();

The JavaScript SDK also packs a method for optimizing a single image or a set of images. For more information see Helpers.html.process and Applying Responsive Images Automatically.

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.