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

Forums / Developing with Sitefinity / How to use ImageFieldElement

How to use ImageFieldElement

6 posts, 1 answered
  1. Ray
    Ray avatar
    15 posts
    Registered:
    09 Jul 2008
    01 Aug 2011
    Link to this post
    I have created a content module using Josh's post and it's working great. I was hoping to add a field that would allow end users to select an image from the existing image library or upload a new one. I am using the ImageFieldElement currently and it's working great except for when I go back to edit that item the image won't load into the control. I am telling the control to store the Guid of the image in the database so I don't think it has anything to do with the control having issues with parsing the url that is stored. I also find that if I set the DefaultImageId property to a random image it will load that particular image so I know the control is capable of loading an image. What am I doing wrong exactly, any help would be appreciated. I have supplied the code I am using below. I have also looked into using this example but it limited in functionality and from what I can figure out still doesn't working with custom modules only when adding on to an existing Sitefinity Module. Thanks in advance. 

    // Image field
     var imageField = new ImageFieldElement(mainSection.Fields)
     {
         ID = "imageFieldControl",
         DataFieldName = "Image",
         DataFieldType = typeof(Guid), 
         DisplayMode = displayMode,
         Title = "Image",
         CssClass = "sfTitleField",
         WrapperTag = HtmlTextWriterTag.Li 
     };
     mainSection.Fields.Add(imageField);

  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    02 Aug 2011
    Link to this post
    Hi Ray,

    Please take a look at the following forum post. You should better use MediaContentSelector control.
    You can pass the value from itemSelected argument. After the item is saved you can store it so when you open the dialog you can pass it to the highlightSelectedImage or another similar method and set the css class over the element.
    In RefreshUI you can subscribe for add_onItemDataBound


    initialize: function () {
            Telerik.Sitefinity.Samples.SimpleViewCustomDesigner.callBaseMethod(this, 'initialize');

            this._itemSelectedDelegate = Function.createDelegate(this, this._propertyGridItemSelectCommand);
            this._selectorView.add_onItemSelectCommand(this._itemSelectedDelegate);
            this._mediaContentBinderItemDataBoundDelegate = Function.createDelegate(this, this._mediaContentBinderItemDataBound);

        },

    _propertyGridItemSelectCommand: function (sender, args) {
            var dataItem = args.get_dataItem();
            var d = this.get_controlData();
            d.SelectedItemValue = dataItem.Id;
        },

        _mediaContentBinderItemDataBound: function (sender, args) {
            var dataItem = args.get_dataItem();
            var id = dataItem.Id;

        },

        refreshUI: function () {
            var data = this.get_controlData();
            var selector = this.get_selectorView();
         },


    Regards,
    Ivan Dimitrov
    the Telerik team
    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 Public Issue Tracking system and vote to affect the priority of the items
  3. Ray
    Ray avatar
    15 posts
    Registered:
    09 Jul 2008
    05 Aug 2011
    Link to this post
    Hey Ivan,
    I took a look at the post you told me about. It's looks great but it seems to it only work with Control Designers. I am trying to implement this in a custom module admin interface so I am not sure how I would get to the javascript into that page other then to implement a custom FieldElement with a MediaContentSelectorView in it because I can only place code within the admin definitions file which is only c#/vb. Thanks. 
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    05 Aug 2011
    Link to this post
    Hello Ray,

    I posted a sample code about custom filed element that can be added to a definition class, but this is quite complex. You can see the code here.

    There is a sample for image selector in the Products module that comes with SDK installation.

    Best wishes,
    Ivan Dimitrov
    the Telerik team
    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 Public Issue Tracking system and vote to affect the priority of the items
    Answered
  5. Ray
    Ray avatar
    15 posts
    Registered:
    09 Jul 2008
    05 Aug 2011
    Link to this post
    Thanks Ivan,
    I will try those out and see how it goes. As long as I can figure it out once then it should be a breeze the next time I need to implement something like it. Thanks again. 

    -Ray
  6. Ray
    Ray avatar
    15 posts
    Registered:
    09 Jul 2008
    08 Aug 2011
    Link to this post
    I was able to use the example in the products module to implement the image selector and it works great. Thanks for the tip. For people that don't want to dig into the products module yet I put my findings below. I didn't include how the copy method works in the Manager but this will give you an idea of what's going on. 

    This is what goes in the definition class..
    //Product Image
    var productImageField = new ImageFieldElement(mainSection.Fields)
    {
        ID = "avatarField",
        DataFieldName = "ProductImage",
        DisplayMode = displayMode,
        UploadMode = ImageFieldUploadMode.Dialog,
        Title = "ProductImage",
        WrapperTag = HtmlTextWriterTag.Li,
        CssClass = "sfUserAvatar",
        ResourceClassId = typeof(ProductsResources).Name,
        DataFieldType = typeof(ContentLink),
        DefaultSrc = "~/SFRes/images/ProductCatalogSample/Images.NoProductImage.png",// put your default image location example:
        SizeInPx = 100
    };
    mainSection.Fields.Add(productImageField);



    And this goes in the module class in the InstallCustomTaxonomies Method
    var metaMan = initializer.Context.MetadataManager;
     
     
    var type = metaMan.GetMetaType(typeof(ProductItem));
    if (type == null)
    {
        type = metaMan.CreateMetaType(typeof(ProductItem));
    }
     
     
    if (!type.Fields.ToList().Any(fld => fld.FieldName == "ProductImage"))
    {
        type.Fields.Add(ContentLinksExtensions.CreateContentLinkField("ProductImage", "OpenAccessDataProvider", metaMan, RelationshipType.OneToOne));
    }


    Since InstallCustomTaxonomies method only gets run on install I ended up having to use the upgrade method to run the code in my existing module. I used the example here to get an idea of how the upgrade methods works. Also if you already created your own image selector and want to switch to the fancy Sitefinity selector it's helpful to know that Sitefinity stores the relationships of your item and the image in the sf_content_link table. So as long as you know the GUID of the image somehow or can figure it out then you can create a sql script to create the needed rows.

    Hope this helps someone out. 

    -Ray


6 posts, 1 answered