imagebrowser custom schema

[Dennis]

Hello,

I'm implementing the  imagebrowser in my project. I want to use a custom schema for my imagebrowsing backend api. I see in the api docs that there are such possibilites, but I couldnt find an example. The example in the demos for imagebrowser is very basic. Is there maybe a more complete example showing more detailed stuff like custom schemas.

[Rosen]

Hello Dennis,

In order to specify a custom field mapping you should just set a schema similar to the following:

imageBrowser: {
   schema: {
     model: {
         fields: {
            name: { field: "CustomName" },
            type: { field: "CustomFileType" },
            size: { field: "CustomSize" }
         }
     }
   },
   transport: {
        //... transport configuration
   }
}

This will map to a record which looks like the following:

{
   CustomName: "File1.jpg"
   CustomFileType: "f",
   CustomSize: "123333"
}

Greetings,
Rosen
the Telerik team

[Dennis]

Thank you for your answer. Hmmm... The thing is I have random generated long filenames in my backend and user assigned friendly names.  So in my API, the path to the filename for the image would be soimething like '0023534984398943234_140x140.jpg", but the name of the image is a separate field saying something like "KendoUI Logo". I don't want the long filenames to be the names under the images in the browser. Is connecting something like this possible currently with the image browser?

UPDATE:

Also, connected with this I don't undertand the ThumbnailUrl / imageUrl transport methods.....
I guess I would just attach the name to my user friendly name and attach my filepath to the imageUrl transport property. But the example and the documentation dont explain this too  well. 

the image url has a {0} attached which seems to pull the Name, can I attach other API properties the same way? {1} Gives me nothing.

Also in the example thumbnailUrl is simply mapped to imagebrowser/thumbnail but i see the ajax request is made to imagebrowser/thumbnail?path=filename . Where did it get the path from? How do i customize this?


General piece of feedback is that the imagbrowser seems great but heavily under documented.

[Rosen]

Hello Dennis,

The thumbnailUrl is the URL from which the thumbnail version of the image will be requested. Thus, you can specify a server "endpoint" which can provide such version of the image for example by dynamically resizing it, or set a URL which represents the location of a already resized image. 

Similar to this the imageUrl is the URL which will be inserted into the editor content. This URL should point to the actual image or to a "endpoint" which to serve it.

For both methods the current path with the file name will be provided. Also you may assign a function, instead of setting a string value and construct the URL manually. Those URLs will be assign as src attribute to matching img element, either shown in the list view or in the editor content. There are no AJAX requests, this is simple GET requests for the image.

Regarding the fileName. You are free to use which name of the file you like as long as you can provide the actual file using this name and the name is unique for the path. For example you can return the friendly name instead of the real name in the list of files and then use the thumbnailUrl and imageUrl endpoints to dynamically map the friendly name to the actual file and serve it.

Regards,
Rosen
the Telerik team

[Dennis]

thanks again for the response,

I still don't understand how the thumbnailUrl gets the current image name. imageUrl seems to use {0} to get it. With thumbnailUrl that doesnt work it just somehow gets a ?path GET attribute appended. From where does that attribute come from. Can i customize it?

The documentaiton says: " If function is assign, the current path and image name will be provided." How are they provided? nothing comes as an argument to the function? the best solution for me would be if I could get that thumbnails transport item from this funciton since I have all the metadata needed inside.

[Rosen]

Hello Dennis,

By default the concatenated path and image name will be assign as a parameter to the provided URL. However, if instead a function is assign, the path and the image name will be pass as a parameters.

thumbnailUrl: function(path, name) {
    return path + name;
}

All the best,
Rosen
the Telerik team

[Dennis]

I found my problem. The thing is the first argument is empty(path) for me, the second one works (the name). So what exactly is the path here?

[Rosen]

Hi Dennis,

The path value is the current part which content is displayed within the ImageBrowser. It will be empty when the content of root folder is shown. When the user navigates into the folder structure it will  be changed accordingly.

All the best,
Rosen
the Telerik team

[Stoyan]

Hello Rosen,

According to the documentation I can have an extra filed in my model something like "sizeInPxl"? How can I get it displayed in imageBrauser listView? I'm assigning imageBrauser listView to variable and then:

myImageBrouserListView.setOptions({
    template: "<li>#:name# #:sizeInPxl#</li>"
});
It works. But the default template is overridden and everything is falling apart. 

[Rosen]

Hello Stoyan,

The ImageBrowser is not designed to have its template overridden. There are required attributes (such as uid attribute and the k-tile class name) which the item should have in order widget to work.

On a side note. As your question is not related to this thread topic, I would ask you to open a separate support request if additional questions arise.

Regards,
Rosen
Telerik