Custom Image-Uploading Field

Posted by Community Admin on 04-Aug-2018 04:26

Custom Image-Uploading Field

All Replies

Posted by Community Admin on 29-Jun-2014 00:00

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: www.sitefinity.com/.../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

Posted by Community Admin on 02-Jul-2014 00:00

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
 

Posted by Community Admin on 02-Jul-2014 00:00

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

Posted by Community Admin on 07-Jul-2014 00:00

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
 

This thread is closed