Showing the thumbnail image of the current rendering

Showing the thumbnail image of the current rendering

I recently ran into an issue with a component in a placeholder that made it troublesome for the editors to select it within the Experience Editor to either select a new data source for the component or to get to the placeholder to insert more renderings.

The issues came from the fact that it was a “live” component with an <iframe>, so when you clicked on the component you actually clicked inside the iframe and Sitecore didn’t catch that, so you couldn’t select the component.

I decided to go with a simple solution – just show the rendering thumbnail (the image shown when you are choosing the rendering to insert into a placeholder) when in the Experience Editor. That way you will still get a good preview of the layout of the page although the component isn’t “live” anymore, but this is only while editing.

To do this I needed to get the current rendering item, from there the thumbnail and in the end the URL for that image.

I ended up with something like this method:

using Sitecore.Data;
using Sitecore.Data.Fields;
using Sitecore.Mvc.Presentation;
using Sitecore.Resources.Media;

public static string GetRenderingThumbnailUrl() {
    var renderingItem = RenderingContext.Current.Rendering.RenderingItem.InnerItem;
    var thumbnailField = (ImageField)renderingItem.Fields[Sitecore.FieldIDs.Thumbnail];
    return MediaManager.GetMediaUrl(thumbnailField.MediaItem);

You can expose/use it in many different ways, but basically you just get the current rendering item from the RenderingContext and from that you get the thumbnail from the corresponding field and use the MediaManager to create the URL.