1-888-365-2779
+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Control Templates

Control Templates

9 posts, 0 answered
  1. Jay
    Jay avatar
    25 posts
    Registered:
    12 May 2008
    05 Jun 2008
    Link to this post
    Hi,

    We are currently prototyping our site in sitefinity and it is rather apparent we are going to need to add a substantial number of custom fields e.g. a url in the image library.

    It looks as if any image library created will have this url text box as all image libraries inherit the same Control Template.

    What is the best solution for creating custom Control Template, currently I have added a custom attribute to the ControlPanelEdit_Image which then appears in every image library this is the same for the News module which I have also added custom attributes.

    Regards,

    Jay
  2. Georgi
    Georgi avatar
    3583 posts
    Registered:
    28 Oct 2016
    09 Jun 2008
    Link to this post
    Hello Jay,

    There is a way to have 2 different control templates for 2 different libraries. Here are the things you should do to achieve it:

    1. Create new meta fields.
    2. Create custom library type and assign the custom meta fields to it.
    3. Create Admin control templates and Resource files for that library type.
    4. Create Public control templates.
    5. Set up the controls so they could work with the custom library.

    For example, let's create custom library with type ImageExt, that will hold one additional field, named Photographer. This library type will be obviously different from the regular Image library, since it would have additional meta fields.

    1. Creating the meta fields
    We are going to declare the meta field in the web.config file, section <metaFields>...</metaFields>

    <add key="Libraries.Photographer"  
     valueType="ShortText"  
     visible="True"  
     searchable="True"  
     sortable="True"  
     defaultValue="" /> 

    Adding Photographer meta field to Libraries module, means that this meta field will be presented in the Libraries provider. Now, we have to create a new library type, that will have this field as well.

    2. Create custom library type and assign the custom meta fields to it.

    We can do this through the web.config file. Find the <libraryInfo>...</libraryInfo> section and add:

    <add name="ImageExt"  
     title="ImageExt Library"  
     defaultExtenstions=".png, .jpg, .jpeg, .gif"  
     metaKeys="Photographer, Author, AlternateText, Extension, Name, Height, Width, Size, Category"
    </add> 

    As we can see, our meta field takes part in this Library type. It is not present in Image or Document types, so it will not be visible at all in these types. If you go to the Administration now and create a new library, you will see the attached screenshot (Custom Library.png) showing the new library type. For the purpose of the demo, I have created a library called Photography Collection.

    3. Create Admin and Public control templates for that library type.
    3.1. Creating the Admin Template:

    Make a copy of ControlPanelEdit_Image.ascx file located in \[YourProject]\Sitefinity\Admin\ControlTemplates\Libraries and rename it to ControlPanelEdit_ImageExt.ascx.

    Please note that ControlPanelEdit is the base name, if we assign _ImageExt for example to its name, Sitefinity will load this template to a library type ImageExt. With the same logic ControlPanelEdit_Image.ascx is the template of the standard Image library type.

    In the ControlPanelEdit_ImageExt.ascx we have to define the input controls that assign values to our meta fields. Please make sure you add them inside the <sfGCn:ContentMetaFields>...</sfGCn:ContentMetaFields>. This is the container that holds all controls and fields related to the metafields defined in the web.config file. We can add these controls:
     <li> 
        <asp:Label ID="Label18" runat="server" 
        AssociatedControlID="Photographer" Text="Photographer"></asp:Label> 
        <asp:TextBox runat="server" ID="Photographer" MaxLength="255" 
        TextMode=MultiLine></asp:TextBox> 
        <class="example"><asp:Literal ID="Literal110" runat="server" 
        Text="Image photographed by" /></p
    </li> 

    If you upload an item to the Photography Collection library, you will see a result similar to screenshot Custom Library Item.png.

    3.2. Creating the Resource Files for the new Administrative control template.

    Since we have copied and renamed the original template, we should also copy and rename the resource file associated with it. Simply copy ControlPanelEdit_Image.ascx.resx located in \[YourProject]\Sitefinity\Admin\ControlTemplates\Libraries\App_LocalResources and rename it to ControlPanelEdit_ImageExt.ascx.resx.

    4. Create Public control templates.

    As we have the administrative control templates, we should also create the public ones, so we could show the custom information to our visitors. We will also copy an original template and modify it so it can show the Photographer meta field. For example, let's take the GallerySimpleListTemplate.ascx, located in \[YourProject]\Sitefinity\ControlTemplates\Libraries, make a copy of it and rename it to GallerySimpleListTemplate_Ext.ascx. Actually, in this case it could be any name, because we are able to specify the template to be used by the gallery control.

    To show the Photographer information, we could add the following lines to the newly created template:

    <dd> 
        <strong><asp:Literal ID="Literal1" runat="server" Text="Photo by: " /></strong
        <asp:Literal ID="Photographer" runat="server" /> 
    </dd> 

    5. Set up the controls so they could work with the custom library.

    At the previous step, we created the GallerySimpleListTemplate_Ext.ascx, which corresponds to Simple List gallery mode.

    The bad thing is that the Image Gallery controls needs some tricks to be applied, in order to show images from custom library types. The trick is pretty straightforward. We have to take the GUID of the newly created custom library. In our case this is the Photography Collection gallery. We can take its GUID from the Download List control. Drop this control on the page, click Edit, select the Photography Collection gallery, then go to Advanced and copy the value of the ParentIDs property. This is the GUID of our library. We will use this GUID in order to tell ImageGallery control what to show. You can check the Download List Parent ID.png screenshot.
    What you should do now, is drop the ImageGallery control, click Edit, and select Simple List gallery type at Step 2. Then go to Advanced -> Behavior section and paste the GUID you have copied from the Download List control. Then, your ImageGallery is set up to show images from Photography Collection library via its GUID.
    The last thing we should do, is tell which control template should the ImageGallery control use for the Simple List gallery type.
    At the Advanced control property tab, go to Template Paths and specify GallerySimpleListTemplate_Ext.ascx file to be the template for SimpleListTemplatePath property. See screenshot Custom Public Template.png.

    You can see the result that I get after these modifcations in screenshot results.png

    This is all you have to do. I believe this process will serve as guidance of working with the control properties and templates, as it covers various cases and modifications of the default Sitefinity templates.
    I'm attaching the modified templates also, so they could be a reference for the meta field position.

    We plan to make this process much easier. We will introduce the provider model in some of our future releases. This model is actually available for every other generic content based module, but not for Images and Documents. We could use a second provider for the News module, please refer to our User Manual, Working with Modules -> Customizing Modules -> Adding Providers.

    I hope you find this information helpful. Let us know if you need any further assistance.

    Best wishes,
    Georgi
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Jay
    Jay avatar
    25 posts
    Registered:
    12 May 2008
    10 Jun 2008
    Link to this post
    Hi Georgi,

    Thanks for such a comprehensive reply, I implemented your solution and it is working fantastically.

    I also want use custom admin control templates for the news module, the only way I could see in the user manual to do this was by adding a new provider explained in the "Customizing Modules" section.

    This seems overkill for what I need, I only want to add two new meta fields to a control template, but I don't want these in the base template as they are particular to only one kind of news article, is there a way similar to the libraries module to use custom admin control templates?

    Kind Regards,

    Jay
  4. Vassil Daskalov
    Vassil Daskalov avatar
    261 posts
    Registered:
    18 May 2013
    10 Jun 2008
    Link to this post
    Hi Jay,

    Allowing different control templates according to the current item's type is allowed only for the Images & Documents module. However, we are planning to add the feature for our customers to override the ControlPanel's control. Thus, you would have even more extensibility to the module's functionality. Unfortunately, this change would not make it for the upcoming release.

    Regards,
    Vassil Daskalov
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  5. Sam
    Sam avatar
    10 posts
    Registered:
    29 May 2008
    29 Jun 2008
    Link to this post
    This is great, exactly what I was looking for, thank you.

    One follow up question.
    When I create a new custom image library, taking an image library and adding a few custom Meta keys.
    During the upload of an image though, the system doesn't calculate height and width as in the Images library.
    Is there a way to get this to fire for a custom library?

    Cheers,
    Sam
  6. Vassil Daskalov
    Vassil Daskalov avatar
    261 posts
    Registered:
    18 May 2013
    30 Jun 2008
    Link to this post
    Hello Sam,

    This could be achieved easily by adding a method handler on the application start event of the global.asax. file. You would need to add the following code:

    void Application_Start(object sender, EventArgs e)  
    {  
        Telerik.Libraries.LibraryManager.Executing += new EventHandler<Telerik.ExecutingEventArgs>(LibraryManager_Executing);  
    }  
     
    void LibraryManager_Executing(object sender, Telerik.ExecutingEventArgs args)  
    {  
        if (args.CommandName != "DeleteContent")  
        {  
            if (args.CommandArguments is Telerik.Cms.Engine.IContent)  
            {  
                Telerik.Libraries.LibraryManager manager =new Telerik.Libraries.LibraryManager();  
                  
                Telerik.Cms.Engine.IContent currentItem = ((Telerik.Cms.Engine.IContent)args.CommandArguments);  
                if (currentItem.ParentID != Guid.Empty)  
                {  
                    Telerik.Libraries.ILibrary lib = manager.GetLibrary(currentItem.ParentID);  
                    if (lib != null && lib.TypeName == "YourCustomName" && Telerik.Cms.Engine.ImagesHelper.IsBrowserImage(currentItem))  
                    {  
                        System.Drawing.Image img = System.Drawing.Image.FromStream(new System.IO.MemoryStream(currentItem.Content as byte[]));  
     
                        currentItem.SetMetaData("Size", ((byte[])currentItem.Content).Length);  
                        currentItem.SetMetaData("Width", img.Width);  
                        currentItem.SetMetaData("Height", img.Height);  
                    }  
                }  
            }  
        }  
    }    

    Note that you have to have the fields Width, Height, and Size already defined in your web.config. You would also need to change the YourCustomName to the name you've set for your libraries again in the web.config.

    Hope this helps.

    Greetings,
    Vassil Daskalov
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  7. Sam
    Sam avatar
    10 posts
    Registered:
    29 May 2008
    30 Jun 2008
    Link to this post
    Very cool and thank you.

    One last question, how could I get the admin editor changes into the batch editor?
    I've tried two tactics, which haven't worked:

    first:
    • Copied: ~\Sitefinity\Admin\ControlTemplates\Libraries\BatchEditor.ascx
    • To: ~\Sitefinity\Admin\ControlTemplates\Libraries\BatchEditor_CustomLibName.ascx
    • And edited the <sfGC:ContentMetaFields ID="Default", to no avail.

    second:
    Edited: ~\Sitefinity\Admin\ControlTemplates\Libraries\BatchEditor.ascx
    Adding a <sfGC:ContentMetaFields ID="CustomLibName"
    Also to no avail. I felt for sure it would have been one of those...

    Cheers,
    Sam
  8. Sam
    Sam avatar
    10 posts
    Registered:
    29 May 2008
    30 Jun 2008
    Link to this post
    Upon further reflection, I'm wondering if there is a less invasive method for injecting the image property evaluation logic than in the Global.asax?
    Is there somewhere "down stream" we could do this? A custom/extended class placed in the App_Code directory? An overloaded code behind on the editor asax?

    I'm hoping to reduce application level risk.

    Thanks again.
    Sam
  9. Vassil Daskalov
    Vassil Daskalov avatar
    261 posts
    Registered:
    18 May 2013
    01 Jul 2008
    Link to this post
    Hi Sam,

    You could subscribe to the manger's executing event from any other point for which you are sure that it would be called. That is why I put it in the global.asax file, but if you have some other custom code which you know  would be called, you could add the code there.

    Unfortunately, there is no option to have different batch edit templates for different libraries. The only separation which is applied is for Images and other library types. So if your library is not of the Image type, the ContentMetaFields control with the Default id will be shown.

    Regards,
    Vassil Daskalov
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
Register for webinar
9 posts, 0 answered