You may have noticed that some ShortPoint elements do not display the Banner Image in good resolution.

In this article we are going to show you how to display it in better resolution.


Before:


After:


TABLE OF CONTENTS


Prerequisites:


In our example we will use connections to Slideshows design element.


Step 1: Add Slideshows element to the page.


The Slideshows design element can be easily added to your pages using ShortPoint Page Builder.

  • Modern page:

You can start with adding a ShortPoint web part to your page by clicking the plus sign and selecting ShortPoint from the list of the web parts. 


  • Classic page:

1. Choose the Insert tab in the Ribbon.

2. Click the blue Insert button.


Then, select the Slideshows design element from your ShortPoint Page Builder menu:  




Step 2: Connect to the view with Site Pages


In the Connect tab select Current Site from the Connection Type options.


Note: To find out more about the Connect Feature in ShortPoint, please read this article: ShortPoint Connect: Basic Tutorial



Choose Site Pages in the List/Library drop-down. Press the green Connect button and wait for the connection to load. 



Step 3: Use Items mapping to show banner thumbnails


Items mapping will now be available in your Items tab. Choose what information to show in your page’s news section.


Note: To find out more about the Connect Feature in ShortPoint, please read this article: ShortPoint Connect: Basic Tutorial


Choose the values you want to appear in your Slideshows design element from the dropdown.



In the Image field, select Banner Image URL URL in the dropdown.


In this example, we are mapping the Title field to show the name of the page, the Subtitle field and the Image field to show the banner thumbnail.




Step 4: Add parameter to increase the resolution


Banner image size is based on its width. Banner image height will be automatically changed. To change the size of the Image we need to use the additional parameter, in this case it is resolution.


We have can use resolution parameter from 0 to 6, where 0 = default size and 6 = original size.
Example: &resolution=3


Now we need to add this parameter to the Image mapping we did:



That's all. Now you are able to increase the Banner Image resolution connected to ShortPoint element.


Related Articles: