read out exif data via exif.js

_src/_assets/js/photos.js

@@ -0,0 +1,22 @@
+//=include exif-js/exif.js
+
+window.onload = getExif;
+
+function getExif() {
+    const image = document.querySelector('.hentry__teaser img')
+    const imageFileName = image.getAttribute('src').split('/').slice(-1)[0]
+
+    const img = new Image()   // Create new img element
+    img.src = `/media/${imageFileName}`
+    img.addEventListener('load', function () {
+        EXIF.getData(img, function () {
+            var make = EXIF.getTag(this, 'Make')
+            var model = EXIF.getTag(this, 'Model')
+            var makeAndModel = document.querySelector('.exif__make')
+            makeAndModel.innerHTML = `${make} ${model}`
+
+            console.log(make)
+            console.log(model)
+        })
+    }, false)
+}

_src/_includes/scripts.html

@@ -2,6 +2,8 @@
 
 {% if page.js %}
     <script src="/assets/js/{{ page.js }}" async></script>
+{% elsif layout.js %}
+    <script src="/assets/js/{{ layout.js }}" async></script>
 {% endif %}
 
 {% if page.coinhive %}

_src/_layouts/photo.html

@@ -1,5 +1,7 @@
 ---
 layout: base
+
+js: photos.min.js
 ---
 
 <section role="main" id="main" class="page-single">
@@ -16,6 +18,10 @@ layout: base
 
         </figure>
 
+        <aside class="exif">
+            <div class="exif__make"></div>
+        </aside>
+
         <section class="entry-content">
             {{ content }}
         </section>

package.json

@@ -39,6 +39,7 @@
   },
   "dependencies": {
     "clipboard": "^1.7.1",
+    "exif-js": "^2.3.0",
     "normalize-css": "^2.3.1",
     "normalize-opentype.css": "^0.2.4",
     "qrious": "^4.0.2",