Thumbnails

8 posts, 0 answers
  1. Kjell
    Kjell avatar
    203 posts
    Member since:
    May 2011

    Posted 18 Feb 2013 Link to this post

    I set: ExplorerMode="Thumbnails"
    The images are about 10 mb each, and it takes a long time to load the images to thumbnails visible.
    Is there any way to get around the problem?
  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 19 Feb 2013 Link to this post

    Hello,

    At present, RadFileExplorer does not offer functionality to modify the Thumbnail template but we are planning to introduce such feature in one of the upcoming releases.

    For the time being, you can modify the template by replacing the current ItemTemplate of the control's underlying ListView. The following is the original template used by RadFileExplorer, you can modify it to use smaller (thumbnail) images instead of original ones
    RadFileExplorer1.FileList.ListView.ClientSettings.DataBinding.ItemTemplate =
            @"<li class=""rfeThumbList rlvI"">
                <a href=""javascript: void 0;"" class=""rfeLink rlvDrag#= isSelected ? ' rfeSelectedLink' : ''#"" data-index=""#= index #"" title=""#= Name #"">
                    <span class=""rfeFile#= Telerik.Web.UI.FileExplorerHelper.isWebImage(item.Extension) ? ' rfeImageFile' : '' #"">
                    # if(Telerik.Web.UI.FileExplorerHelper.isWebImage(item.Extension)) {#
                        <img src=""#= item.Url || Path #"" alt=""#= Name #"" width=""32"" height=""32"" />
                    # } else { #
                        <span class=""rfeFileIcon #= Telerik.Web.UI.FileExplorerHelper.getThumbnailCSSExtension(item) #""></span>
                    # } #
                    </span>
                    <span class=""rfeThumbTitle"">#= Name #</span>
                </a>
            </li>";

    I hope this helps.


    Greetings,
    Dobromir
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kjell
    Kjell avatar
    203 posts
    Member since:
    May 2011

    Posted 22 Feb 2013 Link to this post

    Do not understand how / where I put this?
    using vb

    My RadeFileExplorer....
    <telerik:RadFileExplorer ID="RadFileExplorer1" runat="server"
    BackColor="white" 
    EnableOpenFile="False"
    EnableCreateNewFolder="False"
    Language="sv"
    OnClientFileOpen="OnClientFileOpen"
    Skin="Black"
    VisibleControls="Grid, Toolbar, ContextMenus">
            <Configuration
            DeletePaths="~/filmtips/filmgrafik/"
            ViewPaths="~/filmtips/filmgrafik/"
            UploadPaths="~/filmtips/filmgrafik/"
            MaxUploadFileSize="10485760" />
    </telerik:RadFileExplorer>
  5. Vessy
    Admin
    Vessy avatar
    1388 posts

    Posted 26 Feb 2013 Link to this post

    Hi Kjell,

    You have to place the code snippet, provided by Dobri, in the Page_load event of the page, containing the FileExplorer:
    protected void Page_Load(object sender, EventArgs e)
    {
        RadFileExplorer1.FileList.ListView.ClientSettings.DataBinding.ItemTemplate =
                @"<li class=""rfeThumbList rlvI"">
                    <a href=""javascript: void 0;"" class=""rfeLink rlvDrag#= isSelected ? ' rfeSelectedLink' : ''#"" data-index=""#= index #"" title=""#= Name #"">
                        <span class=""rfeFile#= Telerik.Web.UI.FileExplorerHelper.isWebImage(item.Extension) ? ' rfeImageFile' : '' #"">
                        # if(Telerik.Web.UI.FileExplorerHelper.isWebImage(item.Extension)) {#
                            <img src=""#= item.Url || Path #"" alt=""#= Name #"" width=""32"" height=""32"" />
                        # } else { #
                            <span class=""rfeFileIcon #= Telerik.Web.UI.FileExplorerHelper.getThumbnailCSSExtension(item) #""></span>
                        # } #
                        </span>
                        <span class=""rfeThumbTitle"">#= Name #</span>
                    </a>
                </li>";
    }

    Please note, that most probably you will need to extend the template in order to fit your custom requirements (e.g. to set the src to the created thumbnails).

    Kind egards,
    Vesi
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Kjell
    Kjell avatar
    203 posts
    Member since:
    May 2011

    Posted 12 Mar 2013 Link to this post

    I can unfortunately not set src to the code that I want it :-(
    The ViewPaths is:  "~/filmtips/Filmgrafik"
    I try to put Thumbnails in another folder: "~/filmtips/thumb"

    How do I modify the string to it?
    "<img src=""#= item.Url || Path #"" alt=""#= Name #"" width=""32"" height=""32"" />"

  7. Vessy
    Admin
    Vessy avatar
    1388 posts

    Posted 14 Mar 2013 Link to this post

    Hi Kjell,

    To achieve the desired functionality you should implement a custom FileBrowserContentProvider. Then you have to change the behavior of the ResolveDirectory method as the easiest way to do this is to subclass the default provider (Telerik.Web.UI.Widgets.FileSystemContentProvider)  and override that method only.

    For example, you could set the file's URL to the desired thumbnail (in the folder where the custom thumbnails are stored) in the overwritten method:
    Public Overrides Function ResolveDirectory(path As String) As DirectoryItem
        Dim oldItem As DirectoryItem = MyBase.ResolveDirectory(path)
        Dim pageContainsRadFileExplorer As Page = TryCast(HttpContext.Current.Handler, Page)
        Dim rootDir As String = pageContainsRadFileExplorer.ResolveUrl("~/")
     
        For Each fileItem As FileItem In oldItem.Files
            fileItem.Url = String.Format("{0}Images/Thumbnails/{1}", rootDir, fileItem.Name)
        Next
     
        Return oldItem
     
    End Function

    The specific thing here is that the default content provider does not set URLs and when you implement it every image will be a link to its thumbnail but not to itself. This could be workarounded with the following handler, attached to the OnClientFileOpen event, which will bring back the original paths to the images:
    <telerik:RadFileExplorer ID="FileExplorer1" runat="server" OnClientFileOpen="explorerFileOpen">
        <Configuration ViewPaths="~/Images" UploadPaths="~/Images" />
    </telerik:RadFileExplorer>
      
    <script type="text/javascript">
        function explorerFileOpen(explorer, args) {
            args.get_item().set_url(args.get_item().get_path());
        }
    </script>

    Following a similar logic, you could also overwrite the StoreFile method, associating a thumbnail to every new image which is being uploaded.

    For your convenience I am attaching a sample project demonstrating the approach.

    All the best,
    Vesi
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  8. Kjell
    Kjell avatar
    203 posts
    Member since:
    May 2011

    Posted 14 Mar 2013 Link to this post

    Thanks for the exemple files :-)
    Still one problem...

    I have the funktion when i double-click at the image, i want to download the big image in the folder "~/Images/Originals"
    In OnClientFileOpen i use insted "explorerFileOpen" with "Handler.ashx"
    function OnClientFileOpen(oExplorer, args) {
        var item = args.get_item();
        var fileExtension = item.get_extension();
     
        if (fileExtension == "jpg" || fileExtension == "gif" || fileExtension == "png" || fileExtension == "pdf") {
            // File is a image document, do not open a new window
            args.set_cancel(true);
     
            // Tell browser to open file directly
            var requestImage = "Handler.ashx?path=" + item.get_url();
            document.location = requestImage;
        }
    }

    But it downloads the images in "Images/Thumbnails/
    How do I change so that I download the big Picture?
  9. Vessy
    Admin
    Vessy avatar
    1388 posts

    Posted 15 Mar 2013 Link to this post

    Hi Kjell,

    Since the URL of the image is changed in the ResolveDirectory to point the thumbnail files, you must reset it to point the original file whenever when the file is opened / downloaded. The path to the original images is kept in the file's path, so you have to include the code I provided in my previous post:
    function OnClientFileOpen(oExplorer, args) {
        args.get_item().set_url(args.get_item().get_path()); //reset the URL to the original images
        var item = args.get_item();
        var fileExtension = item.get_extension();
     
        if (fileExtension == "jpg" || fileExtension == "gif" || fileExtension == "png" || fileExtension == "pdf") {
            // File is a image document, do not open a new window
            args.set_cancel(true);
     
            // Tell browser to open file directly
            var requestImage = "Handler.ashx?path=" + item.get_url();
            document.location = requestImage;
        }
    }

    Kind regards,
    Vesi
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017