More customization options for thumbnail generation

Question

The thumbnails in the file explorer are either the full image or they need to be populated by the getImage call of the backend. It would be helpful if this is more flexible, for example with a jsrender template as other components are using as well.

In my case I just want to have the source set to a certain url ( src="/images/example.jpg?preset=thumbnail" which would be handled by imageprocessor)

Ashokkumar Balasubramanian · Answer

Hi Wouter, 
 
In our FileExplorer component thumb nail images allowed to compress on the serve side and loaded into the “FileExplorer” layout to improve performance, when working with large size images. You can enable this option using “EnableThumbnailCompress” API of FileExplorer. Please check the below code block.  
 




[View] 
 
@Html.EJ().FileExplorer("fileExplorer").FileTypes("*.png, *.gif, *.jpg, *.jpeg, *.docx").Path("~/content/images/FileExplorer/").AjaxAction(@Url.Content("/FileExplorer/FileActionDefault")).Width("900px").Height("400px").IsResponsive(true).EnableThumbnailCompress(true).ClientSideEvents(evt=>evt.BeforeGetImage("beforeGetImage")) 
 
If your using this option, we should add the corresponding getImage method to controller part. Please refer to the below code block.  
 




public ActionResult FileActionDefault(FileExplorerParams args) 
        { 
            FileExplorerCustomOperations opeartion = new FileExplorerCustomOperations(); 
            switch (args.ActionType) 
                       { 
                   case "GetImage": 
             //Helps to reduce thumbnail image size before loading it into FileExplorer 
                    opeartion.GetImage(args.Path, args.CanCompress); 
                    break; 
             } 
} 
 
We have provided the “e-thumbImage” class for each Thumb Nail Images, so use this class to get the image elements and modify as your required.   
 
To know more details about this option, please refer the below help document. 
 
https://help.syncfusion.com/aspnetmvc/fileexplorer/thumbnail-compression 
 
Please let us know, if you have any concern on this. 
 
Regards, 
Ashokkumar B.

Wouter · Answer

Yes, I said so. To quote myself:populated by the getImage call of the backendNow, my question is: I want something different, for example link to my own cdn. So, I dont want to use EnableThumbnailCompress, but I dont want to load the original image either.

Ashokkumar Balasubramanian · Answer

Hi Wouter, 
 
We are unable to identify your exact requirement at our end. We suspect that you have tried to change the preview image for Layout and Tile View in FileExplorer. For this requirement, you can disable the showThumbnail option and using the corresponding styles to change it. Please check the below code block. 
 




[CSHTML] 
 
@Html.EJ().FileExplorer("fileExplorer").ShowThumbnail(false).FileTypes("*.png, *.gif, *.jpg, *.jpeg, *.docx").Path("~/content/images/FileExplorer/").AjaxAction(@Url.Content("/FileExplorer/FileActionDefault")).Width("900px").Height("400px").IsResponsive(true) 
 
[Styles] 
 
//Place the corresponding image for this class and align based on your wise 
 
.e-fileexplorer .e-thumbImage.e-fe-icon.e-fe-images{ 
        background-image:url('http://js.syncfusion.com/demos/ejServices/Content/FileBrowser/Employees/1.png'); 
        background-position: center; 
    } 
   
For this requirement we have prepared a sample, please find the sample in below location.   
 
Sample:    
 
http://www.syncfusion.com/downloads/support/forum/137848/ze/FileExplorer_mvc_(2)1331548967.zip   
 
If this is not your requirement. Please provide more details, if possible share an image of your requirement. This would be more helpful to identify your requirement and provide appropriate response.   
  
Regards, 
Ashokkumar B.

Wouter · Answer

My requirement is currently not possible with the file explorer, thats why I'm proposing an enhancement which is:

Option to define a js template

Some syncfusion components use the jsrender templates already so it seems a good fit.

I tried the options with ShowThumbnail & EnableThumbnailCompress, but thats not what I want.

Also the mvc component could have a slightly more logical api.

Instead of using:

@Html.EJ().FileExplorer("fileExplorer").ShowThumbnail().EnableThumbnailCompress();

I would like this better (which is more like layout for example):

@Html.EJ().FileExplorer("fileExplorer").Thumbnail(ThumbnailType.Icons); //Same as .ShowThumbnail(true)

@Html.EJ().FileExplorer("fileExplorer").Thumbnail(ThumbnailType.Compressed); //Same as .EnableThumbnailCompress(true)

@Html.EJ().FileExplorer("fileExplorer").Thumbnail(ThumbnailType.Template).Template("renderImage"); //My proposal ;)

Ashokkumar Balasubramanian · Answer

Hi Wouter, 
 
Currently, we don’t have the option to customize the tile view Items element structure in FileExplorer. We have planned to provide the new event for this requirement. We have considered this as improvement at our end. We will implement this improvement in any of our upcoming releases. We will update you once this improvement has been implemented.  
 
Regards, 
Ashokkumar B.

Wouter · Answer

Thanks a lot!

Ashokkumar Balasubramanian · Answer

Hi Wouter, 
 
As per our previous update we will let you know once its implemented internally. 
 
Regards, 
Ashokkumar B.