Select a site

IMPORTANT: This version of Sitefinity CMS is out of support and the respective product documentation is no longer maintained and can be outdated. Use the version selector to view a supported product version.

For developers: Add a custom thumbnail profile to the widget designer

Apart from the thumbnail profile selector in the widget designer, you can add an option to specify a custom thumbnail profile. That is, specify custom size of the thumbnail.You do this by adding new properties to the widget and the widget designer.

You can use this functionality standalone or as an addition to the thumbnail profile selector. For more information, see For developers: Add a thumbnail profile selector to the widget designer.

Implement the widget properties 

In the code-behind of your widget, you must implement the following properties:

/// <summary>
/// The processing method of the image to be displayed
/// </summary>
public string Method { get; set; }
 
/// <summary>
/// The processing method properties
/// </summary>
public string CustomSizeMethodProperties { get; set; }

These properties will hold the:

  • Image processing method to be used
  • Image processing method properties (in JSON serialized format)

Next, you associate your widget with the widget designer holding the new functionality. You do this by adding the ControlDesigner attribute to the widget class:

[ControlDesigner(typeof(NameOfYourDesignerClass))]

 

Implement the widget designer code-behind

In the InitializeControls method, depending on the image processing method and its properties set in the designer, the image URL of the custom thumbnail is generated. The DisplayMode property indicates when the custom size property is used. 

protected override void InitializeControls(GenericContainer container)
{
    LibrariesManager librariesManager = LibrariesManager.GetManager(this.ProviderName);
    Image image = librariesManager.GetImages()
    .Where(i => i.Id == this.ImageId)
    .Where(PredefinedFilters.PublishedItemsFilter<Image>())
    .FirstOrDefault();
 
    if (this.DisplayMode == ImageDisplayMode.Custom)
    {
        Dictionary<string, string> customSizeMethodPropertiesDict = ServiceStack.Text.JsonSerializer.DeserializeFromString<Dictionary<string, string>>(this.CustomSizeMethodProperties);
        customSizeMethodPropertiesDict.Add("Method", this.Method);
        imageUrl = image.ResolveMediaUrl(customSizeMethodPropertiesDict, urlAsAbsolute);
    }
}

You must add a CustomImageSizeView property to enable users to manage thumbnail size. Next, override the GetScriptDescriptors() method and use the ScriptControlDescriptor class to add a component property for the CustomImageSizeView control. Thus, the control is accessible from the client side.

/// <summary>
/// The control that manages the custom image size case.
/// </summary>
protected virtual CustomImageSizeView CustomImageSizeViewControl
{
Get
    {
        return Container.GetControl<CustomImageSizeView>("customImageSizeView", true);
    }
}
public override IEnumerable<ScriptDescriptor> GetScriptDescriptors()
{
    var descriptor = new ScriptControlDescriptor(this.GetType().FullName, this.ClientID);
 
    descriptor.AddComponentProperty("customImageSizeViewControl", this.CustomImageSizeViewControl.ClientID);
    return new[] { descriptor };
}

 

Implement the client side

In the JavaScript file, add the get and set methods for the CustomImageSizeView:

//gets a reference to the CustomImageSizeView component
get_customImageSizeViewControl: function() {return this._customImageSizeViewControl;},
set_customImageSizeViewControl: function(value) {
    this._customImageSizeViewControl = value;
},

On an refreshUI event of the widget designer, the CustomImageSizeView control need to set the image processing method selected and the method properties stored in the controlData:

this.get_customImageSizeViewControl()
    .setMethodControlsProperties(controlData.CustomSizeMethodProperties);
this.get_customImageSizeViewControl()
    .setImageProcessingMethod(controlData.Method);

On an applyChanges event, the selected image processing method and properties need to be set to the controlData object:

var customSizeMethodProperties = this.get_customImageSizeViewControl().getCustomSizeMethodProperties();
controlData.Method = customSizeMethodProperties.Method;
controlData.CustomSizeMethodProperties = customSizeMethodProperties.CustomSizeMethodProperties;

If you need to hide or display the CustomImageSizeView control, you can use the following code:

this._customSizeOptionValue = " Custom size";
…
var selectedValue = this.get_sizesChoiceField().get_value();
if (selectedValue == this._customSizeOptionValue) {
    jQuery(this.get_customImageSizeViewControl().get_customImgSizeWrp()).show();
} else {
    jQuery(this.get_customImageSizeViewControl().get_customImgSizeWrp()).hide();
}

NOTE: You may want to display by default the custom profile controls in the widget designer or hide them until the user selects the custom profile option. In addition, once a custom profile is set, upon opening the widget designer again, the user must see the values previously set.

Optionally, you can add a beforeSaveChanges event for validation purposes either on the PageLoad event or the refreshUI event. To do this, add the following code:

if (!this._beforeSaveDelegate) {
    var propertyEditor = this.get_parentDesigner().get_propertyEditor();
    this._beforeSaveDelegate = Function.createDelegate(this, this._beforeSaveHandler);
    propertyEditor.add_beforeSaveChanges(this._beforeSaveDelegate);
}

The BeforeSaveChanges handler validates the custom image size properties, so that in case the properties are not valid, you cannot save the thumbnail profile. To implement this functionality, use the following code:

_beforeSaveHandler: function (sender, args) {
    var isValidImageData = this.get_editImageView().validateImageData();
    if (!isValidImageData)
        dialogBase.resizeToContent();
 
    var setCancel = (!isValidImageData);
    args.set_cancel(setCancel);
}

Back To Top