makes exif readout work

_src/_assets/js/photos.js

@@ -4,19 +4,52 @@ 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}`
+    EXIF.getData(image, function () {
+        // get individual data
+        const modelvalue = EXIF.getTag(this, 'Model')
+        const shutterspeedvalue = EXIF.getTag(this, 'ExposureTime')
+        const aperturevalue = EXIF.getTag(this, 'FNumber')
+        const exposurevalue = EXIF.getTag(this, 'ExposureBias')
+        const isovalue = EXIF.getTag(this, 'ISOSpeedRatings')
+        const focallengthvalue = EXIF.getTag(this, 'FocalLength')
 
-            console.log(make)
-            console.log(model)
-        })
-    }, false)
+        // inject data
+        if (modelvalue) {
+            const model = document.querySelector('.exif__model')
+            model.innerHTML = modelvalue
+        }
+
+        if (shutterspeedvalue) {
+            const shutterspeed = document.querySelector('.exif__shutterspeed')
+            shutterspeed.innerHTML = `${shutterspeedvalue.numerator}/${shutterspeedvalue.denominator}s`
+        }
+
+        if (aperturevalue) {
+            const aperture = document.querySelector('.exif__aperture')
+            aperture.innerHTML = `ƒ ${aperturevalue}`
+        }
+
+        if (exposurevalue || exposurevalue === 0) {
+            const exposure = document.querySelector('.exif__exposure')
+
+            if (exposurevalue === 0) {
+                exposure.innerHTML = `+/- ${exposurevalue}`
+            } else if (exposurevalue > 0) {
+                exposure.innerHTML = `+ ${exposurevalue}`
+            } else {
+                exposure.innerHTML = `- ${exposurevalue}`
+            }
+        }
+
+        if (isovalue) {
+            const iso = document.querySelector('.exif__iso')
+            iso.innerHTML = `ISO ${isovalue}`
+        }
+
+        if (focallengthvalue) {
+            const focallength = document.querySelector('.exif__focallength')
+            focallength.innerHTML = `${focallengthvalue}mm`
+        }
+    })
 }

_src/_assets/styl/_kremalicious/content-photo.styl

@@ -8,7 +8,7 @@
     @extend .textcenter
 
     .entry-title
-        margin-top: -($spacer * 1.5)
+        margin-bottom: 0
 
     figure
         position: relative
@@ -76,6 +76,21 @@
     &:active
         background: none
 
+//
+// EXIF metadata display
+//
+.exif
+    @extend .small, .text-dimmed
+    text-align: left
+    position: absolute
+    bottom: -($spacer * 1.25)
+    left: $spacer
+    right: $spacer
+
+    .container
+        display: flex
+        flex-wrap: wrap
+        justify-content: space-between
 
 //
 // Photo background change adjustment

_src/_assets/styl/_kremalicious/content-related.styl

@@ -44,5 +44,5 @@
 //
 .related-photos
     @extend .divider-top
-    margin-top: $spacer
-    padding-top: $spacer
+    margin-top: $spacer * 2
+    padding-top: $spacer * 3

_src/_assets/styl/_kremalicious/layout.styl

@@ -14,7 +14,7 @@
         padding: 0 ($spacer * 2)
 
 .container
-    max-width: 35em
+    max-width: 35rem
     margin-left: auto
     margin-right: auto
 

_src/_includes/picture.html

@@ -10,8 +10,8 @@
     {% assign pictureSize = 'w_275,h_100,c_fill,q_auto:good,f_auto' %}
     {% assign pictureSizeRetina = 'w_550,h_200,c_fill,q_auto:good,f_auto' %}
 {% else %}
-     {% assign pictureSize = 'w_940,q_auto:best,f_auto' %}
-     {% assign pictureSizeRetina = 'w_1880,q_auto:best,f_auto' %}
+     {% assign pictureSize = 'w_940,f_auto,fl_keep_iptc' %}
+     {% assign pictureSizeRetina = 'w_1880,f_auto,fl_keep_iptc' %}
 {% endcase %}
 
 {% if include.file %}

_src/_layouts/photo.html

@@ -16,12 +16,18 @@ js: photos.min.js
 
             {% include picture.html %}
 
+            <aside class="exif">
+                <div class="container">
+                    <span class="exif__model" title="Camera model"></span>
+                    <span class="exif__aperture" title="Aperture"></span>
+                    <span class="exif__shutterspeed" title="Shutter speed"></span>
+                    <span class="exif__exposure" title="Exposure"></span>
+                    <span class="exif__iso" title="ISO"></span>
+                    <span class="exif__focallength" title="Focal length"></span>
+                </div>
+            </aside>
         </figure>
 
-        <aside class="exif">
-            <div class="exif__make"></div>
-        </aside>
-
         <section class="entry-content">
             {{ content }}
         </section>