Try ShortPoint nowIn 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 Tiles, Image Titles, Image Carousels, Image Captions, and Slideshows.
STEP 1: ADD PICTURE LIBRARY APP
- In SharePoint Modern Experience, please open Site Contents, click New and choose App.
- 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.
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.
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:
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.
OUR RESULT:
Thank you for your attention!