3

I am trying to find a way to change the source from an image field when an user clicks the "Choose an image" button (webedit:chooseimage command) from Experience Editor, and points to specific folder each time when he is at different pages for example.

enter image description here

I don't want to create a new custom button for this but I search for a solution, if it is feasible, which I will change the source before displayed the MediaBrowser popup.

What is the responsible pipeline/s for passing the arguments and open the MediaBrowser popup? Can I extend this pipeline? I am using sitecore 8.2

Thank you in advance.

2 Answers 2

4

Create a custom Image Field Type and create a new class for it (or override the default Image Field) to provide the Source path string.

Custom Image Field class:

public class CustomImageField : Sitecore.Shell.Applications.ContentEditor.Image
{
    #region Fields
    private string _itemId;
    private Item _item;
    #endregion

    #region Properties

    public string ItemId
    {
        get { return _itemId; }
        set
        {
            Assert.ArgumentNotNull(value, "value");
            _itemId = value;
        }
    }

    // This is the context item
    public Item Item => _item ?? (_item = Client.GetItemNotNull(ItemId));

    public new string Source
    {
        get { return base.Source; }
        set
        {
            if (getCustomMediaPath) // this check is not necessarily required
            {
                // add custom code to set the path that will be used by the Media Browser dialog
                var mediaFolder = "media folder";
                var mediaRoot = $"/sitecore/media library/{mediaFolder}";
                base.Source = mediaRoot;
            }
            else
            {
                base.Source = value;
            }
        }
    }

    #endregion
}

In the Sitecore Core DB:

Create a new Image Field item. Field items are located at:

/sitecore/system/Field types

The default Image field is located at:

/sitecore/system/Field types/Simple Types/Image

Custom Fields can be added to:

/sitecore/system/Field types/Custom Field Types

Set the Assembly and Class fields of your custom image field class to make use of that code.

Alternatively you can define a custom prefix that maps to an assembly and namespace and use that shortcut to point to the new Class via the Control field.

config patch for Control prefix:

<configuration xmlns:x="http://www.sitecore.net/xmlconfig/">
  <sitecore>
    <controlSources>
      <source mode="on" namespace="Project.Web.Shell.Applications.ContentEditor" assembly="Project.Web" prefix="CustomFields" />
    </controlSources>
  </sitecore>
</configuration>

With this configuration the Control field can be set to CustomFields.CustomImageField

Use the new Field

Now you can use this field type (if you made a custom one, otherwise it's just the default Image field) in your templates.

Note on Custom Fields: Using a new Field Type item will require additional work to get the field to render properly in Experience Editor.

The SitecoreHelper ends up calling BeginField, which in turn calls the renderField pipeline, passing in the RenderFieldArgs.

The renderField pipeline has a processor called Sitecore.Pipelines.RenderField.GetImageFieldValue. You will need to patch in an override of this processor. The Process method of this processor first checks the FieldTypeKey of the args. This check will need to be updated to support the new image field type.

4
  • Thank you for your answer. I have tried your approach but in Experience Editor the image field does not rendering properly. The img tag is rendering with only a media id attribute, no src attr even if i assign image.
    – George
    Commented Jun 19, 2017 at 6:09
  • How are you rendering the image? If this is MVC you can render a field like this: @Html.Sitecore().Field("My Field Name") // optional overloads are available to pass in the context object if necessary. Or you can use Glass @Editable Commented Jun 19, 2017 at 12:35
  • I am trying to render the image with this way(@Html.Sitecore().Field("My Field Name")) with no luck. Is there any other configuration for the new created custom Image Field Type to work and render like the default Image field type? Should I do extra work in Custom Image Field class even if it is inherited from the Sitecore.Shell.Applications.ContentEditor.Image, for example is it needed to add some code in onPrerender method?
    – George
    Commented Jun 21, 2017 at 20:17
  • @George I updated the answer to give some detail on supporting custom field types in Experience Editor. I hope that helps! You can always use the built-in image field type and write the source logic to use its default behavior when custom behavior is not necessary. Commented Jun 21, 2017 at 22:20
0

In my case the answer of Nathan Hase helped with little modification. It turned out that item didn't have a reference to the image in custom image field. And because of that related image didn't published when you publish item. To fix this you need to register your custom field type:

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
  <sitecore>
    <fieldTypes>
      <fieldType name="ImageEx" type="Sitecore.Data.Fields.ImageField,Sitecore.Kernel" patch:after="fieldType[@name='Image']"></fieldType>      
    </fieldTypes>
  </sitecore>
</configuration>

Where ImageEx is name of your field in /sitecore/system/Field types/Custom Field Types.

Also instead of new string Source you can use override string Source as this property is virtual

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.