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

Forums / Sitefinity SDK / Thumbnail images for Custom Templates

Thumbnail images for Custom Templates

9 posts, 0 answered
  1. Tom
    Tom avatar
    37 posts
    Registered:
    26 Apr 2006
    15 Nov 2010
    Link to this post
    Is it possible to create custom thumbnail images to go along with custom templates that we create? Currently, when you go to apply a template to a page, the "Select a Template" window displays all custom templates as a pink rectangle with the word "Custom" in it. The reason I ask is that I envision that we will have dozens of different templates, It would be nice to have a visual queue as to which one is which. It's not that important, but I thought it would be nice to know if the ability already exists.

    I am working with Sitefinity 4.0 Beta 2.

    Thanks,
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    19 Sep 2016
    15 Nov 2010
    Link to this post
    Hi Thomas ,

    There is no UI interface that allows you to set the template images. You can set the image if you are working rpogrammatically.

    sample code

    var taxonomyManager = TaxonomyManager.GetManager();
               var node = taxonomyManager.GetTaxon<HierarchicalTaxon>(BackendTemplatesCategoryId);
               var pageManager = PageManager.GetManager();
               var template = pageManager.GetTemplate(new Guid("2BFF6C39-1918-4F1E-9D5C-9584578C97D2"));
               template.Name = "Test2";
               template.Title = "Test2";
               template.Category = node.Id;
               template.Ordinal = 9;
             
     
               var present = pageManager.GetPresentationItem<TemplatePresentation>();
               present.DataType = Presentation.HtmlDocument;
               present.Name = "master1";
               var resName = "Samples.Templates.FrontEndTemplate.aspx";
               present.Data = ControlUtilities.GetTextResource(resName, this.GetType());
               template.Presentation.Add(present);
     
               present = pageManager.GEtPresentationItem<TemplatePresentation>();
               present.DataType = Presentation.ImageUrl;
               present.Name = "icon";
               present.Theme = null;
               present.Data = "Samples.Templates.images.back.gif";
               template.Presentation.Add(present);
     
     
             
               template.Controls.Add(ctrlD


    Sincerely yours,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. Lasse
    Lasse avatar
    30 posts
    Registered:
    08 Jun 2012
    20 Jan 2011
    Link to this post
    coming back to an older one.. but wanted to ask whether there will be UI later on, or should there be done some sort of custom widget that would programmatically change the picture (in order to ease the maintenance/doing this for many pages) ?
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    19 Sep 2016
    20 Jan 2011
    Link to this post
    Hello Lasse,

    I will log a task for extending the built-in functionality and send your request to our UX team.

    Best wishes,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  5. Mark
    Mark avatar
    147 posts
    Registered:
    01 Jun 2010
    16 May 2011
    Link to this post
    Is there any followup for this functionality? None of my sites use the built in templates and I would really like to be able to signal to my users which template they are choosing.
  6. Antoaneta
    Antoaneta avatar
    258 posts
    Registered:
    02 Nov 2015
    19 May 2011
    Link to this post
    Hi Mark,

    Thank you for getting back to us. Unfortunately this task is not scheduled for implementation yet.
    I have logged this request in our issue tracking system where you can vote for it and raise its priority. The issue ID is 6111

    Greetings,
    Antoaneta
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

  7. Chris Hansen
    Chris Hansen avatar
    6 posts
    Registered:
    24 Mar 2010
    25 May 2011
    Link to this post
    NOTE: Because of a bug in the Sitefinity code, this will only work properly if your Sitefinity instance is not running at the root of your server. http://server.domain.com/mysite/ will work whereas http://server.domain.com/ will not. The icons on the Page Templates page and the page editor toolbar in Layout mode will not be rendered correctly with the second setup, but the icons on the template selector will render correctly in both scenarios.

    Until the Sitefinity team can implement an interface for setting icons on custom templates, I have created an aspx page which uses the API to implement the solution above in this thread. It is secured using the Sitefinity permissions so that users who do not have modify permissions for a template cannot adjust the icons. If you implement this temporary solution, you should set the IconsDirectory constant to the directory where you want the icons to be stored on the file system.

    <%@ Page Language="C#" AutoEventWireup="true" Inherits="System.Web.UI.Page" %>
    <%@ Import Namespace="System" %>
    <%@ Import Namespace="System.Drawing.Imaging" %>
    <%@ Import Namespace="System.IO" %>
    <%@ Import Namespace="Telerik.Sitefinity.Modules.Pages" %>
    <%@ Import Namespace="Telerik.Sitefinity.Pages.Model" %>
    <%@ Import Namespace="Telerik.Sitefinity.Security" %>
     
    <script runat="server">
        private const string IconsDirectory = "~/Static/Thumbnails";
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!this.IsPostBack)
            {
                PageManager pageManager = PageManager.GetManager();
                this.templateList.DataSource = pageManager.GetTemplates().OrderBy(t => t.Title);
                this.templateList.DataBind();
            }
        }
     
        protected void SetIcon(object sender, EventArgs e)
        {
            this.errorMessage.Visible = false;
            this.successMessage.Visible = false;
     
            if (!this.iconUpload.HasFile)
            {
                this.errorMessage.Text = "You must upload an image";
                this.errorMessage.Visible = true;
                return;
            }
     
            PageManager pageManager = PageManager.GetManager();
            PageTemplate template = pageManager.GetTemplate(Guid.Parse(this.templateList.SelectedValue));
            if (!template.IsGranted(SecurityConstants.Sets.PageTemplates.SetName, SecurityConstants.Sets.PageTemplates.Modify))
            {
                this.errorMessage.Text = "You do not have permission to modify this template";
                this.errorMessage.Visible = true;
                return;
            }
     
            System.Drawing.Image iconBitmap = System.Drawing.Image.FromStream(this.iconUpload.FileContent);
     
            System.Drawing.Image largeIcon = iconBitmap.GetThumbnailImage(105, 79, delegate() { return false; }, IntPtr.Zero);
            System.Drawing.Image smallIcon = iconBitmap.GetThumbnailImage(42, 32, delegate() { return false; }, IntPtr.Zero);
     
            iconBitmap.Dispose();
     
            string largePath = IconsDirectory + "/" + this.templateList.SelectedValue + ".Icon.png";
            string smallPath = Path.Combine(this.Server.MapPath(IconsDirectory), this.templateList.SelectedValue + ".sml_Icon.png");
     
            largeIcon.Save(this.Server.MapPath(largePath), ImageFormat.Png);
            largeIcon.Dispose();
     
            smallIcon.Save(smallPath, ImageFormat.Png);
            smallIcon.Dispose();
     
            TemplatePresentation urlPresent = template.Presentation.FirstOrDefault(p => p.DataType == Presentation.ImageUrl && p.Name == "icon");
            if (urlPresent == null)
            {
                urlPresent = pageManager.CreatePresentationItem<TemplatePresentation>();
                urlPresent.DataType = Presentation.ImageUrl;
                urlPresent.Template = template;
                urlPresent.Theme = null;
                urlPresent.Name = "icon";
                template.Presentation.Add(urlPresent);
            }
            urlPresent.Data = largePath;
     
            pageManager.SaveChanges();
     
            this.successMessage.Text = "The new icon has been set for " + template.Title;
            this.successMessage.Visible = true;
        }
     
        protected void ResetIcon(object sender, EventArgs e)
        {
            this.errorMessage.Visible = false;
            this.successMessage.Visible = false;
     
            PageManager pageManager = PageManager.GetManager();
            PageTemplate template = pageManager.GetTemplate(Guid.Parse(this.templateList.SelectedValue));
            if (!template.IsGranted(SecurityConstants.Sets.PageTemplates.SetName, SecurityConstants.Sets.PageTemplates.Modify))
            {
                this.errorMessage.Text = "You do not have permission to modify this template";
                this.errorMessage.Visible = true;
                return;
            }
     
            TemplatePresentation urlPresent = template.Presentation.FirstOrDefault(p => p.DataType == Presentation.ImageUrl && p.Name == "icon");
            if (urlPresent != null && urlPresent.Data.StartsWith(IconsDirectory, StringComparison.CurrentCultureIgnoreCase))
            {
                try
                {
                    File.Delete(this.Server.MapPath(urlPresent.Data));
                }
                catch { }
     
                string smallPath = urlPresent.Data;
                string[] smallParts = smallPath.Split('.').Where(s => !String.IsNullOrWhiteSpace(s)).ToArray();
                if (smallParts.Length > 1)
                {
                    smallParts[smallParts.Length - 2] = "sml_" + smallParts[smallParts.Length - 2];
                    smallPath = String.Join(".", smallParts);
     
                    try
                    {
                        File.Delete(this.Server.MapPath(smallPath));
                    }
                    catch { }
                }
     
                template.Presentation.Remove(urlPresent);
                pageManager.SaveChanges();
            }
     
            this.successMessage.Text = "The icon has been reset for " + template.Title;
            this.successMessage.Visible = true;
        }
    </script>
     
    <!DOCTYPE html>
    <head runat="server">
        <title>Custom Template Icon</title>
    </head>
    <body>
        <form runat="server">
        <div>
            <asp:Label ID="errorMessage" runat="server" Visible="false" ForeColor="White" BackColor="Red" />
            <asp:Label ID="successMessage" runat="server" Visible="false" BackColor="Green" />
            <br />
            <br />
            <strong>Template:</strong>
            <asp:DropDownList ID="templateList" runat="server" DataTextField="Title" DataValueField="Id" />
            <br />
            <br />
            <br />
            <strong>Icon:</strong>
            <asp:FileUpload ID="iconUpload" runat="server" /><br />
            <asp:Button ID="submitButton" runat="server" Text="Set Icon" OnClick="SetIcon" />
            <br />
            <br />
            <br />
            <asp:Button ID="resetButton" runat="server" Text="Reset Icon to Default" OnClick="ResetIcon"
                OnClientClick="if (!confirm('Are you sure you want to reset the icon to the default custom icon?')) return false;" />
        </div>
        </form>
    </body>
    </html>

    To use this page, you will need to do the following:
    1. Create the image you want to use as the icon for the desired template. The icon will be resized to 105px X 79px and 42px X 32px by the page. These sizes correspond to the icon sizes required by the UI. The larger icon is found on the template selector and the smaller icon is located on the Page Templates page.
    2. Select the template from the drop down list
    3. Select your image to be uploaded
    4. Click "Set Icon"
    5. Your image is then uploaded and automatically resized to these sizes. The images are then stored in the IconsDirectory.

    To reset the icon for a template back to the default Pink icon with the word custom:
    1. Select the template from the drop down list
    2. Click "Reset Icon to Default"
    3. The icon you previously uploaded will be removed and the template will return to using the default icon.
  8. Gabe Sumner
    Gabe Sumner avatar
    440 posts
    Registered:
    09 Sep 2007
    23 Aug 2011
    Link to this post
    Hey Chris,

    I want to apologize for noticing this thread so late.  We recently encountered this in one of our own projects and found our way to your code.  Thank you so much for sharing this with the community!  We definitely need to add some UI to help with this task, but in the meantime your contribution is extremely helpful.

    Thanks again for taking the time to share this!!!

    Gabe Sumner
    Telerik | Sitefinity CMS
  9. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    25 Aug 2011
    Link to this post
    Great post Chris, thanks!
    I noticed that when making changes to the template, it falls back to the default template? Is that expected behaviour?

    Regards,
    Daniel
9 posts, 0 answered