This topic shows how to add an additional parameter to the Images and Documents module properties in Page Edit mode.
Description
Most of the modules have Basic and Advanced properties in Page Edit mode. The properties are accessed by adding the public control of a module to the given page and
clicking on Edit. For the Images and Documents module, there are three sections in the Basic tab properties: Which images to display?, How to display the
gallery? and Gallery Settings. The last section contains settings for displaying the images. An example for extending these settings would be to add textboxes
to specifically set the width and height of an image.
Steps to Follow
Here are the steps to follow in order to accomplish the described task:
- Add the classes MyGallery.cs and MyGalleryDesigner.cs to the App_Code folder. Add the
MyGalleryControlDesigner.ascx, and MyGalleryControlDesigner.ascx.resx classes to a new folder named UserControls and
save it in the root folder of the project.
 |
It is good practice to save all changes and additional features outside the Sitefinity folder. Currently, the
upgrading process of Sitefinity includes changing the Sitefinity folder with its newer version and any custom changes made inside it will be
lost after the upgrade. Therefore, it is recommended to create a new folder for the user controls and save it in the root folder of the
project even though a UserControls folder already exists (it is situated inside the Sitefinity folder). |
- Register the control in order to be accessible from the toolbox. To do that add the following line to the <toolboxControls> section of the
web.config file of the application:
| web.config |
 Copy Code |
