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

Forums / Developing with Sitefinity / adding image selector to News Module

adding image selector to News Module

10 posts, 0 answered
  1. Özkan
    Özkan avatar
    5 posts
    Registered:
    27 Sep 2012
    01 Feb 2013
    Link to this post

    Hi everybody,

    I'm using Telerik Sitefinity 5.1's default 'News' module. Try to modify it by myself and want to do it custom. I want to add image to a news. I didn't find field type 'ImageSelector'. How to add image area? Don't want to use default 'Content' field.

    Thanks

  2. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    01 Feb 2013 in reply to Özkan
    Link to this post
    Hi Ozkan,

    Unfortunately this isn't default functionality for the standard, built-in modules. Only the Dynamic Module Builder has these field types (Images, Documents etc.)

    You could follow this blog post to see how you can create such a field yourself.
    http://www.sitefinity.com/documentation/documentationarticles/developers-guide/how-to/how-to-create-a-simple-image-selector

    Regards,
    Daniel
  3. Nick
    Nick avatar
    113 posts
    Registered:
    21 Oct 2008
    04 Feb 2013
    Link to this post
    Can anyone confirm if the example provided in that link is still relevant and working code? We've spent some time today implementing it only to be presented with type cannot be resolved errors.

    Similarly some custom controls that I moved from an older version to the latest gave the same error, in the end I just recreated the designers through Thunder and that got it working, but we don't have that option with news items. So I'm wondering if some recent SF updates have broken how some of these older designer examples work.
  4. Jen Peleva
    Jen Peleva avatar
    568 posts
    Registered:
    10 Nov 2016
    07 Feb 2013
    Link to this post
    Hi Nick,

    You can use Sitefinity ImageField to add images to the news module. All you have to do is add a custom field to your news and in Interface widget for entering data option choose Custom as field type. Your custom field should be from type Telerik.Sitefinity.Web.UI.Fields.ImageField. Now when you create a news item, you will see the newly created field. Images can be added from already uploaded ones or from the computer.

    To display the value of your field on the news widget template (either list template, or single item template), you need to modify the template a bit, by adding an asp: Image control to it with ImageUrl property - the value of your custom field:

     

    <asp:Image runat="server" ID="Img" ImageUrl='<%# Eval("ImageField")%>' />

    Regards,
    Jen Peleva
    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
  5. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    07 Feb 2013 in reply to Jen Peleva
    Link to this post

    That is indeed a nice option, but you have to be aware you can't delete an image with this approach. When you add it to a news items, it stays there ;)

    I remember some forum posts with request to add a delete button to this image field, but I don't know if they every made it to PITS. Same thing with adding multiple images?

    Regards,
    Daniel

  6. Jen Peleva
    Jen Peleva avatar
    568 posts
    Registered:
    10 Nov 2016
    12 Feb 2013
    Link to this post
    Hello Daniel,

    We have a custom ImageField, that has a remove button included to it. Please find attached a project.Add it to your solution and fix the references (so that they're pointing to the correct Sitefiniy version you're using).Then add a reference from Sitefinity to the project and build the solution. Go to Sitefinity backend and register a new module with the type of the project (attached below). This will create all required virtual paths. Now to create the new custom field, simply run the following code in a WebForm in the project:

    //Specify for which module the field will be added
                var moduleType = typeof(NewsItem);
                //Name of the custom field
                var fieldName = "MyImageField";
                //The type of the field config elementM
                var fieldElementType = typeof(ImageFieldElement).FullName;
     
                CustomFieldsModule.AddFieldToModuleConfiguration(fieldName, moduleType.FullName, fieldElementType);
    This will register a new field element to the News module and you will be able to use the custom image field. 

    Greetings,
    Jen Peleva
    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
  7. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    12 Feb 2013 in reply to Jen Peleva
    Link to this post

    Hey Jen,

    That sounds cool. Thanks for sharing!

    Regards,
    Daniel

  8. Aaron
    Aaron avatar
    2 posts
    Registered:
    05 Mar 2013
    17 May 2013 in reply to Jen Peleva
    Link to this post
    Hello Jen,

    How can we do the same in sitefinity 5.4 version? I want to add a image field when adding news item.

    Thank you,
    Aaron
  9. Jen Peleva
    Jen Peleva avatar
    568 posts
    Registered:
    10 Nov 2016
    22 May 2013
    Link to this post
    Hello Aaron,

     The approach in 5.4 is the same. We haven't introduced changes to this version.

    Regards,
    Jen Peleva
    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 Public Issue Tracking system and vote to affect the priority of the items
  10. Michael
    Michael avatar
    67 posts
    Registered:
    16 Mar 2012
    05 Jun 2013
    Link to this post
    I tried looking through the code in those attachments, and I'm not sure what I'm looking at... There seems to be all kinds of different code in there that isn't doing anything. I would like to provide my implementation but it won't allow me to attach .ZIP files. So here ya go:

    https://dl.dropboxusercontent.com/u/9702656/NSC.Sitefinity.Modules.AssetPickerFields.zip

    In any event, I can provide our implementation which we use. It should function identically to the Module Builder selectors, with the exception of not allowing for multiple selectors for one field (e.g. you can't change it's settings to select multiple images for one field, etc.). And it'll allow for selection of Image, Document OR Video types.

    It's setup as an actual module which should make it easier to install the actual fields (Just add the module as you would any other after adding the project, resolving dependencies, adding the reference to your Sitefinity project, and recompiling).

    Then usage when adding  custom fields just means adding a "Short text" field, using a custom widget, and putting in the namespace for whichever type of selector you want (e.g. NSC.Sitefinity.Modules.AssetPickerFields.ImageField.ImageField).

    Some notes:

    1. This is dependent on a custom HTML5 video player we also wrote for the "read mode" of the video selector field. You can eliminate that dependency by deleting the video field if you don't need it, or by changing the template for the VideoField to use the builtin Silverlight media player. Our video player implementation actually should implement the same interface, so they should be a drop-in change. Just change the reference to our video player to use Telerik.Sitefinity.Modules.Libraries.Web.UI.Videos.MediaPlayerControl instead (Two changes, one in the template, and one in the code behind for it).
    2. I would recommend changing the root namespaces on everything to something more generic, but I'm too lazy to do it for this right now. NSC is our organization root, so all our projects are named after that.
    3. I suspect there is a better way to enter these fields into the system so that they are easily selectable when adding a new field instead of having to go through the "Select Short Text, select Custom, enter assembly location for widget" dance. If you figure out how to do it, let me know, as I would have loved to have done that with our implementation, but never got a straight answer on how to do it.
    4. I take no responsibility for this. If someone wants to take it and run with it / create an actual community module for it, etc., be my guest. I hope someone does this, in fact, because maybe it'll light a fire to get an official implementation in.
    5. This is just the source code / project file. I will not compile it for you. Have fun.
10 posts, 0 answered