Blogs and Bloggers

Go Back

SlideShow - use an Image Library with an image link using the meatadata field description

My challenge here was to add a field  to an image library to store a link. When the slideshow control is put on a page a library is assigned to the control. This provides linking capabilities from the image. I ultilized the Custom Slideshow  custom control provided on the main Sitefinity website by Jon Ingersoll as the base of my modifications.

The following is  step by step instructions.

1. Set up a  custom control configuration xml file

    A. If your App_Data folder does not include a "Configuration" folder - Create one.

    B. Create Telerik,Sitefinity.Configurations.ControlsConfig.xml file in the Configuration folder

    C. Add the following:            

<controlsConfig
  <viewMap
    <!-- Edit library item properties - Images & Documents.-->
    <viewSettings hostType="Telerik.Libraries.WebControls.Admin.LibraryItemEdit"layoutTemplatePath="~/Sitefinity/Admin/ControlTemplates/Libraries/LibraryItemEdit.ascx" /> 
    </viewMap
</controlsConfig>

 

                     If you already have the xml file just add the viewSettings line.

   D. From the external template download, put LibraryItemEdit.ascx.resx into your     
         Sitefinity/Admin/ControlTemplates/Libraries/App_LocalResources folder

    E. From the external templates zip, put LibraryItemEdit.ascx into your
          Sitefinity/Admin/ControlTemplates/Libraries folder

    F. Add the following to the LibraryItemEdit.ascx.resx

        Name = ItemEdit_LinkUrl    Value=Link to

    G. Modify the LibraryItemEdit.ascx as follows:

        Find the following:

 

<sfGCn:ContentMetaFields ID="imageMetaFields" runat="server"
  <ItemTemplate
   <h3
   <asp:Literal ID="Literal21" runat="server" 
        Text="<%$Resources:ItemEdit_Details %>"></asp:Literal></h3
   <fieldset class="set"
     <ol class="setIn"
      <li
        <asp:Label ID="Label1" runat="server" AssociatedControlID="Author" 
                     Text="<%$Resources:ItemEdit_Author % >"></asp:Label
        <asp:TextBox runat="server" ID="Author"></asp:TextBox>  
      </li>  
      <li
        <asp:Label ID="Label4" runat="server"
          AssociatedControlID="AlternateText"
          Text="<%$Resources:ItemEdit_AlternativeText %>"></asp:Label
        <asp:TextBox runat="server" ID="AlternateText"
           MaxLength="255"></asp:TextBox
        <p class="example"
        <asp:Literal ID="Literal14" runat="server"
          Text="<%$Resources:ItemEdit_ExampleAlternativeText %>" /></p
      </li>

             

            Add the following to the bottom of the above code;

 

 

<li
  <asp:Label ID="Label5" runat="server" AssociatedControlID="Description" 
                    Text="<%$Resources:ItemEdit_LinkUrl %>"></asp:Label
  <asp:TextBox runat="server" ID="Description" ></asp:TextBox
</li>  

 

 

 

         This adds the Link to text and a description textbox. We are using the default descitpion field 
          in the image library to store our link since this is not used for image libraries.

    H. Install the control from the SiteFinity using the admin interface so you have a user control.

        Create 2 files from the following code snippets;

        Slideshow.ascx:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="SlideShow.ascx.cs" Inherits="edu.yale.som.Sitefinity.libraries.SlideShow" %>
