The info area now also supports additional images.

display/overlays/nodeinfo.js

@@ -74,13 +74,22 @@ class NodeInfoOverlay {
             className: "detail-view-headline",
         });
 
+        const infoImageArea = Helpers.createDiv(
+            "detail-view-media-area",
+            infoArea
+        );
+        Helpers.createHTMLElement("img", infoImageArea, {
+            id: "infoAreaInfoImage",
+            src: Config.PLUGIN_PATH + "datasets/images/default.jpg",
+        });
+
         const textArea = Helpers.createDiv("detail-view-text-area", infoArea);
         Helpers.createHTMLElement("p", textArea, {
             id: "infoOverlayDescription",
             innerText: "Default Text",
         });
 
-        const videoDiv = Helpers.createDiv("detail-view-video-area", infoArea);
+        const videoDiv = Helpers.createDiv("detail-view-media-area", infoArea);
 
         const video = document.createElement("video");
         video.id = "infoOverlayVideo";
@@ -111,10 +120,7 @@ class NodeInfoOverlay {
             //jQuery("#infoOverlayImage").removeClass("hidden-tab");
             const overlayImage = jQuery("#infoOverlayImage");
             overlayImage.show();
-            overlayImage.attr(
-                "src",
-                Config.PLUGIN_PATH + "datasets/images/" + node.image
-            );
+            overlayImage.attr("src", node.image);
         } else {
             headline.css("margin-top", "25px");
             jQuery("#infoOverlayImage").hide();
@@ -124,6 +130,14 @@ class NodeInfoOverlay {
             // );
         }
 
+        const infoImage = jQuery("#infoAreaInfoImage");
+        if ("infoImage" in node) {
+            infoImage.show();
+            infoImage.attr("src", node.infoImage);
+        } else {
+            infoImage.hide();
+        }
+
         if ("description" in node) {
             jQuery("#infoOverlayDescription").text(node.description);
         } else {

kg-style.css

@@ -101,6 +101,7 @@
 
 .detail-view-text-area {
     display: block;
+    margin-top: 10px;
     padding-left: 25px;
     padding-right: 25px;
     /*padding-bottom: 130px;*/
@@ -124,7 +125,7 @@
     padding-right: 5px;
 }
 
-.detail-view-video-area {
+.detail-view-media-area {
     width: 100%;
     margin-top: 15px;
     padding: 10px;