Resize SharePoint Online image by using the Microsoft Graph APIs
We had our ways to resize images in SharePoint, but the Microsoft Graph APIs seem more suitable
In the past I used SharePoint api to render images in different resolutions and it looked like that.
The resolution param controls the different size and @Stefan Bauer has a nice article how to change the image renditions for SharePoint files, but the Microsoft Graph thumbnail apis seem more suitable to me since utilizing the Microsoft Graph APIs is already the preferred and also recommended approach by Microsoft.
Use the Microsoft Graph APIs get a SharePoint image
We can call Microsoft Graph APIs from within SharePoint calling the /_api/v2.0, so here is how to resize image uploaded to /sites/cfo/SiteAssets/SitePages/About-us/49603-IMG_0404.JPG in a SharePoint site.
Calling the API with content at the end will get the actual image so it can be used in html image tags like:
The response will give us the data with information about the image that we can utilize and pass it to other piece of logic. Here is how the response looks:
In case multiple sizes are needed, the /large at the end of the URL can be removed and the response will contain 3 different renditions for small, medium and large.
The Microsoft Graph endpoint can be used as well to execute the query, but the url for the request to be constructed is different.
The same call can be used with the /_api/v2.0 apis of SharePoint if this would be your preference over the first approach I have taken up so the request URL would look like:
How to control the image size and has it in different resolutions
The API documentation has two approaches that can be used. There are predefined size options, but custom thumbnail sizes can be requested as well. Specifying large, small and medium in the request URL will result in fixed predefined resolutions and the URL looks like:
The fixed sizes can be replaced by custom size with the following format /c1920x1080 where the number after the c is width and the number after x is the height. If just the width is important then a big number can be added to the height like /c1920x999999 so the request URL looks like:
Here is a short video of my experiments just to give an overview how it works.
Use the Microsoft Graph APIs get a SharePoint site page thumbnail
Here are the GET requests URLs that can be executed from SharePoint and Microsoft Graph.
Appending /content to the SharePoint calls will give us the image as was mentioned in the above sections. Here is another short video with my experiments:
Use the Microsoft Graph APIs get a SharePoint file thumbnail
Most of the files uploaded to SharePoint document libraries also have thumbnails. No matter if they are Word, PowerPoint or PDF they can have image generated to be used as thumb. Here is a code sniped and short video showing how to do that.
The Microsoft Graph API seems promising and can be used in custom applications to render images in different sizes. This is highly needed when SharePoint custom development is required and most of the development is on the front end.