Image Responsible and Offline not working

6 posts, 0 answers
  1. Manuel
    Manuel avatar
    3 posts
    Member since:
    Feb 2013

    Posted 21 Sep 2015 Link to this post

    Hi,

     

    I am trying to use the new backend service offline functionality for images of the backend services.

    I uploaded some images to the file browser and activated the Responsive Images service.

    Noch I added the below code - guided by your documentation. But the image does not load. Whatever I do the app will not load the image. I checked the permissions of the backend services and the URL of the image. Everything seems to be fine.

    Any hint, what else I could try?

    <div data-role="view" data-title="Test" id="about">
        <img data-responsive data-offline data-src="http://bs2.cdn.telerik.com/v1/[myKey]/[imageID]" />
       
    </div>
    <script type="text/javascript">
        var evl = new Everlive({
            apiKey: appSettings.everlive.apiKey
        });
        evl.helpers.html.processAll();
    </script>

  2. Anton Dobrev
    Admin
    Anton Dobrev avatar
    539 posts

    Posted 23 Sep 2015 Link to this post

    Hi Manuel,

    Could you confirm that the URL set to the data-src attribute is a valid one?

    Also, you can specify options to the process and processAll methods as explained here that will help you handle better any errors.

    If this does not solve the issue, provide a runnable sample and we will be able to investigate this.

    I look forward to your reply.

    Regards,
    Anton Dobrev
    Telerik
     
    Everlive is now Telerik Backend Services, and is part of the Telerik Platform.
     
  3. Manuel
    Manuel avatar
    3 posts
    Member since:
    Feb 2013

    Posted 03 Oct 2015 in reply to Anton Dobrev Link to this post

    Hi,

    I checked the URL of the data-src attribute. That's correct.

    I tried to get the results of the processAll method but it returned 0 results. None processed successfully and none with errors.

    If I user <img src="[MyURL]"/> the image is displayed.

    If I change it to <img data-src="[MyURL]"/> the image is not displayed.

     Any Idea what I a m doing wrong?

    I created a basic project with the most minimal entries and attached it.

    (I removed my Application Key from the source code. You need to insert yours. And you might change the img source path.)

    But how can I provide you the zip-file? Upload is not possible?

     Thanks and best regards

    Manuel

     

  4. Anton Dobrev
    Admin
    Anton Dobrev avatar
    539 posts

    Posted 06 Oct 2015 Link to this post

    Hi Manuel,

    You can use the Kendo UI Dojo in order to supply the sample or paste it in this thread.

    By any chance, is the image URL from an external domain which is not configured in the backend project?

    Thanks in advance.

    Regards,
    Anton Dobrev
    Telerik
     
    Everlive is now Telerik Backend Services, and is part of the Telerik Platform.
     
  5. Manuel
    Manuel avatar
    3 posts
    Member since:
    Feb 2013

    Posted 16 Oct 2015 in reply to Anton Dobrev Link to this post

    Hi,

    the image is from the URL bs3.cdn.telerik.com as stated in the first example.

    And I have added this URL as domain to the responsive images settings in the backend services.

    I removed My API Key and the Image Name. You would need to add that to work.

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>Untitled</title>
     
     
      <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
          <script src="https://bs-static.cdn.telerik.com/1.5.6/everlive.all.min.js"></script></head>
    <body>
        <h1 data-bind="html: title"></h1>
        <img data-src="https://bs3.cdn.telerik.com/v1/[yourKey]/[image]" data-responsive data-offline />
        <script type="text/javascript">
            var el = new Everlive({
                apiKey: '[yourKey]'
            });
            el.helpers.html.processAll().then(function (results) {
                results.processed;
                results.failed;
            });
        </script>
    </body>
    </html>

  6. Anton Dobrev
    Admin
    Anton Dobrev avatar
    539 posts

    Posted 20 Oct 2015 Link to this post

    Hello Manuel,

    Thank you for taking the time to arrange this example.

    To use offline support for files you need to enable the files config in the offline settings of the Everlive object. For example:
    var el = new Everlive({
                apiKey: 'my-api-key',
                offline: {
                    storage: {
                        provider: Everlive.Constants.StorageProvider.LocalStorage
                    },
                    encryption: {
                        provider: Everlive.Constants.EncryptionProvider.Default
                    },
                    files: {
                        storagePath: 'file/system/path',
                        metaPath: 'file/system/path/meta'
                    }
                }
            });

    Otherwise, the offline attribute will fail silently.

    Since the offline persister for files requires a file system to work with it will only work in Cordova (you need to enable the Cordova File API plugin and test on an actual device) and Node.js applications as stated here.

    You can continue to use the responsive attribute without the offline one. For example:
    <img data-src="https://bs3.cdn.telerik.com/v1/[yourKey]/[image]" data-responsive />

    Based on your report we were able to identify a few areas of improvement in the docs and in the SDK. As a small token of gratitude I updated your Telerik points.

    Let me know if you have further questions or suggestions.

    Regards,
    Anton Dobrev
    Telerik
     
    Everlive is now Telerik Backend Services, and is part of the Telerik Platform.
     
Back to Top