If you use the Image Renditions feature in SharePoint, sometimes it can throw an error when you try to open it. Usually, Image Renditions throwing error in SharePoint states that a Null Reference exception is happening. It’s a well known problem that happens since older versions of SharePoint. We can see the same problem in this post in the Technet community.  Since it may not be fixed anytime soon, I’ve wrote a simple JavaScript code. This script overwrites the custom function in the SharePoint JavaScript file that performs the modal open event.

Before diving into the problem/solution content, I must say that the Image Renditions are a nice feature for content publishers. It lets them save only one file version of an image in their SharePoint sites, but at the same time it allows the users to define the dimensions of an image and how you want to display them. The image renditions require that Blob Cache is enabled in the Web.Config to become available in the ribbon.

Image Renditions throwing error in SharePoint - Image renditions example
Image renditions example (Mastykarz)

Now returning to the problem, the bug is related to the URL being passed to the QueryString. It works fine when you try to edit an image located in the same site (SPWeb) you are editing content. The editing operation can occur when you work inside a page, a SharePoint library, a simple edit form, anything you want!

But if you edit an image rendition using an image stored in another site (SPWeb), like you are using an image from “http://sharepoint/sites/team/blog/” in a page located at “http://sharepoint/sites/team“, the error will show up because Team and Blog are different sites for SharePoint, even though they are in the same Site Collection. So SharePoint will look for an image inside Team that doesn’t exist!

Code snippet to fix error in Image Renditions

// Cross-browser Edit Image Rendition Error Fix
// Document ready that can be replaced with jQuery
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
ribbonOnClickHandler();
}
}
// Replaces the method and adds an event to try replacing it again
// if you click a button in the ribbon
function ribbonOnClickHandler() {
replaceMethodFromRTE();
addEvent(document.getElementById('s4-ribbonrow'), 'click', replaceMethodFromRTE);
}
// Replaces the method from the window Global object
function replaceMethodFromRTE() {
if (window.RTE && window.RTE._imageRenditionCommands) {
window.RTE._imageRenditionCommands.editImageRenditions =
window.RTE__imageRenditionCommands$editImageRenditions$st =
function () {
var image = RTE.CanvasEvents.getNodeFromEvent(RTE.CanvasEvents.imageEvent);
if (image) {
var imgWithRendition = RTE.ImageUrlWithRendition._parseUrl$i(image.src);
if (imgWithRendition) {
var dlgOptions = new SP.UI.DialogOptions();
// generates a querystring with the Web Server Relative Url
var queryString = '?ImageUrl=' + SP.Utilities.HttpUtility.urlKeyValueEncode(RTE.RteUtility.getServerRelativeUrl(imgWithRendition.get_sourceUrl()));
var xmlhttp = new XMLHttpRequest();
var fullUrl = imgWithRendition.get_sourceUrl
// makes a URL for a Post Request to get the Web Server Relative Url for the Image
var postUrl = fullUrl.substring(0, fullUrl.lastIndexOf('/')) + '/_api/contextinfo';
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var data = JSON.parse(this.responseText);
// gets the Web Full Url
var webUrl = data.WebFullUrl;
// here we change the URL for the Dialog with the right parameters
// dlgOptions.url = SP.Utilities.UrlBuilder.urlCombine(SP.PageContextInfo.get_webServerRelativeUrl(), SP.Utilities.Utility.get_layoutsLatestVersionRelativeUrl() + 'ManageImageRenditions.aspx') + queryString;
dlgOptions.url = SP.Utilities.UrlBuilder.urlCombine(webUrl, SP.Utilities.Utility.get_layoutsLatestVersionRelativeUrl() + 'ManageImageRenditions.aspx') + queryString;
dlgOptions.autoSize = true;
dlgOptions.allowMaximize = true;
dlgOptions.dialogReturnValueCallback = function () {
var url = image.src;
if (url.indexOf('?') > 0) {
var newImage = image.cloneNode(true);
SP.UI.UIUtility.insertAfter(newImage, image);
SP.UI.UIUtility.removeNode(image);
if (RTE.RteUtility.isClassAvailable('SP.UI.Notify')) {
SP.UI.Notify.addNotification(SP.Publishing.Resources.imageRenditionChangeWarning, false);
}
RTE.Cursor.update();
}
};
SP.UI.ModalDialog.showModalDialog(dlgOptions);
}
};
// makes the post request to get the right SPWeb Url
// and then call the modal
xmlhttp.open('POST', postUrl, true);
xmlhttp.setRequestHeader('Accept', 'application/json');
xmlhttp.send();
}
}
};
}
}
// add event cross browser (copied from Stack Overflow)
// https://stackoverflow.com/questions/10149963/adding-event-listener-cross-browser/10150042#10150042
// if you use jQuery, you can use their option too
function addEvent(elem, event, fn) {
// avoid memory overhead of new anonymous functions for every event handler that's installed
// by using local functions
function listenHandler(e) {
var ret = fn.apply(this, arguments);
if (ret === false) {
e.stopPropagation();
e.preventDefault();
}
return (ret);
}
function attachHandler() {
// set the this pointer same as addEventListener when fn is called
// and make sure the event is passed to the fn also so that works the same too
var ret = fn.call(elem, window.event);
if (ret === false) {
window.event.returnValue = false;
window.event.cancelBubble = true;
}
return (ret);
}
if (elem.addEventListener) {
elem.addEventListener(event, listenHandler, false);
return {
elem: elem,
handler: listenHandler,
event: event
};
} else {
elem.attachEvent("on" + event, attachHandler);
return {
elem: elem,
handler: attachHandler,
event: event
};
}
}
view raw EditImageRenditionsErrorFix.js hosted with ❤ by GitHub

After you add this script to your Master Page, it will start working. The script will make the right calls to the ManageImageRenditions application page without problems. So the condition that causes the Image Renditions throwing error in SharePoint won’t occur anymore.

Also, if by any chance you don’t see the Image Renditions button, please check this post who might be helpful too!

References:
Technet discussion about the error
Cross-browser add event code