In this tutorial, we will show you how to connect the Image List Design Element to a SharePoint Library. The result will look similar to this:
NOTE: You can perform the same steps with other picture-friendly ShortPoint Design Elements such as Tiles, Image Titles, Image Carousels, Image Captions, and Slideshows.
TABLE OF CONTENTS
- Step-by-step tutorial
- You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
- You must have an existing SharePoint library that contains images.
- You must have an Image List Design Element on your SharePoint page.
Follow the steps below to connect your SharePoint library to an Image List:
Step 1: Edit the Image List Design Element
Go to the SharePoint page where you have the Image List and click Edit:
Then, click the pencil icon:
In the Action Toolbar, click the Switch to Grid Mode icon:
Hover over the Image List tag and click the cogwheel icon to open the Settings window:
NOTE: For more information on how to insert Design Elements into your page, check out ShortPoint Basics: How to Insert a Design Element.
Step 2: Connect your SharePoint Library to the Image List
Go to the Connect tab:
There are 3 connection types you can use to connect to a SharePoint Library:
 Current Site - allows you to connect to a SharePoint Library located on your current site
 Other Sites - allows you to connect to a SharePoint Library located on other sites across your tenant or farm.
 SharePoint URL - allows you to connect to a SharePoint Library using a specific SharePoint URL.
For this guide, we will be using the Current Site connection type:
Select the name of your SharePoint Library under the List/ Library field:
Select the View you want to showcase. For this guide, we will select the default All Documents view:
Then, click Connect:
You will see green banners at the top and at the bottom of the Settings window if you have successfully connected the SharePoint Library:
NOTE: Check out ShortPoint Connect: Basic Tutorial for more details on the Connect feature.
Step 3: Map items to showcase in your Image List
Below is the SharePoint Library we connected to our Image List. We want to showcase the  Name,  Photographer, and  Date taken columns in our Image List.:
To do this, go to the Items tab:
Delete all default content:
In the Title field, click the link icon and select Name to showcase the name column:
Then, in the Subtitle field select Photographer to showcase the photographer column:
In the Description field, select Date taken to showcase the date taken column:
In the Image field, select Document Preview to showcase the images:
For the Link field, select URL Path to redirect users to the image location when they click the images:
Finally, in the Linking options field, select how you want the link to open:
 Default - will open the link in the same window.
 Lightbox - will open the link in a lightbox.
 New Window - will open the link in a new window tab.
 Dialog - will open the link in a dialog box.
For this guide, we will Select New Window:
NOTE: For more details on Linking Options, go to Types of Linking Options.
Step 4: Update and Save
Click Preview to see how your Image List will appear on your page:
Click  Update if you are satisfied with your edits or click  Back if you still have items to modify:
You have now successfully connected your Image List to a SharePoint Library. Click the eye icon to preview your page:
Then, click Save to keep your progress:
Congratulations! You now know how to present dynamic content on your Image List. Enjoy making the most out of this feature on your SharePoint sites.
- How to customize the Image List Design Element
- How to customize the Image Caption Design Element
- Introduction to Image Caption