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.

TABLE OF CONTENTS


Prerequisites


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


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:


View


Then, click Connect:


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:


Preview


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:


Save


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