<div class="Rotator">
    <telerik:RadRotator runat="server" ID="rotator" RotatorType="SlideShow" SlideShowAnimation-Type="Fade"
        SlideShowAnimation-Duration="1000" PauseOnMouseOver="False" TransitionType="Slideshow"
        Width="470px" Height="300px" ItemHeight="300px" ItemWidth="470px" ScrollDuration="750"
        FrameDuration="10000">
        <SlideShowAnimation />
        <ItemTemplate>
        <a href="<%# DataBinder.Eval(Container.DataItem, "LinkUrl") %>">
            <img src='<%# DataBinder.Eval(Container.DataItem, "Image") %>' height='<%# DataBinder.Eval(Container.DataItem, "Height") %>'
                width='<%# DataBinder.Eval(Container.DataItem, "Width") %>' alt='gallery image' class="RotatorFrame" /></a>
        </ItemTemplate>
    </telerik:RadRotator>
    <div class="RotatorControl">
        <a href="#" onclick="($find('<%= rotator.ClientID %>')).showNext(Telerik.Web.UI.RotatorScrollDirection.Right);return false;"
            class="RotatorPrev">Previous</a> <a href="#" onclick="($find('<%= rotator.ClientID %>')).pause();
                                this.style.display = 'none';
                                document.getElementById('<%= rotator.ClientID %>Start').style.display='block';
                                return false;" class="RotatorStop" id="<%= rotator.ClientID %>Stop">
                Stop</a> <a href="#" onclick="($find('<%= rotator.ClientID %>')).resume();
                                this.style.display = 'none';        
                                document.getElementById('<%= rotator.ClientID %>Stop').style.display='block';return false;"
                    class="RotatorStart" id="<%= rotator.ClientID %>Start">Start</a> <a href="#" onclick="($find('<%= rotator.ClientID %>')).showNext(Telerik.Web.UI.RotatorScrollDirection.Left);return false;"
                        class="RotatorNext">Next</a
    </div>
    <asp:TextBox runat="server" ID="LinkUrl" ></asp:TextBox>
</div>

    

        SlideShow.ascx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Cms.Engine;
using Telerik.Web.UI;
using System.Data;
using Telerik.Libraries;
using System.Collections;
using System.ComponentModel;
  
namespace edu.yale.som.Sitefinity.libraries
{
    public partial class SlideShow : System.Web.UI.UserControl
    {
  
        #region UserControl Properties
        //Name of Sitefinity Gallery
        [Description("Name of Sitefinity Gallery to display.")]
        public string Gallery
        {
            get { return ViewState["_Gallery"] as String; }
            set { ViewState["_Gallery"] = value; }
        }
  
         
        //Control Height
        [Category("Appearance")]
        [Description("Default is 200")]
        public string Height
        {
            get { return ViewState["_Height"] as String; }
            set { ViewState["_Height"] = value; }
        }
  
        //Control Width
        [Category("Appearance")]
        [Description("Default is 200")]
        public string Width
        {
            get { return ViewState["_Width"] as String; }
            set { ViewState["_Width"] = value; }
        }
  
        //enum values for Animation Slide Show Type Drop down.
        //public enum AnimationType { Select = 0, None = 1, Fade = 2, Pulse = 3 }
        public enum AnimationType
        {
            Select = 0,
            None = 1,
            Fade = 2,
            Pulse = 3
        }  
  
        //Animation property that uses the enum valuies
        [Category("Animation Settings")]
        public AnimationType Animation { get; set; }
  
        //Time in millseconds to run the transition animation
        [Category("Animation Settings")]
        [Description("Time in milliseconds for fade animation.")]
        public string Duration
        {
            get { return ViewState["_Duration"] as String; }
            set { ViewState["_Duration"] = value; }
        }
  
        //time in milliseconds that each each image will appear in the control
        [Description("Time in milliseconds each image will appear.")]
        public string FrameDuration
        {
            get { return ViewState["_FrameDuration"] as String; }
            set { ViewState["_FrameDuration"] = value; }
        }
  
        //enum values for the pause on mouse over drop down
        //public enum PauseType { True, False }
        public enum PauseType
        {
            True,
            False
  
        }   
  
        //property to set the pause on mouse over setting.
        [Category("Animation Settings")]
        public PauseType PauseOnMouseOver { get; set; }
        #endregion
  
