There are a couple good ways to do this
Provide a different interface when the page is in edit mode.
Image with retina/non-retina support using Glass:
@if (Sitecore.Context.PageMode.IsExperienceEditorEditing)
{
<div class="container-fluid" style="width: 100%;">
<h3>Logo Images</h3>
<div class="col-sm-6">
<h4>1x - non-retina</h4>
@RenderImage(m => m.Image, isEditable: true, parameters: new { @class = "img-responsive" }, outputHeightWidth: true)
</div>
<div class="col-sm-6">
<h4>2x - retina</h4>
@RenderImage(m => m.Image_Retina, isEditable: true, parameters: new { @class = "img-responsive" }, outputHeightWidth: true)
</div>
</div>
}
else /* Normal or Preview Mode */
{
<img src="@Model.Image.Src" srcset="@Model.Image_Retina.Src 2x">
}
When the page is in edit mode the view is rendered completely differently, with in-page edit fields for the two images. (@Editable
will also work here, but @RenderImage
is more appropriate for Image fields)
Add a Custom Experience Button
Create a custom experience button that will expose all of the source image fields in a dialog:
In the Core database:
- Add a new item to
/sitecore/content/Applications/WebEdit/Custom Experience Buttons
, based on the Field Editor Button
template
- Set the
Fields
field to a pipe-separated list of the field names that you want to edit (the names of your image source fields)
In the Master database:
- Navigate to the rendering that outputs these images
- Find the Experience Editor Buttons field in the Editor Options section
- Add the new custom experience button to the Selected list
Now you'll have this new button in the context menu for the rendering when in edit more. Clicking it will open a dialog with the fields that you set in the Fields
field of the button item.

Talk to your content authors
If this is a possibility, it's good to get input from the people who will actually be using this. Preferences vary from person to person