More in this section

Forums / General Discussions / Thumbnail generation in Documents & Files

Thumbnail generation in Documents & Files

10 posts, 0 answered
  1. Florian
    Florian avatar
    17 posts
    Registered:
    08 Aug 2008
    31 Jan 2011
    Link to this post
    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
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    31 Jan 2011
    Link to this post
    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
  3. Florian
    Florian avatar
    17 posts
    Registered:
    08 Aug 2008
    01 Feb 2011
    Link to this post
    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
  4. Florian
    Florian avatar
    17 posts
    Registered:
    08 Aug 2008
    02 Feb 2011
    Link to this post
    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
  5. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    07 Feb 2011
    Link to this post
    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
  6. Florian
    Florian avatar
    17 posts
    Registered:
    08 Aug 2008
    08 Feb 2011
    Link to this post
    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



  7. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    09 Feb 2011
    Link to this post
    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
  8. Florian
    Florian avatar
    17 posts
    Registered:
    08 Aug 2008
    10 Feb 2011
    Link to this post
    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
  9. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    22 Feb 2011
    Link to this post
    Hi Florian,

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

    All the best,
    Ivan Dimitrov
    the Telerik team
  10. Florian
    Florian avatar
    17 posts
    Registered:
    08 Aug 2008
    23 Feb 2011
    Link to this post
    Yes the problem is finally solved with the last support request yesterday. Regards, Florian
10 posts, 0 answered