Custom Image-Uploading Field
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
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
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
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);
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"
);