|
<add name="MyGallery" section="Custom Controls" type="MyGallery, App_Code" />
|
- Open a page in Edit mode and add the new control, MyGallery, from the toolbox section "Custom Controls" to the page.
- Open the properties of the control, the Gallery Settings section. The Height and Width textboxes are situated between the two checkbox instances.
Classes
There are four classes that need to be added to a Sitefinity project in order to create and use the custom Images and Documents module MyGallery:
MyGallery.cs, MyGalleryDesigner.cs, MyGalleryControlDesigner.ascx, and
MyGalleryControlDesigner.ascx.resx.
| MyGallery.cs |
Copy Code |
|
using System;
using System.Data;
using System.Configuration;
using
System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.ComponentModel;
using Telerik.Cms.Engine;
using Telerik.Framework.Web.Design;
/// <summary>
/// Image gallery control.
/// </summary>
[ControlDesignerAttribute("MyGalleryDesigner, App_Code")]
public class MyGallery :
Telerik.Libraries.WebControls.ImageGallery
{
/// <summary>
/// Gets or sets the height of the thumbnail.
/// </summary>
/// <value>The height of the thumbnail.</value>
[Category("Appearance")]
[DefaultValue(150)]
public int ThumbnailHeight
{
get
{
object obj = this.ViewState["ThumbnailHeight"];
if (obj == null)
return 150;
return (int)obj;
}
set
{
this.ViewState["ThumbnailHeight"] = value;
}
}
/// <summary>
/// Gets or sets the width of the thumbnail.
/// </summary>
/// <value>The width of the thumbnail.</value>
[Category("Appearance")]
[DefaultValue(150)]
public int ThumbnailWidth
{
get
{
object obj = this.ViewState["ThumbnailWidth"];
if (obj == null)
return 150;
return (int)obj;
}
set
{
this.ViewState["ThumbnailWidth"] = value;
}
}
/// <summary>
/// Sets metadata controls for each image content that is currently binding.
/// This method is invoked when content item is data bound.
/// </summary>
/// <param name="itemContainer">The control that contains the item layout template.</param>
/// <param name="contentItem">IContent object representing the content data.</param>
protected override void SetListMetadata(Control itemContainer, IContent contentItem)
{
base.SetListMetadata(itemContainer, contentItem);
// Set the thumbnails only in the 2 modes that currently support them -
// List View and Lightbox
if (this.GalleryTemplateMode == GalleryViewMode.Lightbox
|| this.GalleryTemplateMode ==
GalleryViewMode.ListDetails)
{
HyperLink downloadLink = itemContainer.FindControl("DownloadLink") as HyperLink;
if (downloadLink !=
null)
{
string url =
contentItem.Url +
this.Manager.Provider.ThumbnailExtension;
// We will also set decreaseOnly=true
and proportional=false
url += "?width=" + this.ThumbnailWidth.ToString() +
"&height=" + this.ThumbnailHeight.ToString() +
"&proportional=false";
downloadLink.ImageUrl = ResolveUrl(url);
}
}
}
}
|
| MyGalleryDesigner.cs |
Copy Code |
|
using System;
using System.Data;
using System.Configuration;
using
System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using Telerik.Framework.Web;
/// <summary>
/// MyGalleryDesigner
/// </summary>
public class MyGalleryDesigner :
Telerik.Libraries.WebControls.Design.GalleryDesigner
{
#region Public Properties
/// <summary>
/// Gets or sets the path of the template used by MyGalleryDesigner control
/// </summary>
public override string ItemTemplatePath
{
get
{
return "~/UserControls/MyControlDesigners/MyGalleryControlDesigner.ascx";
}
set
{
base.ItemTemplatePath = value;
}
}
#endregion
#region Base Overrides
/// <summary>
/// Initializes the template to use.
/// </summary>
protected override void InitializeTemplate()
{
base.ItemContainer = new
MyGalleryDesignerContainer(this);
base.ItemTemplate =
ControlUtils.GetTemplate<DefaultGalleryDesignerTemplate>(this.ItemTemplatePath);
base.ItemTemplate.InstantiateIn(base.ItemContainer);
}
/// <summary>
/// Initializes the component which is our public control.
/// </summary>
protected override void InitializeComponent()
{
base.Component = (MyGallery)base.DesignedControl;
}
/// <summary>
/// Creates the gallery designer controls.
/// </summary>
protected override void CreateDesignerControls()
{
// Polymorph the base class container controls
MyGalleryDesignerContainer container = base.ItemContainer as MyGalleryDesignerContainer;
MyGallery galleryComponent = base.Component
as MyGallery;
// Populate the container controls
container.ThumbnailHeight.TextChanged += new
EventHandler(base.Txt_TextChanged);
container.ThumbnailHeight.Text = galleryComponent.ThumbnailHeight.ToString();
container.ThumbnailWidth.TextChanged += new EventHandler(base.Txt_TextChanged);
container.ThumbnailWidth.Text = galleryComponent.ThumbnailWidth.ToString();
base.CreateDesignerControls();
}
#endregion
#region Container
/// <summary>
/// The container class for the MyGalleryDesigner control.
/// </summary>
protected class MyGalleryDesignerContainer :
GalleryDesignerContainer
{
#region Constructors
/// <summary>
/// Initializes a new instance of the <see cref="MyGalleryDesignerContainer"/>
class.
/// </summary>
/// <param name="owner">The owner.</param>
public MyGalleryDesignerContainer(MyGalleryDesigner
owner)
: base(owner)
{
}
#endregion
#region Public Properties
/// <summary>
/// Gets the height of the thumbnail.
/// </summary>
/// <value>The height of the thumbnail.</value>
public IEditableTextControl ThumbnailHeight
{
get
{
if (this.thumbnailHeight == null)
this.thumbnailHeight = (IEditableTextControl)base.FindControl(typeof(IEditableTextControl), "ThumbnailHeight", true);
return this.thumbnailHeight;
}
}
/// <summary>
/// Gets the width of the thumbnail.
/// </summary>
/// <value>The width of the thumbnail.</value>
public IEditableTextControl ThumbnailWidth
{
get
{
if (this.thumbnailWidth == null)
this.thumbnailWidth = (IEditableTextControl)base.FindControl(typeof(IEditableTextControl), "ThumbnailWidth", true);
return this.thumbnailWidth;
}
}
#endregion
#region Private Fields
private IEditableTextControl thumbnailWidth;
private IEditableTextControl thumbnailHeight;
#endregion
}
#endregion
}
|
| MyGalleryControlDesigner.ascx |
Copy Code |
|
<%@ Register Assembly="Telerik.Libraries" Namespace="Telerik.Libraries.WebControls"
TagPrefix="sfWeb" %>
<div class="ctrlProps">
<div class="ctrlContent
slidingWizard">
<div id="slidingWizardSteps">
<div id="Panel1">
<h3><asp:Literal ID="Literal1" runat="server" Text="<$Resources>" /></h3>
<sfWeb:LibrarySelector ID="GuidSelector" runat="server"
SelectAllItemsText="<$Resources>" SelectSpecificItemsText="<$Resources>" />
</div>
<div id="Panel2">
<h3><asp:Literal ID="Literal2" runat="server" Text="<$Resources>" /></h3>
<div id="galleryDisplayOptions" class="galleryDisplayOptions">
<asp:RadioButtonList ID="GalleryTemplateMode" runat="server">
<asp:ListItem
Value="ListDetails" Text="<$Resources>" />
<asp:ListItem
Value="Lightbox" Text="<$Resources>" />
<asp:ListItem
Value="SimpleOnePerPage" Text="<$Resources>" />
<asp:ListItem
Value="Simple" Text="<$Resources>" />
</asp:RadioButtonList>
</div>
</div>
<ol class="slidingWizardNavigation">
<li class="previous"><a href="#" onclick="setMovement('next');
"><strong>Settings</strong> (optional)</a></li>
<li class="next"><a href="#" onclick="setMovement('prev'); ">Back</a></li>
</ol>
<div id="Panel3">
<h3><asp:Literal ID="Literal3" runat="server" Text="<$Resources>" /></h3>
<div id="SelectedMode">
<h3><asp:Literal ID="Literal9" runat="server" Text="<$Resources>" /></h3>
<div class="selectedListDetails">
<h4><asp:Literal ID="Literal22"
runat="server" Text="<$Resources>" /></h4>
<p><asp:Literal ID="Literal12"
runat="server" Text="<$Resources>" /></p>
</div>
<div class="selectedLightbox">
<h4><asp:Literal ID="Literal23"
runat="server" Text="<$Resources>" /></h4>
<p><asp:Literal ID="Literal15"
runat="server" Text="<$Resources>" /></p>
</div>
<div class="selectedSimpleOnePerPage">
<h4><asp:Literal ID="Literal24"
runat="server" Text="<$Resources>" /></h4>
<p><asp:Literal ID="Literal18"
runat="server" Text="<$Resources>" /></p>
</div>
<div class="selectedSimple">
<h4><asp:Literal ID="Literal25"
runat="server" Text="<$Resources>" /></h4>
<p><asp:Literal ID="Literal21"
runat="server" Text="<$Resources>" /></p>
</div>
</div>
<div id="optionalSelectedMode">
<div class="thumbnailListSettings">
<h4><asp:Literal ID="Literal4"
runat="server" Text="<$Resources>" /></h4>
<p id="allowPaging">
<asp:CheckBox ID="AllowPaging" runat="server" onclick="disablePaginOptions(this); " Text="<$Resources>"
/>
</p>
<p id="thumbnailsPerPage" class="thumbnailsPerPage">
<asp:Label ID="Label1" runat="server" AssociatedControlID="ItemsPerPage" Text="<$Resources>" />
<asp:TextBox ID="ItemsPerPage" CssClass="number" runat="server" />
<asp:Literal ID="Literal5" runat="server" Text="<$Resources>" />
</p>
<p>
<asp:Label ID="Label2" runat="server" AssociatedControlID="ThumbnailMaxSize" Text="<$Resources>" />
<asp:TextBox ID="ThumbnailMaxSize" CssClass="number" runat="server" />
<asp:Literal ID="Literal6" runat="server" Text="<$Resources>" />
</p>
</div>
<div class="thumbnailDisplay">
<h4 id="largeImagesthumbnails"><asp:Literal ID="Literal7" runat="server" Text="<$Resources>" /></h4>
<h4 id="largeImagesonly"><asp:Literal ID="Literal10" runat="server" Text="<$Resources>" /></h4>
<ul>
<li><asp:CheckBox ID="EnableTitleInList" runat="server"
Text="<$Resources>" /></li>
<li><asp:CheckBox ID="EnableAuthorInList" runat="server"
Text="<$Resources>" /></li>
<li><asp:CheckBox ID="EnableUploadDateInList" runat="server" Text="<$Resources>" /></li>
<li><asp:CheckBox ID="EnableTagsInList" runat="server"
Text="<$Resources>" /></li>
</ul>
Height: <asp:TextBox ID="ThumbnailHeight" runat="server" />
Width: <asp:TextBox ID="ThumbnailWidth" runat="server" />
</div>
<div class="fullSizeDisplay">
<h4><asp:Literal ID="Literal8"
runat="server" Text="<$Resources>" /></h4>
<ul>
<li><asp:CheckBox ID="EnableTitleInSingleItem" runat="server" Text="<$Resources>" /></li>
<li><asp:CheckBox ID="EnableAuthorInSingleItem" runat="server" Text="<$Resources>" /></li>
<li><asp:CheckBox ID="EnableUploadDateInSingleItem" runat="server" Text="<$Resources>" /></li>
<li id="enableTagsInSingleItem"><asp:CheckBox ID="EnableTagsInSingleItem" runat="server" Text="<$Resources>" /></li>
<li id="allowLinksToNextAndPrev"><asp:CheckBox ID="AllowLinksToNextAndPrev" runat="server" Text="<$Resources>" /></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var galleryOptionsItems =
document.getElementById("galleryDisplayOptions").getElementsByTagName("LI");
if( galleryOptionsItems ) {
var backgroundOffset = 120;
var currentSelectedDisplayOption = null;
for( var i = 0; i < galleryOptionsItems.length; i++) {
galleryOptionsItems[i].style.backgroundPosition =
"5px " + -(-5 + backgroundOffset * i) + "px";
if(galleryOptionsItems[i].getElementsByTagName("input")[0].checked == true) {
galleryOptionsItems[i].className = "selectedOption";
currentSelectedDisplayOption =
galleryOptionsItems[i];
document.getElementById("Panel3").className = currentSelectedDisplayOption.getElementsByTagName("input")[0].value;
}
galleryOptionsItems[i].onclick = function () {
currentSelectedDisplayOption.className = "";
currentSelectedDisplayOption =
this;
currentSelectedDisplayOption.className = "selectedOption";
currentSelectedDisplayOption.getElementsByTagName("input")[0].checked = "checked";
document.getElementById("Panel3").className = currentSelectedDisplayOption.getElementsByTagName("input")[0].value;
}
}
var allowPaging = document.getElementById("allowPaging");
if(allowPaging.checked == false) {
var theInput = document.getElementById("thumbnailsPerPage").getElementsByTagName("input")[0];
theInput.disabled = "disabled";
theInput.className += " disabled";
}
}
function disablePaginOptions (option) {
var theInput = document.getElementById("thumbnailsPerPage").getElementsByTagName("input")[0];
if(option.checked == true) {
theInput.disabled = "";
theInput.className = "number";
} else {
theInput.disabled = "disabled";
theInput.className += " disabled";
}
}
/* sliding init */
var
slidingWizardSteps = document.getElementById("slidingWizardSteps");
if ( slidingWizardSteps ) {
var slidingWizard = slidingWizardSteps.parentNode;
//slidingWizard.style.height =
slidingWizardSteps.offsetHeight + "px";
var init;
var initPosition = 0;
var contentWidth = slidingWizardSteps.offsetWidth;
var liWidth = slidingWizard.offsetWidth;
var movingStep = 100;
}
function prev() {
var move = parseInt(slidingWizardSteps.offsetLeft) + movingStep;
if(parseInt(move) <= 0) {
slidingWizardSteps.style.left = move + "px";
} else {
clearInterval(init);
slidingWizardSteps.style.left = 0 + "px";
}
initPosition += movingStep;
if(initPosition >= liWidth) {
clearInterval(init);
return;
}
}
function next() {
var move = parseInt(slidingWizardSteps.offsetLeft) - movingStep;
var allowed = parseInt(contentWidth) - parseInt(slidingWizard.offsetWidth);
if(parseInt(-move) < parseInt(allowed)) {
slidingWizardSteps.style.left = move + "px";
} else {
clearInterval(init);
slidingWizardSteps.style.left = -allowed + "px";
}
initPosition += movingStep;
if(initPosition >= liWidth) {
clearInterval(init);
return;
}
//alert(move +" "+ allowed);
}
function setMovement(direction) {
clearInterval(init);
initPosition = 0;
init = setInterval(direction+'()', 10);
}
</script>
|
| Example Title |
Copy Code |
<?xml version="1.0"
encoding="utf-8"?>
<root>
<xsd:schema id="root" xmlns="" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
<xsd:import namespace="http://www.w3.org/XML/1998/namespace" />
<xsd:element name="root" msdata:IsDataSet="true">
<xsd:complexType>
<xsd:choice maxOccurs="unbounded">
<xsd:element name="metadata">
<xsd:complexType>
<xsd:sequence>
<xsd:element name="value" type="xsd:string" minOccurs="0" />
</xsd:sequence>
<xsd:attribute name="name" use="required" type="xsd:string" />
<xsd:attribute name="type" type="xsd:string" />
<xsd:attribute name="mimetype" type="xsd:string" />
<xsd:attribute ref="xml:space" />
</xsd:complexType>
</xsd:element>
<xsd:element name="assembly">
<xsd:complexType>
<xsd:attribute name="alias" type="xsd:string" />
<xsd:attribute name="name" type="xsd:string" />
</xsd:complexType>
</xsd:element>
<xsd:element name="data">
<xsd:complexType>
<xsd:sequence>
<xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
<xsd:element name="comment" type="xsd:string" minOccurs="0" msdata:Ordinal="2" />
</xsd:sequence>
<xsd:attribute name="name" type="xsd:string" use="required" msdata:Ordinal="1"
/>
<xsd:attribute name="type" type="xsd:string" msdata:Ordinal="3" />
<xsd:attribute name="mimetype" type="xsd:string" msdata:Ordinal="4" />
<xsd:attribute ref="xml:space" />
</xsd:complexType>
</xsd:element>
<xsd:element name="resheader">
<xsd:complexType>
<xsd:sequence>
<xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
</xsd:sequence>
<xsd:attribute name="name" type="xsd:string" use="required" />
</xsd:complexType>
</xsd:element>
</xsd:choice>
</xsd:complexType>
</xsd:element>
</xsd:schema>
<resheader name="resmimetype">
<value>text/microsoft-resx</value>
</resheader>
<resheader name="version">
<value>2.0</value>
</resheader>
<resheader name="reader">
<value>System.Resources.ResXResourceReader, System.Windows.Forms, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
</resheader>
<resheader name="writer">
<value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
</resheader>
<data name="AllowPaging" xml:space="preserve">
<value>Divide the list
into pages if there are too many thumbnails</value>
</data>
<data name="Author" xml:space="preserve">
<value>Author</value>
</data>
<data name="Category" xml:space="preserve">
<value>Category</value>
</data>
<data name="DescriptionLightbox" xml:space="preserve">
<value>Full-size image
pops up when a thumbnail is clicked (light box)</value>
</data>
<data name="DescriptionListDetailsView" xml:space="preserve">
<value>New page for
full-size image is opened when a thumbnail is clicked</value>
</data>
<data name="DescriptionSimple" xml:space="preserve">
<value>Full-size images
are listed on a page.</value>
</data>
<data name="DescriptionSimpleOnePerPage" xml:space="preserve">
<value>A full-size image
per page. No thumbnails</value>
</data>
<data name="Display" xml:space="preserve">
<value>Display</value>
</data>
<data name="DisplayAllImages" xml:space="preserve">
<value>Images from all
image libraries</value>
</data>
<data name="DisplaySpecificImages" xml:space="preserve">
<value>Images from
selected libraries</value>
</data>
<data name="ForEveryImageDisplay" xml:space="preserve">
<value>For every image
display:</value>
</data>
<data name="ForEveryThumbDisplay" xml:space="preserve">
<value>For every
thumbnail display:</value>
</data>
<data name="GallerySettings" xml:space="preserve">
<value>Gallery
settings</value>
</data>
<data name="HowToDisplayGallery" xml:space="preserve">
<value>How to display
the gallery?</value>
</data>
<data name="ImageTitle" xml:space="preserve">
<value>Image
title</value>
</data>
<data name="InFullSizeImagePageDisplay" xml:space="preserve">
<value>In the page with
the full-size image, display:</value>
</data>
<data name="Lightbox" xml:space="preserve">
<value><strong>List & Lightbox</strong><em>Full-size image pops up when a thumbnail is
clicked (light box)</em></value>
</data>
<data name="LinksToPrevAndNextImage" xml:space="preserve">
<value>Links to the
previous and the next image</value>
</data>
<data name="ListDetailsView" xml:space="preserve">
<value><strong>List & page</strong><em>New page for full-size image is opened
when a thumbnail is clicked</em></value>
</data>
<data name="MaxThumbSize" xml:space="preserve">
<value>Thumbnails sides
shouldn't be larger than</value>
</data>
<data name="NewPageForFullSizeImage" xml:space="preserve">
<value>New page for
full-size image is opened when a thumbnail is clicked</value>
</data>
<data name="PageWithFullSizeImage" xml:space="preserve">
<value>Page with a
full-size image</value>
</data>
<data name="Px" xml:space="preserve">
<value>px.</value>
</data>
<data name="SelectedMode" xml:space="preserve">
<value>Selected
mode</value>
</data>
<data name="SelectedModeLightbox" xml:space="preserve">
<value>List
& Lightbox</value>
</data>
<data name="SelectedModeListDetailsView" xml:space="preserve">
<value>List
& page</value>
</data>
<data name="SelectedModeSimple" xml:space="preserve">
<value>Simple
list</value>
</data>
<data name="SelectedModeSimpleOnePerPage" xml:space="preserve">
<value>One per
page</value>
</data>
<data name="Simple" xml:space="preserve">
<value><strong>Simple list</strong><em>Full-size images are listed on a page.</em></value>
</data>
<data name="SimpleOnePerPage" xml:space="preserve">
<value><strong>One per page</strong><em>A full-size image per page. No thumbnails</em></value>
</data>
<data name="Tags" xml:space="preserve">
<value>Tags</value>
</data>
<data name="ThumbnailList" xml:space="preserve">
<value>Thumbnail
list</value>
</data>
<data name="ThumbsListSettings" xml:space="preserve">
<value>Thumbnail list
settings</value>
</data>
<data name="ThumbsPerPage" xml:space="preserve">
<value>thumbnails per
page</value>
</data>
<data name="UploadDate" xml:space="preserve">
<value>Upload
date</value>
</data>
<data name="WhichImagesToDisplay" xml:space="preserve">
<value>Which images to
display?</value>
</data>
</root>
|