Popup: Show image below between header and body

src/image.js

@@ -145,7 +145,12 @@ register_hook('show-popup', function (data, category, dom, callback) {
   div.className = 'images loading'
   var imageWrapper
 
-  dom.insertBefore(div, dom.firstChild)
+  let body = dom.getElementsByClassName('popupBody')
+  if (body.length) {
+    dom.insertBefore(div, body[0])
+  } else {
+    dom.appendChild(div)
+  }
 
   var currentLoader = new ImageLoader(data)
   data.popupImageCounter = {}

style.css

@@ -465,14 +465,13 @@ a:active {
   display: none;
 }
 .leaflet-popup-content .images {
-  float: right;
-  margin-left: 0.5em;
-  max-width: 100px;
-  max-height: 150px;
+  max-height: 12.5em;
+  text-align: center;
+  margin: 0 0.5em 0.25em 0.5em;
 }
 .leaflet-popup-content .images img {
-  max-width: 100px;
-  max-height: 150px;
+  max-width: 100%;
+  max-height: 12.5em;
 }
 
 #contentDetails .images {