How to put "Select an image" link used in the Site

Posted by Community Admin on 04-Aug-2018 20:24

How to put "Select an image" link used in the Sitefinity image widget, in your own custom widget.

Sitefinity - Front- & Back-End Development

All Replies

Posted by Community Admin on 08-Jul-2013 00:00

How to put "Select an image" link used in the Sitefinity image widget, in your own custom widget?

This link is NOT to be used in the designer of the widget, but used in the widget itself so that users not logged into Sitefinity, can view the page and click on the link to select their image from the Sitefinity library or upload a new image.

I have attached images to better clarify what I want to do.

imagelink.jpg = The link I want to access.
upload_form.jpg = The dialogue box I am trying to pop-up , when I click on that link.

If you're wondering why I am doing this, it's because it is to be used with a widget that uses a RadGrid and form, with an asp:MultiView, to maintain a personal data on a database table. Part of this data is a photo.

So the image is for the database, NOT the widget, hence why I need it to display when the widget is displayed on the page, not in the widgets designer when you click "Edit" is Sitefinity.



Posted by Community Admin on 09-Jul-2013 00:00

Is this what you are looking for: http://bytanium.com/blogs/2011/04/custom-sitefinity-4-widgets-and-the-icustomwidgetvisualization-interface/ Saw this a while ago and bookmarked it for future use.  Looks like what you are after.

Posted by Community Admin on 09-Jul-2013 00:00

Thanks. I'll have a look at that Blog page. However I need to be able to embed that link in amongst existing HTML code, not as the only think that first appears when you place the widget.

Basically I am trying to replicate the 3.7 SP4 code of:

<sf:ButtonSelector WindowNavigateUrl="~/Sitefinity/UserControls/Dialogs/ImageEditorDialog.aspx" AssociatedControls="hidBioImage,imgBio" ItemTemplatePath="~/Sitefinity/Admin/ControlTemplates/Libraries/Dialogs/ButtonSelector.ascx" runat="server" cssclass="pickerWrapper" ButtonText="Select Image" />

In Sitefinity 5.4.

Also, I did manage to get some leads from a support ticket. This is what they said:

The problem is that the control you would like to utilize on the frontend is designed to work on the backend which is essentially a different approach. Additionally for this control to work on the backend there are a lot of internal scripts involved which cannot be easily translated to the frontend. 

In essence when the link is executed a script is initialized in order to show the EditorContentManagerDialog which is the dialog providing you with the functionality to select images from the existing libraries or asynchronously upload from your computer. Here is how the declaration on the dialog looks like for your reference:
<div id="AsyncUploadPanel" runat="server">
            <sf:EditorContentManagerDialog runat="server" ID="asyncImageSelector" DialogMode="Image" HostedInRadWindow="false"  BodyCssClass="" />
</div>

And this is how the dialog is "popped" on the client component:

var windowWidth = this._editorShowLibFilterWrp ? 655 : 430;
       if (this.get_fieldMode() == Telerik.Sitefinity.Web.UI.Fields.ImageFieldUploadMode.Dialog && this._asyncImageSelector)
           this._uploadDialog = jQuery(this._asyncImageSelector.get_element()).dialog(
               autoOpen: false,
               modal: true,
               width: windowWidth,
               height: "auto",
               closeOnEscape: true,
               resizable: false,
               draggable: false,
               zIndex: 5000,
               dialogClass: "sfSelectorDialog"
           );
 
           this._asyncImageSelectorInsertDelegate = Function.createDelegate(this, this._asyncImageSelectorInsertHandler);
           this._asyncImageSelector.set_customInsertDelegate(this._asyncImageSelectorInsertDelegate);
 
       

Do you have any ideas how I can implement this in my runtime frontend widget (not the widget designer)?

Posted by Community Admin on 09-Jul-2013 00:00

Possibly you could use some trickery, use an .ascx file for your widget template (instead of using the built-in widget editor) - not sure about 5.4 though.  I have done this (again, not in v.5) putting inline code in the .ascx versions of a widget and get code-behind level access to the widget.  Not sure what that code would be, you know more what you are trying to do, but you could give it a go.  Sounds a bit daunting based upon the ticket though!!  You're out of my league.  Just trying to learn something here and your subject looked like it might relate to that blog post I had saved.  Figured it would come in handy sometime.  So I'll be following to see if/how you solve it.  Good luck bro.

Posted by Community Admin on 09-Jul-2013 00:00

Could you use an ascx widget template and some inline code/code behind/trickeration somehow to mimic this? Sounds like it may be a bit daunting based upon your ticket.  Out of my league, but I'll be watching to see if/how you can do it!  Good luck bro.

This thread is closed