Create Dynamic Photos Page Using Rest API And SharePoint

In this blog, we will see how to create a dynamic page which includes all photos of the particular event.

Hi All,

In this blog, we will see how to create a dynamic page which includes all photos of the particular event.

Some days before we celebrated Indian Independence day in our office. I want to post all the photos on one web part page.

Initially, I thought to upload it in content editor web part one by one using Image properties. But Later I Thought what will happen if I receive more images. I need to edit the web part as soon as I receiver more images. After that, I decided to create one library to upload the photos and using REST API I will show the Images in the section.

Below are the steps,

1. Create document library with the name "IndepedanceDayPics". In that create a column with the name "Seq" and having type number to show the photos sequentially.
   
   
2. Upload all the photos in that document library and using quick edit functionality add Sequence numbers also.
   
   
3. Create one web part page having the name "Celebration".
   
   
4. Create one txt file and add below code in that file,
   
   add Refernce of jQuery library,
   

   <script src="/SiteAssets/JS/jquery.min.js">
   </script> add style for the table and other contents
   <style>
       div#contentBox {
           margin-left: 50px !important;
       }
   
       div#headerdiv {
           text-align: center;
           font-size: 30px;
           font-weight: 700;
           color: #D75517;
       }
   
       #pics td {
           width: 30%;
       }
   
       table#pics {
           width: 100%;
           margin-top: 30px;
       }
   
       #picID {
           width: 400px;
           height: 350px;
       }
   </style>
   <div id="headerdiv"> Independence Day Celebration </div>
   <table id="pics">
   </table>
   <script>
       $(document).ready(function() {
           $.ajax({
               url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('IndepedanceDayPics')/items?$select=FileRef/FileRef&$orderby=Seq asc",
               type: "GET",
               headers: {
                   "accept": "application/json;odata=verbose"
               },
               success: function(data) {
                   var inputElement = "";
                   if (data.d.results.length > 0) {
                       var i = 0;
                       while (i < data.d.results.length) {
                           var j = 0;
                           inputElement += "<tr>";
                           while (j < 3 && i < data.d.results.length) {
                               inputElement += "<td><img id='picID' src='" + data.d.results[i].FileRef + "'></td>";
                               j++;
                               i++;
                           }
                           inputElement += "</tr>";
                       }
                   }
                   $("#pics").append(inputElement);
               },
               error: function(xhr) {
                   alert(xhr.status + ': ' + xhr.statusText);
               }
           });
       });
   </script>

5. Now edit "Celebration.aspx" page and add content editor web part. After adding content editor web part edit the web part and give path of that txt file. Click on Apply and OK button.
   
   
6. Now, save the page and Publish it.
   
   
7. After publishing the page it will show all the images in the tabular format. It will create One table and will show 3 images in a row and so on.

Thanks