Image: parse tag 'image'

lang/de.json

@@ -6,6 +6,7 @@
         "!=1": "Fehler"
     },
     "facilities": "Einrichtungen",
+    "images": "Bilder",
     "main:options": "Optionen",
     "more": "mehr",
     "open": "geöffnet",

lang/en.json

@@ -6,6 +6,7 @@
         "!=1": "Errors"
     },
     "facilities": "Facilities",
+    "images": "Images",
     "main:options": "Options",
     "more": "more",
     "open": "open",

src/image.js

@@ -0,0 +1,45 @@
+function showImage (url, dom) {
+  var div = document.createElement('div')
+  div.innerHTML = '<img src="' + url + '">'
+
+  dom.appendChild(div)
+}
+
+function showWikimediaImage (value, dom) {
+  var url = 'https://commons.wikimedia.org/w/thumb.php?f=' + encodeURIComponent(value) + '&w=' + 235 //imgSize
+
+  showImage(url, dom)
+}
+
+register_hook('show-details', function (data, category, dom, callback) {
+  var found = 0
+  var div = document.createElement('div')
+  div.className = 'images'
+
+  if (data.object.tags.image) {
+    var img = data.object.tags.image
+
+    if (img.indexOf('File:') === 0) {
+      showWikimediaImage(img.substr(5), div)
+      found++
+    } else if (img.indexOf('http://commons.wikimedia.org/wiki/File:') === 0) {
+      showWikimediaImage(decodeURIComponent(img.substr(39)), div)
+      found++
+    } else if (img.indexOf('https://commons.wikimedia.org/wiki/File:') === 0) {
+      showWikimediaImage(decodeURIComponent(img.substr(40)), div)
+      found++
+    } else {
+      showImage(img, div)
+      found++
+    }
+  }
+
+  if (found) {
+    h = document.createElement('h3')
+    h.appendChild(document.createTextNode(lang('images')))
+    dom.appendChild(h)
+    dom.appendChild(div)
+  }
+
+  callback(null)
+})

src/index.js

@@ -27,6 +27,7 @@ require('./mapLayers')
 require('./twigFunctions')
 require('./categories')
 require('./wikipedia')
+require('./image')
 
 window.onload = function () {
   initState = config.defaultView

style.css

@@ -519,3 +519,10 @@ a.showDetails {
 .wikipedia .reference {
   display: none;
 }
+#contentDetails .images {
+  text-align: center;
+}
+#contentDetails .images img {
+  max-width: 100%;
+  max-height: auto;
+}