Created: 25 Jun 2020, last update: 30 Jan 2022
Sitecore Advanced Image Field with Experience Editor support
The Sitecore Advanced Image Field originally from Saad Khan similar to the image cropper field from Umbraco. Has many forks and is used in many implementations.
But has no support for the Experience Editor also the package has a small issue with “/sitecore/system/Field Types/Advanced Field Types” item in the Core Database, it should be a /Common/Folder but this item is not in the package and Sitecore create the item with default template while creating the sub items.
See: advance-image-module-to-implement-focal-point-functionality-in-sitecore
Both issues can be easy fix. For the Experience editor support of course using Edit frames can be a solution. But why not use the original image dialog from Sitecore Experience editor. To do that Sitecore needs no know the new name of The Field. See also Building a Sitecore DAM connector
If you just reuse/overwrite the original Image Field or rename the Advance image to image it should work. But we can also add it to the <renderField> pipeline. And important before the RenderWebEditing and AddBeforeAndAfterValues processor else you miss the necessary HTML to activate the web editing.
See https://github.com/jbluemink/sitecore-fields for the c# code and config. Note, creating a new Field type could look as a nice thing, but be aware of the shit that comes when Sitecore changes things, does this it works in Horizon? Or JSS. If you have already implemented this in your solution of course add the The Experience Editor, WYSIWYG editor support, but for a new project take a look at Sitecore Content Hub and use the image renditions to create your crops. If you can justify the additional cost of a DAM.
How to use:
@if (Sitecore.Context.PageMode.IsExperienceEditor)
{
<p>Html.Sitecore().Field("Image", new { w = 640, h = 360 })</p>
} else
{
<picture class="picture-component responsive lazy whatever">
<img data-src="@SitecoreExtensions.GenerateAdvancedImageFieldSrc(Model.ID, "Image", 640, 360)" class="lazyload">
</picture>
}
Above an example, you have to use something that says it is editable, the standard Html.Sitecore().Field() works, if there is an image it will fit into the set width/height black bars will add if the aspect ratio not match. So you can see the whole not cropped image. Outside the experience editor you can use the cropper method and add fancy stuff like lazy loading, or different size of images depends on the screen size.
The example use a custom GenerateAdvancedImageFieldSrc extension not in the source included, but you can also use the original extension:
@if (Sitecore.Context.PageMode.IsExperienceEditor)
{
<p>@Html.Sitecore().Field("Image", new { w = 640, h = 360 })</p>
} else
{
<picture>
@Html.Sitecore().AdvancedImageField("Image", Sitecore.Context.Item,360, 640)
</picture>
}
I create a new package with the fixed 2 issues above and test it on Sitecore 9.0 and Sitecore 9.3. Works for me. Download on GitHub.
See also
Memory leak: https://github.com/saadahmedkhan/sitecore-fields/issues/10
