Content Hub Transformation parameter for Sitecore image field

A transformation parameter, in the context described, refers to a feature that allows for the dynamic generation of renditions of an asset based on an existing public link without necessitating the creation of a new public link. This is achieved through the application of transformations. Both simple and chained public links can undergo transformation by employing the "t=[transformation_name]" parameter within the public link. For instance, employing the "t=w320" parameter in the public link would resize the image to a width of 320 pixels. The link structure typically follows this format: https://<sitecore_instance>/api/public/content/Figure1-cropped?&t=w320. How to create transformation parameter, you can find here https://doc.sitecore.com/ch/en/users/content-hub/add-or-edit-transformations.html. But my article will about how to integrate a new property field for choose transformation parameter in image properties.

To integrate new functionality into the properties popup, modifications are required within the <your sitecore site>\sitecore\shell\Applications\Media\ImageProperties\ImageProperties.xaml.xml file. Additionally, custom code needs to be implemented in your solution to handle the processing of this XML popup.

Under the height field, I added self-filed for the transformation parameter:

<Literal Text="Height:" GridPanel.NoWrap="true" runat="server"/>
<asp:TextBox ID="HeightEdit" ajax:Change="ChangeHeight" runat="server"/>

<!-- add transformation parameter -->
<Literal Text="Transformation:" GridPanel.NoWrap="true" runat="server"/>
<asp:DropDownList ID="Transformation" runat="server" Width="200" Height="30"/>        

Also, need to update Sitecore.Shell.Applications.Media.ImageProperties and add a link to your class.

<Sitecore.Shell.Applications.Media.ImageProperties x:inherits="MyProject.Foundation.SitecoreExtensions.Platform.sitecore.shell.Applications.Media.ImageProperties.CustomImagePropertiesPage,MyProject.Foundation.SitecoreExtensions">        

Class looks like:

using System;
using System.Web.UI.WebControls;
using Sitecore;
using Sitecore.Configuration;
using Sitecore.Data;
using Sitecore.Data.Items;
using Sitecore.Diagnostics;
using Sitecore.Shell.Applications.ContentEditor;
using Sitecore.Shell.Applications.Media.ImageProperties;
using Sitecore.Web.UI.Sheer;
using Sitecore.Web.UI.XamlSharp.Xaml;

using ListItem = System.Web.UI.WebControls.ListItem;
using Constants = MyProject.Foundation.SitecoreExtensions.Platform.Constants;

public class CustomImagePropertiesPage : ImagePropertiesPage
{
    protected DropDownList Transformation;

    private Database MasterDb => Factory.GetDatabase("master");

    private XmlValue XmlValue
    {
        get
        {
            return new XmlValue(StringUtil.GetString(ViewState["XmlValue"]), "image");
        }
        set
        {
            Assert.ArgumentNotNull(value, "value");
            ViewState["XmlValue"] = value.ToString();
        }
    }

    protected override void OK_Click()
    {
        XmlValue xmlValue = XmlValue;
        Assert.IsNotNull(xmlValue, "XmlValue");
        xmlValue.SetAttribute("alt", Alt.Text);
        xmlValue.SetAttribute("height", HeightEdit.Text);
        xmlValue.SetAttribute("width", WidthEdit.Text);
        xmlValue.SetAttribute("hspace", HSpace.Text);
        xmlValue.SetAttribute("vspace", VSpace.Text);
        xmlValue.SetAttribute("transformation",Transformation.Text);
        SheerResponse.SetDialogValue(xmlValue.ToString());
        SheerResponse.CloseWindow();
    }

    protected override void OnLoad(EventArgs e)
    {
        Assert.ArgumentNotNull(e, "e");
        base.OnLoad(e);

        if (XamlControl.AjaxScriptManager.IsEvent)
        {
            return;
        }

        if (Transformation.Items.Count == 0)
        {
            if (Transformation.Items.Count == 0)
            {
                var transformationSetting = MasterDb.GetItem(Constants.ImagePropertySettings.TransformationSettings);

                // Populate redention values
                Transformation.Items.Add(new ListItem());
                foreach (Item item in transformationSetting.Children)
                {
                    Transformation.Items.Add(new ListItem(item.Name, item["Value"]));
                }
            }
        }

        var transformationXMLValue = XmlValue.GetAttribute("transformation");
        if (!string.IsNullOrEmpty(transformationXMLValue))
        {
            Transformation.SelectedValue = transformationXMLValue;
        }
    }
}

        

