Try ShortPoint nowIn 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:
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:
[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.
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 [1] Name, [2] Photographer, and [3] 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:
[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:
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:
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.
Related articles:
- How to customize the Image List Design Element
- How to customize the Image Caption Design Element
- Introduction to Image Caption
