adding image selector to News Module

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

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

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.

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:

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

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:

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

Hey Jen,

That sounds cool. Thanks for sharing!

Regards,
Daniel

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

Hello Aaron,

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

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:

dl.dropboxusercontent.com/.../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.