Hello friends, in this article we will learn how to fetch image renditions from Sharepoint. We know that image renditions are used to crop the large images and make them light size on the page.



We got one requirement in the Sharepoint where we wanted to show all available renditions in a dropdown of property pane.

Unfortunately, I couldn't find a direct rest API endpoint for the same. We achieved it using below ajax call to retrieve SharePoint image renditions.

$.ajax({
        type: "get",
        url: `${siteUrl}/_catalogs/masterpage/PublishingImageRenditions.xml`,
        dataType: 'xml',
        success: function (data) {
            var xml;
            //IE
            if (window.ActiveXObject) {
                xml = data.xml;
            }
            // code for Mozilla, Firefox, Opera, etc.
            else {
                xml = (new XMLSerializer()).serializeToString(data);
            }
            var imageRenditions = [];

            $(xml).find('ImageRendition').each(function () {
                var $ImageRendition = $(this);
                var id = $ImageRendition.find('Id').text();
                var height = $ImageRendition.find('Height').text();
                var width = $ImageRendition.find('Width').text();
                imageRenditions.push({
                    renditionId: id,
                    width: width,
                    height: height
                });
            });
        },
        error: function (xhr, status) {
            console.log(status + ' Error reading xml data from rendition.xml');
        }
    });

variable imageRenditions will contain all the renditions.