Image selector for content items: Save the thumbnail URL in the item
The form, through which you edit content items, is composed of the so-called field controls. Each field widget provides the user interface (UI) for editing and displaying a single property of a content item. In the news item example, the content item is a news item and the property is the thumbnail (created as a custom field). Both the TextBox where you enter the URL and the thumbnail that you see on the public page are part of the same field widget that you create. The TextBox is the Write mode (the user writes the value of the property); the thumbnail is the Read mode (the value of the property is read and displayed).
Most of the necessary functionality is already available as a regular TextField widget. The TextField widget lets you edit titles for news items. In the news item example, you need to enhance the existing TextField widget functionality, so that in the UI you have a link. Once a user clicks the link, either:
- A dialog opens in the backend (when in Write mode)
- A specific image is displayed on the frontend (when in Read mode)
Therefore, you need to inherit the TextField and then override what is required for the different functionality.
Using the following code, you override the Value property on the server and on the client:
public override object Value
{
get
{
var val = string.Empty;
switch (this.DisplayMode)
{
case FieldDisplayMode.Read:
val = this.ImageUrl;
break;
case FieldDisplayMode.Write:
val = this.TextBoxControl.Text;
break;
}
return val;
}
set
{
switch (this.DisplayMode)
{
case FieldDisplayMode.Write:
this.TextBoxControl.Text = value asstring;
break;
case FieldDisplayMode.Read:
var imageId = new Guid(value.ToString());
var url = App.WorkWith().Image(imageId).Get().MediaUrl;
this.ImageControl.ImageUrl = url +"&size=250";
this.ImageUrl =this.ImageControl.ImageUrl;
break;
}
base.Value = null;
}
}
Next, the client part obtains the URL from the dialog and populates the TextBox:
_set_readModeValue: function (value) {
if (value === undefined || value == null) {
this._clearLabel();
}
else {
if (this._imageControl != null) {
jQuery(this._imageControl).attr("src", value);
var imageSizeIndex = value.indexOf("&size=");
if (imageSizeIndex !== -1) {
imageSizeIndex = imageSizeIndex +="&size=".length;
var imageSize = parseInt(value.substr(imageSizeIndex));
jQuery(this._imageControl).attr("height", imageSize);
jQuery(this._imageControl).attr("width", imageSize);
}
}
}
},
. . .
_windowClosed: function (sender, args) {
var imageUrl = args.get_argument();
if (imageUrl && imageUrl !== "") {
this.set_value(imageUrl);
}
},
Then, you must get references to widgets in the template, pass the values from the server to the client, and open the dialog itself.
Up to this point, you created everything Sitefinity CMS needs to select and persist the value of the thumbnail. You must now let Sitefinity CMS know where to find your widgets together with any required metadata. It is for this purpose that Sitefinity CMS uses widget definitions (they define your field widget, so that Sitefinity CMS knows how to use the controlwidget). In the news item example, you do not need to do anything special, so you just inherit from the base definition for the TextField. Once you do this, Sitefinity CMS is able to locate your custom field, display it when you edit news items, and show the selected thumbnail in any news item template.