In this tutorial, we will show you how you can connect ShortPoint Image List design element to a SharePoint Image Library. The result will look similar to this:



NOTE: The steps are very similar with those performed using other picture-friendly ShortPoint elements such as TilesImage TitlesImage CarouselsImage Captionsand Slideshows.


STEP 1: ADD PICTURE LIBRARY APP

  • In SharePoint Modern Experience, please open Site Contents, click New and choose App.


image


  • In SharePoint Classic Experience, please open Site Contents and choose Add an App:



Choose Picture Library



STEP 2: NAME THE PICTURE LIBRARY

Search for Picture Library app and open it. Make up a title for your picture library and press Create.


image



STEP 3: UPLOAD FILES

Open your newly created Picture Library.

  • In Modern Experience, please press Upload > Files. Choose the necessary files.

 

  • In Classic Experience, the interface is slightly different. Please, press Upload:

           and then, press Choose Files:

 


STEP 4: ADD INFORMATION

After the images are uploaded, they should look like in the screenshot below. Please press Quick Edit to add the necessary information.


image


STEP 5: ADD THE NECESSARY COLUMNS


Press the plus icon in the upper right corner of the table and choose columns you would like to add.



STEP 6: INSERTING INFORMATION INTO ADDITIONAL COLUMNS


Now, you can insert information to the new columns. Choose the required column type carefully. For example, in the Date column, you will be offered to choose the necessary date in the calendar:


image


STEP 7: SAVING THE CHANGES

After you finish, exit the quick edit mode by pressing Done button above the table.


image



STEP 8: INSERTING AN IMAGE LIST


Now, it is time to connect your picture library to a Short Point element. Please open the page in Edit Mode and press Insert on the top of the page. Choose Image List. Press Insert. To open the settings, press the cogwheel icon as shown in the animation below.


image



STEP 9: CONNECTING


After you have chosen the element, you will see the settings of it open. Please switch to the Connect tab and indicate a path to your newly-created picture library, as shown in the animation below. Press Connect



STEP 9: MAPPING THE FIELDS

Switch to Items tab and map the fields. 


In our example, we mapped the Title as Nameand Subtitle as Photographer. We have indicated Date in the Description field. We have also chosen Web Image URL in the Image field for the list to display pictures. 

We indicated Item Dialog URL in the Link field to make the items clickable. 

Finally, we have chosen Lightbox in Linking Options so that the user would open the link in the same window.


After everything is ready, press Insert and Save the changes made on the page.



OUR RESULT:



Thank you for your attention!