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:


Sample Low Resolution 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


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.


REST API connection


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:

Legacy page builder settings


  • In Grid Mode:

Grid Mode settings


The Design Tab will open.


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:

Go to 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:

Disconnect from Site News


Click the Back to Connections button:


Click back to connections button


Then, select REST API:


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.

REST API URL

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:


Enable Advanced Settings


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

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:


Paste the code inside Map Results

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:


Click the Connect button


This message indicates that you have successfully connected:


Successful connection


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:


Go back to 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:

Update Image mapping


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

Click Preview


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

Click Update 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.


High quality image result


Related articles:

    

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 31 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more