image upload/picker in module
I'm using the community ed. and I'm working on creating a custom module to upload/select images and add some text. Is there a way I can allow the users to upload or select in image or existing image from the image library?
I was able to do this in 3.7 with ease, but how can accomplish this in 4.1 sp2?
Also, I'm creating an intra-site module, how can I style my module like the built in modules? I'm looking to add the toolbar, remove the top menu from the add/new page, etc. Is there something I can grab or look at for the styles and template being used?
Hello NewToCMS,
Welcome to the forums and welcome to Sitefinity 4 (a.k.a "hell"). Just kidding (or am I?) :)
To begin, I believe you need watch and follow Josh Morale's very helpful webinar (found here) before you do anything else!
In this video, it covers how to create a simple module (non-OpenAccess), create the backend pages & widget, and how to progmatically install a module. The webinar notes found on the page reveals some of the divs and CSS classes for the landing page - I say some because it doesn't show you how to add in a sidebar for extra module features.
The actually code is below, but rather than just giving you this alone which may only be useful in this case, I believe it is better to teach you how I "hacked" at getting the full code and how you can use the same method to work out other stuff Telerik have done.
What I did, to get the full set of divs and class, was use I.E's Developer toolbar (F12) / Firefox's FireBug addon and examined the backend pages of Sitefinity 4. It is pretty much trial and error, some crossing of fingers and sacrificing of sheep.
You can find more information on module development here
Also, you will find a full blown OpenAccess module by downloading the SDK - check out the Products module (but good luck understanding it because it is pretty heavyweight).
01.<h1 class="sfBreadCrumb"> 02. <!-- Page Title -->03. This is my module title!</h1> 04. 05.<div class="sfMain sfClearfix"> 06. <div class="sfContent"> 07. 08. <div class="sfAllToolsWrapper"> 09. 10. <div class="sfAllTools"> 11. <div class="sfActions"> 12. <!-- Toolbox -->13. <ul> 14. <li class="sfMainAction"> 15. <a class="sfLinkBtn sfNew" href='#'> 16. <span class="sfLinkBtnIn">My button</span> 17. </a> 18. </li> 19. </ul> 20. </div> 21. </div> 22. </div> 23. 24. <div class="sfWorkArea sfClearfix"> 25. <div class="rgTopOffset"> 26. <!-- Workspace -->27. Something big goes here.. (like a Radgrid!) 28. </div> 29. </div> 30. </div> 31. 32. 33. <div class="sfSidebar"> 34. <div> 35. <h2> 36. SIDE BAR GOES HERE</h2> 37. <ul> 38. <li>test</li> 39. <li>test 1</li> 40. <li>test 2</li> 41. </ul> 42. </div> 43. </div> 44.</div> 45.<!--/sfMain -->I watched that video and that's how I created my intra-site module, however, I want to add a image/document uploader to my module now so the user can upload an image or select an preloaded image that is in the image gallery. I was able to do that with ease in 3, however not so easy in 4.x, that's what I'm looking for. I don't want to use the htmlfield, so what can I use to allow the users to upload or select an image?
As for OpenAccess, I gave up on that, too many issues and I'm using LINQ (linq object) for my data connection to my tables.
Sorry, you'll have to wait for someone with more knowledge in regards to image/upload on that one. I am going to take a look at this functionality in the Products module (as I know it is definetly in there) but I hope someone provides quicker information. I'll keep you updated if I figure it out...
Hello,
I have a sample prepared which works with a custom field control similar to the one in this blog post. The field control uses the same selector as in the content block to allow you to upload images/select from already uploaded. Let me walk you through the code quickly.
1) I inherit from TextField control and directly work with the textbox.
2) I have reused the dialog for uploading/selecting images. When this dialog is closed I get the item returned and append its id to the textbox's value. Here if you use RadListView you have to create new item and set it.
_windowClosed: function (sender, args) var imageItem = args.get_argument(); if (imageItem) var val = this._get_textValue(); if(val == '') this.set_value(imageItem.Id); else this.set_value(val+";"+imageItem.Id); ,
imageItem variable is the clientside representation of the Image selected. From this item you can acccess of the properties of the image (e.g. ThumbnailUrl which gives the url to the image's thumbnail).
3) When you click publish the bellow method is called:
get_value: function () var val = this._get_textValue(); if (this.get_displayMode() == Telerik.Sitefinity.Web.UI.Fields.FieldDisplayMode.Write) if (val == '' && this._hideIfValue != null) return this._hideIfValue; return val;,
4) When the edit/insert view is loaded of a news item for example the bellow method is called and you get the value stored in the DB as a parameter:
// Sets the value of the text field control depending on DisplayMode.set_value: function (value) if (this._hideIfValue != null && this._hideIfValue == value) if (this.get_displayMode() == Telerik.Sitefinity.Web.UI.Fields.FieldDisplayMode.Write) this._clearTextBox(); else this._clearLabel(); else if (this.get_displayMode() == Telerik.Sitefinity.Web.UI.Fields.FieldDisplayMode.Write) this._set_writeModeValue(value); else this._set_readModeValue(value); this._value = value; this.raisePropertyChanged("value"); this._valueChangedHandler();,
Further notes:
I have registered a Virtual Path in Administration -> Settings -> Advanced -> Virtual Path Provider. This serves the embedded templates from my assembly.
Username and password are admin/password.
Kind regards,
Radoslav Georgiev
the Telerik team
[View:/cfs-file/__key/communityserver-discussions-components-files/295/288552_5F00_ImageSelector_2D00_part01.rar:320:240]
[View:/cfs-file/__key/communityserver-discussions-components-files/295/288553_5F00_ImageSelector_2D00_part02.rar:320:240]
As always, Radoslav, you save the day.
Thanks Radoslav, I'll give it a shot and post back on my status.
I'm using my own table that I defined for my module, can I use this against my table? I'm using LINQ for my data access do to OpenAccess was giving me a headache and I got tired of fighting with it.
is this for v3 or v4? I'm asking because I'm looking at the code and I see a reference to ~/Sitefinity/Dialog/ImageSelectorDialog and I don't see a ~/Sitefinity/Dialog folder in my v4 site, However I do see it in my 3 site, so I was wondering what version this code will work in.
thanks
Hi Newtocms,
Please check the blog post linked in my first response. It explains about the dialog. The ImageSelectorDialog is a class embedded in the assembly. Then this dialog is registered in the Global.asax class of the web application so that it can be called by RadWindow.
Kind regards,
Radoslav Georgiev
the Telerik team
I don't even understand how to get this going.
Also, the link provided is pointing to a blog and not something specific - what am I looking for exactly please?
Thank you.
R
Hello,
I have linked to the wrong post. The description is posted here: http://www.sitefinity.com/blogs/slavoingilizov/posts/11-02-11/creating_a_thumbnail_selector_for_news_items.aspx.
All the best,
Radoslav Georgiev
the Telerik team
Ah, now it all becomes so clear!
Thanks,
R
Also found this in the developers guide:
http://www.sitefinity.com/40/help/developers-guide/how-to-how-to-create-a-simple-image-selector.html
Doesn't allow for a "all-in-one" solution where you are presented with the ability to upload, create an album etc. but better than nothing.
Hi Richard,
The sample submitted by me is extended and has almost all the bells and whistles (does not create new library).
All the best,
Radoslav Georgiev
the Telerik team
I see, thanks for letting us know. After looking at all the information, I still have a question. I haven't implemented anything yet, but before I proceed, am I right in that the information shows only how to add an image selector to a module through "the custom field" feature of a module? If this is true, how can I add to a module (that I created) and doesn't implement this feature?
"Create a custom field in News for the thumbnail (as shown in the video) and specify a custom widget for entering data. The type of the custom widget should be Telerik.Sitefinity.Samples.SimpleImageField."
OK, so I'm looking at the correct url now for this, however, why is this so "over done" in 4? In 3, I added the image uploader, etc to the module/page, and boom good to go, in 4 it seams like it takes forever and a day to do something
Bang on the head there, everything takes forever to get done. Partly because a lot of features are missing, and partly to poor documentation. Just try and write a module, it will keep you busy for days.
@Jean, LOL, I've been working on a module for a week now in 4.x, and this same module took me about 3 hours from start to finish in 3.x. Though out of the box Sitefinity 4.x is one of the best CMS tools around (on a .NET platform), but when it comes to customizing it, (modules, widgets, etc), its at the bottom of the pack in my book.
You have to do so much extra work in 4 to get anything working correctly.
Take this image uploader/selectory I'm asking about, in 3.7, I just created my usercontrol, added a few references, added the image uploader dialog, and boom, completed, in 4.x its like passing a bill through congress, takes forever and a year to get done