thumbnails

[Kjell]

I have ExplorerMode="Thumbnails" on my RadFileExplorer.How to set the Thumbnails bigger?

[Princy]

Hi Kjell,

Try setting the CssClass property of RadFileExplorer to rfeLargeThumbnails to Increase the Dimensions of Thumbnails.

ASPX:

<telerik:RadFileExplorer ID="RadFileExplorer1" runat="server" ExplorerMode="Thumbnails" CssClass="rfeLargeThumbnails">
   <Configuration ViewPaths="~/" UploadPaths="~/" DeletePaths="~/" />
</telerik:RadFileExplorer>

Please take a look into this documentation for more information.

Hope this helps.

Regards,
Princy.

[Kjell]

Yes, that works for, bigger thumbnails.
But i tray to define custom size for Thumbnail items by overwriting the .rfeLargeThumbnails but dont have that to work.
I set in the head tag:

<style type="text/css">
    .rfeLargeThumbnails .rfeThumbList .rfeFile
    {
        width: 64px;
        height: 44px;
        padding-top: 20px;
    }
</style>

And in RadFileExplorer CssClass="rfeLargeThumbnails"

same size, no change.

[Princy]

Hi Kjell,

Try overriding the default CSS using !important as follows to achieve your scenario.

CSS:

<style type="text/css">
    .rfeLargeThumbnails .rfeThumbList .rfeFile
        {
            width: 64px !important;
            height: 44px !important;
            padding-top: 20px !important;
        }
</style>

Hope this helps.

Regards,
Princy.

[Kjell]

Thumbnails does not change size with:

<style type="text/css">
     .rfeLargeThumbnails .rfeThumbList .rfeFile
         {
             width: 44px !important;
             height: 64px !important;
             padding-top: 20px !important;
         }
 </style>

Only background color when MouseOver, see picture
I'm trying to change so the Thumbnails appear portrait mode.....

[Vessy]

Hi Kjell,

Would you, please, try to apply the following CSS styles:

<style type="text/css">
    /* Large thumbnails */
    .rfeLargeThumbnails .rfeThumbList
    {
            width: 136px !important; /*defines thumbnail wrapper dimension*/
    }
    .rfeLargeThumbnails .rfeThumbList .rfeFile
    {
            /*the sum of the height and padding-top values should be equal to the height property defined in the rfeLargeThumbnails class*/
            width: 100px !important;
            height: 80px !important;
            padding-top: 20px;
    }
    .rfeLargeThumbnails .rfeThumbList .rfeImageFile.rfeFile
    {
            height: 100px !important;
            padding-top: 0;
    }
    .rfeLargeThumbnails .rfeThumbList .rfeFile img
    {
            /*defines Image Preview Thumbnail dimension*/
            width: 100px !important;
            height: 100px !important;
    }
</style>

Please, note that this CSS will enlarge only the images' thumbnails. If you want to have bigger thumbnails for all file types (e.g mp3, doc, etc. ) you will need to link your own icon images. This is done because RadFileExplorer uses sprites to display its icons so they cannot be enlarged.

All the best,
Veselina
the Telerik team

[Miguel]

Hi Vessy!

Can you help me with an example of how to change the icon of the thumbnails, for example for pdf files?

using individual  icons, not with sprites.

 

Thanks so much!!!

 

[Vessy]

Hi Miguel,

Depending on the Render mode you are using, you will need to use different selectors in order to overwrite the default image/icon used by RadFileExplorer.

For example, you can use a similar styling in order to modify the PDF thumbnail:

/*Lightweight rendering*/
div.RadFileExplorer .rfeFileIcon.pdf:before,
div.RadFileExplorer .rfeFileExtension.pdf:before {
    content: none;
}

div.RadFileExplorer .rfeFileIcon.pdf,
div.RadFileExplorer .rfeFileExtension.pdf {
    background-image: url("http://icons.iconarchive.com/icons/trayse101/basic-filetypes-2/256/pdf-icon.png");
}

/*Classic rendering*/
div.RadFileExplorer .rfeThumbnailView .rfeFile .rfeFileIcon.pdf {
    background-position:0 0 !important;
    background-image: url("http://icons.iconarchive.com/icons/trayse101/basic-filetypes-2/256/pdf-icon.png");
}

I hope this helps.

Regards,
Vessy
Progress Telerik