Thumbnail images for Custom Templates

Posted by Community Admin on 15-Nov-2010 00:00

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,

Posted by Community Admin on 15-Nov-2010 00:00

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.

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

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) ?

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

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.

Posted by Community Admin on 16-May-2011 00:00

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.

Posted by Community Admin on 19-May-2011 00:00

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 >>

Posted by Community Admin on 25-May-2011 00:00

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. server.domain.com/.../ 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>

<html xmlns="http://www.w3.org/1999/xhtml">

<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 />

<strong>Template:</strong>

<asp:DropDownList ID="templateList" runat="server" DataTextField="Title" DataValueField="Id" />

<br />

<strong>Icon:</strong>

<asp:FileUpload ID="iconUpload" runat="server" /><br />

<asp:Button ID="submitButton" runat="server" Text="Set Icon" OnClick="SetIcon" />

<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.

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

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

Posted by Community Admin on 25-Aug-2011 00:00

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

This thread is closed

All Replies