8

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.

2 Answers 2

7

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. rendering context menu Image Picker

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

4
  • Thanks for the response. I'm a new developer and don't fully understand. I've been using Glass Mapper for all of my fields. For your simplest method, can I use this to output an editable field? For your better method, would I be able to change images from within the experience editor? Or only properties of the image?
    – Iceape
    Apr 19, 2017 at 12:52
  • @Iceape I updated this with some more thorough examples, I hope that helps. Feel free to pm me if you'd like to discuss further. Apr 19, 2017 at 13:46
  • Fantastic. Thanks! I'll dive into this and let you know if I have any further questions.
    – Iceape
    Apr 19, 2017 at 13:54
  • I accepted your answer because your solution solves my problem. However, now I'm trying to move the button to an edit frame on some placeholder text as opposed to only having the button accessible from the whole rendering itself. Please check out my question here if you are interested in helping out! Thanks sitecore.stackexchange.com/questions/5474/…
    – Iceape
    Apr 24, 2017 at 15:10
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.

Your Answer

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

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