Thumbnail generation in Documents & Files

Posted by Community Admin on 03-Aug-2018 11:25

Thumbnail generation in Documents & Files

Sitefinity - General Discussions

All Replies

Posted by Community Admin on 31-Jan-2011 00:00

Hi

We need to have thumbnails for each uploaded file / document in "Documents & Files".

How can I extend the backend (in "Edit properties" of document/file), that...

a.) there ist automatically generated a thumbnail by custom code
b.) the user can change that thumbnail

c.) any suggestions for 3rd party libraries to create thumbnails out of PDF/DOC(X)

Thanks and regards
Florian

Posted by Community Admin on 31-Jan-2011 00:00

Hi Florian,

To achieve your goal you need to create a custom module and custom data provider that will persist the thimbs during upload. You should have two fields in your database - one for the ID of the content item and one for the thumb.  You can take a look out our Products catalog that comes with the SDK.
We do not have a library that you can use to generate thumbs for documents. You can google for some projects on codeplex.

All the best,
Ivan Dimitrov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 01-Feb-2011 00:00

Hi Ivan

Can I extend the existing upload / property form of document & files in order to generate the Thumbnail and store it in the existing Thumbnail property of the document model? (That was kind of possible with Sitefinity 3.7)

Thanks and regards

Florian

Posted by Community Admin on 02-Feb-2011 00:00

Hi Ivan

There is just explained how to develop an own module from scratch. I don't want to do that, what I need to do is:

- Change the existing document upload/property form of Documents & Files that the user can upload a thumbnail there
- Add a custom handler to something like a "document uploaded event" to generate a thumbnail when the user uploads a document

How can I do that in Sitefinity 4.0? In Sitefinity 3.7 I changed the control templates in order to do that.

Thanks and regards 
Florian

Posted by Community Admin on 07-Feb-2011 00:00

Hello Florian,

You have to change the base definition class and create custom  FileFieldDefinitionElement
and custom FieldType  for your definition that wraps an uploader in it.


var mediaFieldElement = new FileFieldDefinitionElement(mainSection.Fields)
                 
                     ID = "MediaFieldControl",
                     Title = "Thumbnail",
                     DataFieldName = "MediaUrl",
                     DisplayMode = displayMode,
                     CssClass = "",
                     WrapperTag = HtmlTextWriterTag.Li,
                     FieldType = typeof(MediaFieldCustom),
                     LibraryContentType = typeof(Document),
   
                     ItemName = "Document",
                     ItemNamePlural = "Documents",
                     IsMultiselect = false,
                     MaxFileCount = 1
                 ;
             mainSection.Fields.Add(mediaFieldElement);


You can take a look at this post that shows how to replace the default field from the definition.

Generally you have to implement a custom class similar to FileField. You should also replace the MasterGridViewElement with a custom one that will show thumbs.
You can take a look out our Products catalog that comes with the SDK to see how to create custom definition.

Greetings,
Ivan Dimitrov
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 08-Feb-2011 00:00

Hi Ivan

That is the solution I was looking for, thanks!

Yet it's not working, I implemented the CustomField in a seperate library and added it to the fields in the main section of the DocumentsBackendEdit view. Still I need to implement a new or reference the existing template "MediaField.ascx". How can I reference the existing template, I referenced the Telerik.Sitefinity.Resources.dll but I still got the exception:

Invalid resource name "Telerik.Sitefinity.Resources.Templates.Fields.MediaField.ascx" for assembly "com.xs.sf.ui.definitions, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" or empty template.

How can I reference the template "MediaField.ascx" or where do I find the source to implement it myself?

Regards, Florian



Posted by Community Admin on 09-Feb-2011 00:00

Hello Florian,

I am sending you the template of MediaField.ascx

<%@ Control Language="C#" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sitefinity" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI.Videos" TagPrefix="sfLibraries" %>
 
<sitefinity:ResourceLinks id="resourcesLinks" runat="server">
    <sitefinity:ResourceFile Name="Telerik.Sitefinity.Resources.Scripts.Silverlight.js" />
</sitefinity:ResourceLinks>
 
