Known Issue: News Banners That Use Sharepoint Stock Images Display in Low Resolution When Using ShortPoint News Connections

Issue

If you use SharePoint stock images in your news posts and you display them on your page using ShortPoint Site News Connection, the images may appear in low resolution causing them to be pixelated or blurred.

Here is an example of a connected ShortPoint Slideshow Design Element showing a low-resolution banner image:

In this article, we will discuss the step-by-step solution how to achieve a high-quality images for your Site News connection.

TABLE OF CONTENTS

• Issue
• Reason
• Solution
  • Step 1. Open the settings of the Slideshow Design Element
  • Step 2. Switch to REST API connection
  • Step 3. Connect to REST API for Site News
    • Step 3.1 Prepare the REST API URL
    • Step 3.2 Copy the Map Results code
  • Step 4. Connect the Slideshow Design Element
  • Step 5. Update mapped items 
• Result

Reason

The issue with low-resolution images in ShortPoint News connection is not a bug, but rather a limitation. ShortPoint expects images to be in a certain format when expanding them, and if the images do not match that format, they are left as they are. The image URLs in this case are identical, but if the images do not match the expected format, SharePoint does not expand them and they remain in low resolution.

Solution

To resolve this issue, you need to change the connection you are using from Site News to REST API.

In this article, we will be using Slideshow Design Element to depict a use case.

Step 1. Open the settings of the Slideshow Design Element

We will be showing you how to open the settings of a ShortPoint Design Element, depending on the Page Builder interface you are currently using.

• In Legacy Page Builder:

• In Grid Mode:

The Design Tab will open.

Note: ShortPoint connections will soon be available in Live mode.

Step 2. Switch to REST API connection

To switch to REST API, you have to disconnect from Site News connection. 

To disconnect, go to the Connect tab:

Note: Since you are already connected to Site News, this tab will show as Connected.

In the Connect tab, click the Disconnect button:

Click the Back to Connections button:

Then, select REST API:

Step 3. Connect to REST API for Site News

To connect your REST API connection, let's prepare the REST API URL and the Map Results code that we are going to use first.

Note: To know more about connecting your Design Element to your Site News, you may visit the article How to Display SharePoint Site News Using ShortPoint REST API Connection Type.

Step 3.1 Prepare the REST API URL

In the REST API URL Paste the following URL (item highlighted in red and orange requires editing).

https://yourtenant/_api/web/getlist('SitePages')/items?$filter=PromotedState%20eq%202&$select=Column1,Column2,Column3,BannerImageUrl&$expand=file,Author&$top=1000&$orderby=Created%20asc

• yourtenant - should be replaced with the SharePoint site URL, news of which you would like to display;
• Column1,Column2,Column3 - should be replaced with the SharePoint list column names that you would like to display in the connection results. Separate the column names with a comma, no spaces in between.
• BannerImageUrl - the column where the banner images links are added. This column should be included in the URL.

For example, our REST API URL looks like this:

https://mycompany.sharepoint.com/sites/sitecollection/_api/web/getlist('/sites/sitecollection/SitePages')/items?$filter=PromotedState%20eq%202&$select=Created,Modified,Title,Author/Title,Description,file/ServerRelativeUrl,BannerImageUrl&$expand=file,Author&$top=1000&$orderby=Created%20asc

Where:

• mycompany.sharepoint.com/sites/sitecollection - is the SharePoint site URL, news of which we would like to display;
• Created,Modified,Title,Author/Title,Description,file/ServerRelativeUrl are the column names we want to display in our connections results.

Note: If you are currently working on a site collection, make sure to update the list mapping in the URL just like the example below:

https://mycompany.sharepoint.com/sites/sitecollection/_api/web/getlist('/sites/sitecollection/SitePages')/items?$filter=PromotedState%20eq%202&$select=Created,Modified,Title,Author/Title,Description,file/ServerRelativeUrl,BannerImageUrl&$expand=file,Author&$top=1000&$orderby=Created%20asc

Step 3.2 Copy the Map Results code

Please do not click the connect button yet as we still have to add a code for the Map results.

Toggle the Enable Advanced Settings button to see additional fields for the REST API connection:

Once enabled, scroll down at the bottom to reach the Map Results field:

Copy the code below:

var results = shortpoint.adapters.util.news.parseSharePointRestApiResults(data, 'MM/DD/YYYY HH:mm');
results = results.map((item) => {
  var PictureLargeURL = item.PictureThumbnailURL.replace(/\/thumbnails\/large\.jpg\?file=/i, '/');
  return { ...item, PictureLargeURL };
});
return results;

And paste it inside the Map Results field:

Step 4. Connect the Slideshow Design Element

Once the REST API URL and the Map Results code has been established, click the Connect button to proceed:

This message indicates that you have successfully connected:

Otherwise, please check the REST API URL and the code you pasted in the Map Results as they are both case sensitive.

Step 5. Update mapped items 

Go back to the Items tab:

And make sure that Image is set to #PictureLargeURL. If not, click the chain icon, and select it from the item mapping list:

You may preview how it looks like by clicking the Preview button:

Once you are satisfied, click the Update button to save the changes:

Result

Now, after following this solution, the banner images in your Slideshow Design Element will be displayed in a high-resolution quality.

Related articles:

• How to Improve Uploaded Banner Image Resolution When Using ShortPoint Site News Connection
• Getting Started: The Basics of ShortPoint Page Builder Live Mode
• Connection Type: Hub News
• How to Make Rounded Corners for the ShortPoint Slideshows Design Element