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

Forums / Developing with Sitefinity / Custom Image-Uploading Field

Custom Image-Uploading Field

4 posts, 0 answered
  1. Brendan
    Brendan avatar
    2 posts
    Registered:
    29 Jun 2014
    29 Jun 2014
    Link to this post

    Hi there.  

    I'm new to sitefinity, so please help educate me if i'm saying something nonsensical!

    So my goal is, specifically, to use a custom image uploader to help a user crop an image to a specific ratio, when adding or editing content with a module.  I've got javascript on the client side that will do this.  Swell.  

    Since i'm using the module for altering this content, i *think* i need a custom field to do it.  I'd love to replicate the appearance and functionality of the default image uploader, and then modify what happens after an upload, or an image selection from the images that already exist.  I went through the documentation here: http://www.sitefinity.com/documentation/gettingstarted/creating-custom-sitefinity-field-controls

    It allowed me to successfully implement a simple text field.  Good.

    After that, i tried to add a MediaContentSelectorView to the ascx file.  When i do that, i start getting null reference errors when i use the field and try to access instances of the module, specifically it's complaining that this.Container is null, where "this" is my class that inherits from FieldControl.  It throws the exception during page load, in   Telerik.Sitefinity.dll!Telerik.Sitefinity.Web.UI.ContentUI.Views.Backend.Detail.SectionControl.FieldsRepeater_ItemDataBound

    I'm just beating my head against the wall on this.  Can anyone point me in the direction that will help me create a somewhat complex custom field? 

    Thanks so much,

    - Brendan

  2. Ivan D. Dimitrov
    Ivan D. Dimitrov avatar
    310 posts
    Registered:
    26 Mar 2015
    02 Jul 2014
    Link to this post
    Hello Brendan,

    I believe the easiest way for you to achieve your goal is to use an image selector. Please have a look at this blog post for information on how to implement it. From then on you can place it in a custom field and add your crop logic in either the designer or the control itself.

    Regards,
    Ivan D. Dimitrov
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  3. Brendan
    Brendan avatar
    2 posts
    Registered:
    29 Jun 2014
    02 Jul 2014 in reply to Ivan D. Dimitrov
    Link to this post

    Hello Ivan,

    Thanks for the response!  Three things:

    1) Did you mean to include a link to a blog post?  I can't see one in your post.  

    2) I attempted to use a MediaContentSelectorView (as per several posts here, here, here, and here) to select the image and then i wanted to intercept the image between form submission and database-saving.  Whenever i included the mediacontentselectorview in my ascx file, i received a NullReferenceException stating that this.Container was null.  Do you have any insight on why that is?  I included it in the getscriptdescriptors section, and used the following markup:

    <sf:MediaContentSelectorView
        id="selectorView"
        runat="server"
        ContentType="Telerik.Sitefinity.Libraries.Model.Image"
        ParentType="Telerik.Sitefinity.Libraries.Model.Album"
        LibraryBinderServiceUrl="~/Sitefinity/Services/Content/AlbumService.svc/"
        MediaContentBinderServiceUrl="~/Sitefinity/Services/Content/ImageService.svc/"
        MediaContentItemsListDescriptionTemplate="Telerik.Sitefinity.Resources.Templates.Designers.Libraries.Images.ImageItemDescriptionTemplate.htm"
        DisplayResizingOptionsControl="false"
        ShowOpenOriginalSizeCheckBox="false">
    </sf:MediaContentSelectorView>

    3) Where would I intercept the value between form submission and database saving?  I couldn't seem to find anything in the main .cs file that allowed me to access the just-submitted value (which is what i would need to do in my case, i believe - i can't do it all client-side).  Basically the same question as here, but i don't see an answer in there.

    Thanks so much,
    - Brendan

  4. Ivan D. Dimitrov
    Ivan D. Dimitrov avatar
    310 posts
    Registered:
    26 Mar 2015
    07 Jul 2014
    Link to this post
    Hello Brendan,

    Please excuse me for omitting to include a link in my previous reply. What I intended to give you as a sample was described in the link below:
    Selecting Sitefinity 4 Content Inside Widget Designers

    However your last reply clarifies your scenario so I believe you will need to go through a different approach. Since you want to intercept the selected value of the created event you will need to attach to it from Sitefinity's event hub. Detailed information on this can be found in our Documentation. Unfortunately you will not be able to use client-side code in this scenario.

    After you have attached to the event, you have access to all the field values and you can manipulate them in order to override the content saved in the database. You can find detailed in structions on our Related Data API in our Documentation. Basically you have two approaches. One is using the ContentLinksManager:
    DynamicModuleManager dynamicModuleManager = DynamicModuleManager.GetManager();
                ContentLinksManager contentLinksManager = ContentLinksManager.GetManager();
                Type pressReleaseType = TypeResolutionService.ResolveType("Telerik.Sitefinity.DynamicTypes.Model.Pressreleases.PressRelease");
                // This is how we get the collection of Press release items
                var myCollection = dynamicModuleManager.GetDataItems(pressReleaseType).ToList();
                // At this point myCollection contains the items from type pressReleaseType
                
                foreach (var item in myCollection)
                {
                     
                    if (item.Status == ContentLifecycleStatus.Master)
                    {
                        var linksToRelatedItems = contentLinksManager.GetContentLinks()
                                            .Where(cl => cl.ParentItemId == item.Id &&
      
                                cl.ParentItemType == pressReleaseType.ToString() &&
                                                cl.ComponentPropertyName == "ImagesFrontend");
                        var imageId = linksToRelatedItems.FirstOrDefault().ChildItemId;
                        LibrariesManager libMan = LibrariesManager.GetManager();
      
                        var image = libMan.GetImages().Where(i => i.Id == linksToRelatedItems.First().ChildItemId);
                    }
      
                     
                }
    The other is as described in the link I posted. It relies on the GetRelatedItems extension method:
    using Telerik.Sitefinity.RelatedData;
      
     DynamicModuleManager dynamicModuleManager = DynamicModuleManager.GetManager();
                ContentLinksManager contentLinksManager = ContentLinksManager.GetManager();
                Type pressReleaseType = TypeResolutionService.ResolveType("Telerik.Sitefinity.DynamicTypes.Model.Pressreleases.PressRelease");
                // This is how we get the collection of Press release items
                var myCollection = dynamicModuleManager.GetDataItems(pressReleaseType).ToList();
                // At this point myCollection contains the items from type pressReleaseType
                
                foreach (var item in myCollection)
                {
                      var Data = item.GetRelatedItems("ImagesFrontend");
                }

    Once intercepted, you can alter the image field value (ImagesFrontend in my case) as per your criteria. 

    Regards,
    Ivan D. Dimitrov
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
4 posts, 0 answered