        protected void Page_Load(object sender, EventArgs e)
        {
            //Check and set properties
            if (Gallery == null && Gallery.ToString() == string.Empty)
                throw new Exception("Error: Gallery name not set");           
              
            if (Height != null && Height.ToString() != string.Empty)
                rotator.Height = new Unit(Height);
              
            if (Width != null && Width.ToString() != string.Empty)
                rotator.Width = new Unit(Width);
              
            //Animation Time
            if (Duration != null && Duration.ToString() != string.Empty)
                rotator.SlideShowAnimation.Duration = int.Parse(Duration);
              
            //Length of Time for each image
            if (FrameDuration != null && FrameDuration.ToString() != string.Empty)
                rotator.FrameDuration = int.Parse(FrameDuration);
  
            if (PauseOnMouseOver.ToString() == "True")
                rotator.PauseOnMouseOver = true;
            else
                rotator.PauseOnMouseOver = false;
  
            //set rotator type by casting Animation enum value to Telerik.Web.UI.Rotator.AnimationType
            if (Animation != 0)
                rotator.SlideShowAnimation.Type = (Telerik.Web.UI.Rotator.AnimationType)Animation;
  
              
  
            //call bind rotator code
            BindRotator();
        }
  
        #region Private Methods
        //method for building datatable from gallery info and binding it to rotator control
        private void BindRotator()
        {
                         
            //Create data table
            DataTable rotatorData = new DataTable();
            rotatorData.Columns.Add("Image");
            rotatorData.Columns.Add("Width");
            rotatorData.Columns.Add("Height");
            rotatorData.Columns.Add("LinkUrl");
  
            //get Images from gallery
            IList listOfImages = getImages(Gallery);
             
  
            //check if there are any images
            if (listOfImages.Count > 0)
            {
                //loop through each image and store url into datatable
                foreach (IContent tempInfo in listOfImages)
                {
                    //remove the ~ from the url, resize the images to match the dimensions of the rotator control
                    rotatorData.Rows.Add(new string[] { tempInfo.UrlWithExtension.Replace("~", ""), rotator.Width.ToString(), rotator.Height.ToString(),tempInfo.GetMetaData("Description").ToString() });
                 
                }
                rotator.DataSource = rotatorData;
                rotator.DataBind();
            }
            //if there are no images, hide the title and hide the rotator
            else
            {
                  
                rotator.Visible = false;
            }
        }
  
        private IList getImages(string libName)
        {
            //create Sitefinity library manager
            LibraryManager libManager = new LibraryManager("Libraries");
  
            //try to access images, if the gallery does not exist the GetLibrary method throws an unhandled exception. The method will throw an error stating the library doesn't exist.
            try
            {
               //get library object
                ILibrary lib = libManager.GetLibrary(libName);
  
                //get Library ID
                Guid[] parentIDs = new Guid[1];
                parentIDs[0] = lib.ID;
  
                //get all images for specific library
                IList listOfImages = libManager.GetContent(0, 0, "Publication_Date DESC", parentIDs);
                
                return listOfImages;
            }
            catch
            {
                throw new Exception("Error: Gallery does not exist");
            }
  
              
  
        }
          
        #endregion
  
    }
}

 

    I. Add the following to your CSS files    

 

 

 

/* SlideShow - start */
.rot{padding:0 11px 0 0px}
.Rotator{width:470px;height:300px;position:relative}
.RotatorControl{width:470px;height:30px;position:absolute;bottom:0;left:0;background:url(/Images/Control.png) 0 0 no-repeat;padding:10px 0 0 8px}
.RotatorControl a{float:left;width:24px;height:20px;line-height:300px;overflow:hidden}
.RotatorPrev{background:url(/Images/hrPrev.gif) 0 0 no-repeat;}
.RotatorStart{background:url(/Images/hrPlay.gif) 0 0 no-repeat;display:none}
.RotatorStop{background:url(/Images/hrStop.gif) 0 0 no-repeat;}
.RotatorNext{background:url(/Images/hrNext.gif) 0 0 no-repeat;}
.RotatorControl .ViewGallery{width:80px;height:13px;background:url(/Images/hrViewGallery.gif) 0 0 no-repeat;position:absolute;right:20px;top:15px}
/* SliedShow - end */
    J. Create and Populate your library.
    K. Add the control to your page
    L. Set the name of the library in the control and set the width and height.
    M. Update the css classes for the proper width and height.

Facebook Twitter DZone It! Digg It! StumbleUpon Technorati Del.icio.us NewsVine Reddit Blinklist Add diigo bookmark

Post a comment!
  1. Formatting options