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

Forums / Developing with Sitefinity / Requirment : Regestered users with ImageGallery

Requirment : Regestered users with ImageGallery

4 posts, 0 answered
  1. Mansoor
    Mansoor avatar
    52 posts
    Registered:
    29 Jul 2013
    07 Sep 2013
    Link to this post
    Hi,
    Below is our requirement , Can anyone help me on this 

    We would like to give registered users the capability to upload images(ads) in our website and select the time duration. Once uploaded, the admin will approve the images uploaded. Upon approval we would like to show these images on the home page for the duration selected. 

    What is the best way to achieve the above task? Are there are controls that can be used, any code snippets, documentation etc. Please help.

    -Mansoor
  2. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    07 Sep 2013 in reply to Mansoor
    Link to this post
    Hi Mansoor,

    I've replied to your email.

    Kind regards,
    Daniel
  3. Mansoor
    Mansoor avatar
    52 posts
    Registered:
    29 Jul 2013
    07 Sep 2013 in reply to Daniel Plomp
    Link to this post
    Hi,

    Anyone guide me on above my requirement  please !

    -mansoor
  4. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    10 Sep 2013 in reply to Mansoor
    Link to this post
    Hi Mansoor,

    I’ll try to give you a head start on how you could achieve this within Sitefinity using a possible solution.

    Backend maintenance
    To store the details for the banners. (Image, User, Time, Title etc.) you can create a Dynamic Module that holds this information. This way it is easy to enable/disable banners, review version history etc.

    Frontend widget: Submit Banners
    This widget would give a registered user the ability to upload a banner. This can be a simple form that saves the data into the Dynamic Module.
     
    Frontend widget: Show Banners
    This widget will show one or more banners based on the criteria you define. It will pull out the information from the Dynamic Module and show the banners.

    So, you can do a lot with a Dynamic Module but you will need some additional code to push and pull data.

    So what you should do:
    1. Create a dynamic module with the fields: Title, Description, Active, Image
    2. Create ASP.NET UserControls for the two widgets
    3. Register the widget using Sitefinity Thunder
    4. Make sure the page that holds the submit form, is only accessible for registered users

    To upload an image into a Dynamic Module (aka Library Album) take a look at this code:

    /// <summary>
            /// Upload a new banner
            /// </summary>
            /// <param name="sender"></param>
            /// <param name="e"></param>
            protected void cmdUpload_OnClick(object sender, EventArgs e) {
     
                if (!Page.IsValid) return;
     
                // Get the Title
                var bannerTitle = title.Text.Trim();
     
                // Get the Description
                var bannerDescription = description.Text.Trim();
     
                // Get the Duration
                int bannerDuration = 0;
                int.TryParse(duration.Text, out bannerDuration);
     
                // Upload the image
                if (image.PostedFile.ContentLength <= 0) return;
     
                // Upload the image into the library
                var imageId = UploadImage(bannerTitle, bannerDescription, image.PostedFile.InputStream, image.PostedFile.ContentType);
     
                // Create the banner in our Banners module
                CreateBanner(bannerTitle, bannerDescription, imageId, bannerDuration);
            }
     
            /// <summary>
            /// Create a banner
            /// </summary>
            /// <param name="bannerTitle"></param>
            /// <param name="bannerDescription"></param>
            /// <param name="imageId"></param>
            /// <param name="bannerDuration"></param>
            private static void CreateBanner(string bannerTitle, string bannerDescription, Guid imageId, int bannerDuration) {
     
                var dynamicModuleManager = DynamicModuleManager.GetManager();
                var bannerType = TypeResolutionService.ResolveType("Telerik.Sitefinity.DynamicTypes.Model.Banners.Banner");
                var bannerItem = dynamicModuleManager.CreateDataItem(bannerType);
     
                bannerItem.SetValue("Title", bannerTitle);
                bannerItem.SetValue("Description", bannerDescription);
     
                var libraryManager = LibrariesManager.GetManager();
                var bannerImage =
                    libraryManager.GetImages().FirstOrDefault(i => i.Status == ContentLifecycleStatus.Live && i.Id == imageId);
                if (bannerImage != null) {
                    bannerItem.AddImage("Image", bannerImage.Id);
                }
     
                bannerItem.SetValue("Duration", bannerDuration);
                bannerItem.SetValue("Active", true);
                bannerItem.SetValue("DateAdded", DateTime.Now);
                bannerItem.SetString("UrlName", Regex.Replace(bannerTitle.ToLower(), @"[^\w\-\!\$\'\(\)\=\@\d_]+", "-"));
     
                bannerItem.SetValue("Owner", SecurityManager.GetCurrentUserId());
                bannerItem.SetValue("PublicationDate", DateTime.Now);
                bannerItem.SetWorkflowStatus(dynamicModuleManager.Provider.ApplicationName, "Draft");
     
                // You need to call SaveChanges() in order for the items to be actually persisted to data store
                dynamicModuleManager.SaveChanges();
            }
     
            /// <summary>
            /// Upload a new image to the Library
            /// </summary>
            /// <param name="bannerTitle"></param>
            /// <param name="bannerDescription"></param>
            /// <param name="imageStream"></param>
            /// <param name="imageExtension"></param>
            /// <returns></returns>
            private Guid UploadImage(string bannerTitle, string bannerDescription, Stream imageStream, string imageExtension) {
     
                try {
     
                    // Get the manager
                    var librariesManager = LibrariesManager.GetManager();
     
                    // Create a new image
                    var newImage = librariesManager.CreateImage();
     
                    // Get the parent album.
                    var album = librariesManager.GetAlbums().SingleOrDefault(i => i.Title == "Banners");
     
                    // Check if the album exists
                    if (album == null) {
                        album = librariesManager.CreateAlbum();
                        album.Title = "Banners";
                        librariesManager.SaveChanges();
                    }
     
                    // Set the image parent to the Banners album
                    newImage.Parent = album;
     
                    // Set the properties of the image
                    newImage.Title = bannerTitle;
                    newImage.AlternativeText = bannerDescription;
                    newImage.DateCreated = DateTime.UtcNow;
                    newImage.PublicationDate = DateTime.UtcNow;
                    newImage.LastModified = DateTime.UtcNow;
                    newImage.UrlName = Regex.Replace(bannerTitle.ToLower(), @"[^\w\-\!\$\'\(\)\=\@\d_]+", "-");
     
                    // Upload the image file.
                    librariesManager.Upload(newImage, imageStream, imageExtension);
     
                    // Publish the image
                    var result = librariesManager.Lifecycle.Publish(newImage);
     
                    // Save the changes.
                    librariesManager.SaveChanges();
     
                    return result.Id;
     
                } catch (Exception) {
                    return Guid.Empty;
                }
            }

    To show a banner, you need a widget with a designer on which you can select a banner. This would be a Dynamic Content Selector. You can use again Sitefinity Thunder to achieve this functionality.

    Take a look at this code on how to receive a single banner from the Dynamic Module and get the corresponding image from the library:

    #region Properties
           public Guid BannerId { get; set; }
           public DateTime DateTimeActivation { get; set; }
           #endregion
     
           #region Events
           protected void Page_Load(object sender, EventArgs e) {
               BindData();
           }
           #endregion
     
           #region Methods
           /// <summary>
           /// Bind banner data to the controls
           /// </summary>
           private void BindData() {
     
               var dynamicModuleManager = DynamicModuleManager.GetManager();
               var bannerType = TypeResolutionService.ResolveType("Telerik.Sitefinity.DynamicTypes.Model.Banners.Banner");
     
               var banner = dynamicModuleManager.GetDataItem(bannerType, BannerId);
               if (banner == null) return;
     
               // Check to see if the banner is still allowed to be visible
               int duration = 0;
               int.TryParse(banner.GetValue("Duration").ToString(), out duration);
     
               DateTime startTime = DateTimeActivation;
               DateTime endTime = startTime + new TimeSpan(duration, 0, 0, 0);
     
               if (endTime < DateTime.Now) return;
     
               // Still allowed, so bind controls
               litDescription.Text = banner.GetValue("Description").ToString();
     
               var contentLinks = (ContentLink[])banner.GetValue("Image");
               var imageContentLink = contentLinks.Count() > 1 ? contentLinks.OrderBy(x => x.Ordinal).First() : contentLinks.FirstOrDefault();
     
               if (imageContentLink == null) return;
               var image = GetImage(imageContentLink.ChildItemId);
               imgBanner.ImageUrl = image.MediaUrl;
           }
     
           /// <summary>
           /// Get Image by ID
           /// </summary>
           /// <param name="imageId"></param>
           /// <returns></returns>
           private Image GetImage(Guid imageId) {
               var manager = LibrariesManager.GetManager();
               return (imageId != Guid.Empty) ? manager.GetImage(imageId) : null;
           }
           #endregion

    I think this should get you going. If not, find someone who can built you this solution.

    Kind regards,
    Daniel

4 posts, 0 answered