With ShortPoint SPFx version 7.0.x.xx or later, you are able to manage how images from a connected SharePoint list, library, and other data sources are cropped and displayed on your site. We have added the Image Settings section in Slideshows, Tiles, Image Carousels, Image Titles, or Image Lists design elements that will allow you to do this.

Follow these steps to learn more about Image Settings for connected items.

TABLE OF CONTENTS

Prerequisites
Step 1: Prepare List or Library with image content
Step 2: Insert a ShortPoint design element
Step 3: Connect ShortPoint design element with your list or library
Step 4: Edit Image Settings
Step 5: Insert your design element and save the page

Prerequisites:

You have ShortPoint SPFx version 7.0.x.xx or later installed
You have a data source that contains images you wish to connect to or you have images you want to manually insert into a ShortPoint design element

Step 1: Prepare List or Library with image content

Identify the specific list, library, or data source you wish to connect to. Ensure that all information you need to display on your SharePoint page is available, including images. For SharePoint lists and libraries, take note of the View you are going to use.

In our example, we created a SharePoint list containing image URLs and other data we want to highlight. We will be connecting to All Items view.

Step 2: Insert a ShortPoint design element

Edit your SharePoint page, add a ShortPoint web part or edit an existing one, select where your image will be inserted, and click the plus sign to open Page Builder.

For Modern pages:

For Classic pages:

Add Slideshows, Tiles, Image Carousels, Image Titles, or Image Lists from Page Builder. Here, we are using the Image Carousels design element.

Step 3: Connect ShortPoint design element with your list or library

Go to Connect tab and select the connection type you want to use. We are connecting to a list located in the Current Site in this example.

Note: If you are not yet familiar with our Connect feature, please check out the ShortPoint Connect: Basic Tutorial for more information.

Select the list or library from the dropdown and press the Connect button.

Note: Other connection types may require different inputs. Check the dedicated articles for each of them in our Knowledge Base.

Wait for the indicators to say that ShortPoint is now connected before you proceed.

Go to the Items tab, display your options by clicking the dropdown for each field, and select the information you wish to display.

Your items are now added to the ShortPoint design element. You can proceed to manage the image settings in the next step.

Step 4: Edit Image Settings

By default, ShortPoint automatically crops the image to fill the container. Without resizing the image itself beforehand, It may be cropped in the wrong places.

Here is an example:

You can find the image settings options in the Settings or Items Tab. Make adjustments to achieve your desired output.

Check out our article on How to Use Image Settings to Manage Image Cropping in ShortPoint Elements to know more about the different options you have.

Note: You can modify settings on either tab but changes made in the Items Tab have priority over the ones made in the Settings tab.

In the Settings Tab:

In the Items Tab:

Step 5: Insert your design element and save the page

Press the Preview button to see how your image settings affect your images. Once you are happy with your result, click Insert and hit the disk icon to save the page.

Your images will appear properly cropped and effectively eye-catching for your purposes.

Here is our final output:

Take your site to the next level with great images and content.

How to Use Image Settings for Connected Items

Prerequisites:

Step 1: Prepare List or Library with image content