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 Titles, Image Carousels, Image Captionsand Slideshows.


STEP 1: ADDING PICTURE LIBRARY APP

Open Site Contents, click New and choose App.


image



STEP 2: NAMING A PICTURE LIBRARY

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


image



STEP 3: UPLOADING FILES OR FOLDERS

Please press Upload. You can choose Files and upload your pictures one by one, or chose Folder (if they are stored in one folder on your computer).

 

image

 


STEP 4: ADDING 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: SETTING UP NEW COLUMN TYPES


Press the plus icon in the upper right corner of the table and choose column types 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!