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:
STEP 1: ADDING PICTURE LIBRARY APP
Open Site Contents, click New and choose App.
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.
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).
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.
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:
STEP 7: SAVING THE CHANGES
After you finish, exit the quick edit mode by pressing Done button above the table.
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.
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 Name, and 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.
Thank you for your attention!