How can I make responsive images editable?

Question

I've been given this markup from the front-end developers and am working on figuring out how to implement it so that it is editable.

<img src="img/logo@1x.png" srcset="img/logo@2x.png 2x">

I found some examples online, but they all seemed fairly complex. Is there a simple way of making this editable?

Thanks!

Edit: I am looking to be able to change images from within the experience editor. I don't need to edit image properties. I've been using Glass Mapper throughout this project and for images without the srcset attribute I've just been using @RenderImage(x => x.CompanyLogo, isEditable: true). I don't know how to maintain the same type of functionality now that the front-end devs have added the srcset attribute to the images.

Answer 1

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:

1. Add a new item to /sitecore/content/Applications/WebEdit/Custom Experience Buttons, based on the Field Editor Button template
2. 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:

1. Navigate to the rendering that outputs these images
2. Find the Experience Editor Buttons field in the Editor Options section
3. 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

Answer 2

The simplest way would be to render different markup for Normal vs Experience Editor modes.

Something like:

@if (Sitecore.Context.PageMode.IsExperienceEditor) 
{
    <img src="@(addImageUrlHere)" srcset="img/logo@2x.png 2x">
}
else
{
    @Html.Sitecore().Field("logo1x", new { w = 100, h = 100 })
    @Html.Sitecore().Field("logo2x", new { w = 100, h = 100 })
}

So you can render a Sitecore image field for each different image you have in the srcset. If they are the same image and just different sizes provided by query string parameters - then just provide one image field.