diff --git a/display/overlays/nodeinfo.js b/display/overlays/nodeinfo.js index ddaec2e19b986ea14c64a267d45ad90e76c7bf40..8e408dece938ac68aec3c74556b8618d040f8634 100644 --- a/display/overlays/nodeinfo.js +++ b/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 { diff --git a/kg-style.css b/kg-style.css index adb2a67608192ceb544aab1c261bc39c0cb05e8b..ae35a532a920ff7901ebbda2320b2043501c221e 100644 --- a/kg-style.css +++ b/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;