<sitefinity:ConditionalTemplateContainer ID="conditionalTemplate" runat="server">
    <Templates>
        <sitefinity:ConditionalTemplate Left="DisplayMode" Operator="Equal" Right="Read" runat="server">
             
            <asp:Label ID="titleLabel" runat="server" CssClass="sfTxtLbl" />                     
            <%--container which holds silverlight upload control. Height is only initial and will be modified as needed by JS--%>
            <div id="uploaderContainer" runat="server" style="width:557px;height:34px;">
            </div>
             
            <div id="commandsContainer" runat="server">
                <span ID="fileIcon" runat="server" class="sfext" />
                <sfLibraries:MediaPlayerControl id="mediaPlayerControl" runat="server" />
                <sitefinity:CommandBar id="commandBar" runat="server" WrapperTag="div" WrapperCssClass="sfFileOpenReplaceWrp" >
                    <Commands>
                      <sitefinity:CommandToolboxItem runat="server" CommandName="openFile" CommandType="NormalButton" Text="<%$Resources:DocumentsResources, OpenFile %>" CssClass="sfChange" />  
                    </Commands>
               </sitefinity:CommandBar>
            </div>
 
            <asp:Label ID="descriptionLabel" runat="server" CssClass="sfDescription" />        
            <asp:Label ID="exampleLabel" runat="server" CssClass="sfExample" />
 
 
        </sitefinity:ConditionalTemplate>
        <sitefinity:ConditionalTemplate Left="DisplayMode" Operator="Equal" Right="Write" runat="server">
             
            <asp:Label ID="titleLabel" runat="server" CssClass="sfTxtLbl" />                     
            <%--container which holds silverlight upload control. Height is only initial and will be modified as needed by JS--%>
            <div id="uploaderContainer" runat="server" style="width:557px;height:34px;" class="sfFormSeparator">
            </div>
             
            <div id="commandsContainer" runat="server">
                <span ID="fileIcon" runat="server" class="sfext" />
                <div class="sfPreviewVideoFrame"><sfLibraries:MediaPlayerControl id="mediaPlayerControl" runat="server" /></div>
                <sitefinity:CommandBar id="commandBar" runat="server" WrapperTag="div">
                    <Commands>
                      <sitefinity:CommandToolboxItem runat="server" CommandName="openFile" CommandType="NormalButton" Text="<%$Resources:DocumentsResources, OpenFile %>" CssClass="sfChange" />  
                      <sitefinity:CommandToolboxItem runat="server" CommandName="replaceFile" CommandType="NormalButton" Text="<%$Resources:DocumentsResources, ReplaceFile %>" CssClass="sfChange" />
                    </Commands>
               </sitefinity:CommandBar>
            </div>
 
            <asp:Label ID="descriptionLabel" runat="server" CssClass="sfDescription" />        
            <asp:Label ID="exampleLabel" runat="server" CssClass="sfExample" />
        </sitefinity:ConditionalTemplate>
    </Templates>       
</sitefinity:ConditionalTemplateContainer>
 
<script type="text/javascript">
    function switchToFilesSelectedMode(componentId)
        $find(componentId).switchToFilesSelectedMode();
    
    function silverlightUploader_uploadFinished(componentId)
        $find(componentId).uploadFinished();
    
    function silverlightUploader_fileUploaded(componentId, file)
        $find(componentId).fileUploaded(file);
    
 
    function silverlightUploader_fileFailed(componentId, Exception)
        alert(Exception);
    
</script>

You can add it to your solution and try to reference it.

Regards,
Ivan Dimitrov
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 10-Feb-2011 00:00

Hi 

The template is working without any asp.net error.

But it's for uploading media items (videos) and not for thumbnails. Which field do I have to implement an which template to use for uploading thumbnails to a document?

Is there a zip-file (like external templates for sf 3.7) where I can download all the templates?


Thanks and cheers,
Florian

Posted by Community Admin on 22-Feb-2011 00:00

Hi Florian,

I sent several replies to your support request. Please check the support communication.

All the best,
Ivan Dimitrov
the Telerik team

Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!

Posted by Community Admin on 23-Feb-2011 00:00

Yes the problem is finally solved with the last support request yesterday. Regards, Florian

This thread is closed