How can we help you today?

How to Connect an Image List to SharePoint Image Library

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.



  • 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.

Step-by-step tutorial

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:

pencil icon

In the Action Toolbar, click the Switch to Grid Mode icon:

Switch to Grid Mode

Hover over the Image List tag and click the cogwheel icon to open the Settings window:

Cogwheel icon

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:

Connect tab

There are 3 connection types you can use to connect to a SharePoint Library:

[1] Current Site - allows you to connect to a SharePoint Library located on your current site

[2] Other Sites - allows you to connect to a SharePoint Library located on other sites across your tenant or farm.

[3] SharePoint URL - allows you to connect to a SharePoint Library using a specific SharePoint URL.

connection types

For this guide, we will be using the Current Site connection type:

Current site

Select the name of your SharePoint Library under the List/ Library field:

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:

successful connection

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 [1] Name, [2] Photographer, and [3] Date taken columns in our Image List.:

Sample sharepoint library

To do this, go to the Items tab:

Items tab

Delete all default content:

Delete default content

In the Title field, click the link icon and select Name to showcase the name column:

Title field

Then, in the Subtitle field select Photographer to showcase the photographer column:

Subtitle field

In the Description field, select Date taken to showcase the date taken column:

Description field

In the Image field, select Document Preview to showcase the images:

Image field

For the Link field, select URL Path to redirect users to the image location when they click the images:

Link field

Finally, in the Linking options field, select how you want the link to open:

[1] Default - will open the link in the same window.

[2] Lightbox - will open the link in a lightbox.

[3] New Window - will open the link in a new window tab.

[4] Dialog - will open the link in a dialog box.

For this guide, we will Select New Window:

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 [1] Update if you are satisfied with your edits or click [2] Back if you still have items to modify:

Update or back

You have now successfully connected your Image List to a SharePoint Library. Click the eye icon to preview your page:

eye icon

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.

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 30 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