Update public/js/add_content.js

public/js/add_content.js

@@ -72,6 +72,40 @@ function addcontent(item) {
       
     }
 
+    // Salam: Add this line at the beginning of your JavaScript code to define a variable for the modal
+    var sdgProjectModal = '';
+
+    // ...
+
+  var sdgProjectHTML = '';
+  if ('sdgProjectLink' in item.links) {
+  var sdgProjectLink = item.links.sdgProjectLink;
+  sdgProjectHTML = `<button class="btn btn-sm btn-outline-info mt-1" data-toggle="modal" data-target="#sdgProjectModal"> <i class="fas fa-sdg"></i> SDG x Project</button> &nbsp;`;
+
+  // Add this line to create the modal content dynamically
+  sdgProjectModal = `<div class="modal fade" id="sdgProjectModal" tabindex="-1" role="dialog" aria-labelledby="sdgProjectModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="sdgProjectModalLabel">SDG x Project Image</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body">
+          <img src="${item.item.sdgImage}" alt="SDG x Project Image" style="width: 100%; height: auto;">
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+          <a class="btn btn-info" href="${sdgProjectLink}" target="_blank">View SDG x Project Details</a>
+        </div>
+      </div>
+    </div>
+  </div>`;
+  }
+
+// ...
+
     new_row.innerHTML = new_row.innerHTML + '<div class="col-lg-4">' +
       '<div class="card mb-4 shadow-sm extension overflow-auto">' +
       '<h5>' + item.item.title + ' <span class="content-subtitle text-muted"> ' + item.item.project + '</span></h5>' +
@@ -91,7 +125,8 @@ function addcontent(item) {
       projectHTML + 
       presentationHTML + 
       repoHTML + 
-      '<img class="thumbimg" src="' + item.item.sdgImage + '" alt=""  style="max-width: 30px; max-height:30px; ">' +
+      '<img class="thumbimg" src="' + item.item.imageLink + '" alt="">' +
+      sdgProjectHTML + // Include the SDG x Project button here
       '</p>' +
       '</div>' +
       '</div>' +