Create an editable image link in Sitecore MVC

Imagine you are building a new component that has an image that you would like to allow content editors to be able to link to a resource, be it another website page, a downloadable document, 3rd party URL, etc. Thus, clicking on such image in Sitecore page editor should trigger the following editor popup with link and image editing icons:

As of Sitecore XP 7.5, there is no default field type that would allow a developer to insert insert a linked image out of the box. A workaround, though, would be to pass the image into the link field as a parameter:

@Html.Sitecore().Field("Link", new {
  text = @Html.Sitecore().Field("Picture", new { @class = "img-responsive" })
})

Dennis

Technical Lead

I am Dennis Subachev, a Technical Lead at ColdData. I am a Sitecore Certified Professional Developer. Coding is my passion—still can’t believe I am getting paid to do this.