While my custom parameter is a dropdown field, it's feasible to utilize a string field for the same purpose.

Upon opening Sitecore and accessing the image properties for any field, you will notice the presence of a new additional field.

While it may appear that everything is functioning as expected, there seems to be an issue. The current fixes are effective for initial images sourced from the media library, but they do not apply to Content Hub public URLs. To address this limitation and rectify the behavior for Content Hub links, it's necessary to update the MImageControl. MImageControl is configured for the field type within the core database.

Code changes for CustomMImageControl:

 using System;
 using Sitecore.Connector.ContentHub.DAM.Link;
 using Sitecore.IO;
 using Sitecore.Shell.Applications.ContentEditor;
 using Sitecore.Web.UI.Sheer;
 using Sitecore.Web.UI.XamlSharp;
 using Sitecore.Web;
 using Sitecore.Text;
 using System.Web;

 public class CustomMImageControl : MImageControl
 {
     protected new void ShowProperties(ClientPipelineArgs args)
     {
         string stylelabsContentType = base.XmlValue.GetAttribute("stylelabs-content-type");
         if (!string.IsNullOrWhiteSpace(stylelabsContentType))
         {
             if (!args.IsPostBack)
             {
                 string url = FileUtil.MakePath("/sitecore/shell", ControlManager.GetControlUrl(new ControlName("Sitecore.Shell.Applications.Media.ImageProperties")));
                 var urlString = new UrlString(url);
                 urlString.Add("id", "{11111111-1111-1111-1111-111111111111}");
                 var urlHandle = new UrlHandle();
                 var xmlValue = new XmlValue(base.XmlValue.ToString(), "image");
                 xmlValue.SetAttribute("mediaid", "{11111111-1111-1111-1111-111111111111}");
                 urlHandle["xmlvalue"] = xmlValue.ToString();
                 urlHandle.Add(urlString);
                 SheerResponse.ShowModalDialog(urlString.ToString(), response: true);
                 args.WaitForPostBack();
             }
             else if (args.HasResult)
             {
                 var xmlValue = new XmlValue(args.Result, "image");
                 string alt = xmlValue.GetAttribute("alt");
                 string height = xmlValue.GetAttribute("height");
                 string width = xmlValue.GetAttribute("width");
                 string vspace = xmlValue.GetAttribute("vspace");
                 string hspace = xmlValue.GetAttribute("hspace");
                 string transformation = xmlValue.GetAttribute("transformation");

                 //add transformation to public url
                 string src = xmlValue.GetAttribute("src");
                 var uri = new Uri(src);
                 var queryParameters = HttpUtility.ParseQueryString(uri.Query);
                 queryParameters.Remove("t");
                 string newSrc = $"{uri.GetLeftPart(UriPartial.Path)}?{queryParameters.ToString()}";
                 base.XmlValue.SetAttribute("src",
                     string.IsNullOrEmpty(transformation)
                     ? newSrc
                     : $"{newSrc}&t={transformation}");

                 base.XmlValue.SetAttribute("alt", alt);
                 base.XmlValue.SetAttribute("height", height);
                 base.XmlValue.SetAttribute("width", width);
                 base.XmlValue.SetAttribute("vspace", vspace);
                 base.XmlValue.SetAttribute("hspace", hspace);
                 base.XmlValue.SetAttribute("transformation", transformation);
                 SetModified();
                 MUpdate();
             }
         }
         else
         {
             base.ShowProperties(args);
         }
     }
 }
        

You can see, that I add t parameter to src. It is needed for upgrade link and due to I didn't do changes on Front-End, because I already return link with t parameter. But you don't have to do same and just return transformation parameter as additional image parameter, then need to add &t={value} on Front-End.

I encountered an issue that I'd like to address. I'm currently working with Sitecore 10.2 and Content Hub 5.1.26. To update the MImageControl component, it's necessary to install the NuGet package "Sitecore.Connector.ContentHub.DAM." However, this particular package has dependencies on components specific to Sitecore 10.3, such as Sitecore.Mvc, among others. Consequently, incorporating this NuGet package into your solution may lead to numerous compatibility issues.

While Sitecore officially supports the integration of Content Hub 5.1.26 with Sitecore 10.2, it's important to note these dependencies. Therefore, I advise considering alternatives. One option is to utilize Content Hub version 5.0.0, which may offer smoother integration with Sitecore 10.2. Alternatively, if upgrading MImageControl is essential, manually adding the necessary libraries for Content Hub 5.1.26 into your solution could be a viable approach, as I have done in my implementation.