trey · January 18, 2025 01:35 · Jun 28, 2020 · Jun 28, 2020 · Jun 28, 2020 · Jun 28, 2020
diff --git a/template.liquid b/template.liquid
@@ -3,4 +3,4 @@
     <figcaption>
         {% exifData image %}
     </figcaption>
-</figure>
+</figure>
diff --git a/exif-data.js b/exif-data.js
@@ -31,7 +31,7 @@ module.exports = async(src) => {
         // where it exists and makes sense.
         for (const [key, value] of items) {
             if (value) {
-                markup += `<div>${key}: ${value}<div>`;
+                markup += `<div>${key}: ${value}</div>`;
             }
         }
 

diff --git a/.eleventy.js b/.eleventy.js
@@ -1,3 +1,4 @@
+const responsiveImage = require('./src/_includes/shortcodes/responsive-image');
 const exifData = require('./src/_includes/shortcodes/exif-data');
 
 // …

diff --git a/template.liquid b/template.liquid
@@ -1,6 +1,6 @@
 <figure>
-    {% comment %} Put an image here {% endcomment %}
+    {% responsiveImage image %}
     <figcaption>
-        {% exifData 'whatever.jpg' %}
+        {% exifData image %}
     </figcaption>
-</figure>
+</figure>
diff --git a/responsive-image.js b/responsive-image.js
@@ -11,7 +11,7 @@ module.exports = async (src, alt, title, width, height) => {
     };
 
     if (alt === undefined) {
-        // Pull in EXIF data if we don't have alt text.
+        // Pull in Exif data if we don’t have alt text.
         const altText = await exif.read(`${options.inputDir}/${src}`).then(
             exifData => exifData.image.ImageDescription
         );

diff --git a/exif-data.js b/exif-data.js
@@ -1,5 +1,5 @@
 const exif = require('fast-exif');
-const imgFolder = '';
+const imgFolder = 'src/img/gallery/';
 
 module.exports = async(src) => {
     const path = imgFolder + src;
@@ -18,18 +18,18 @@ module.exports = async(src) => {
             : `Photo from ${DateTime.getFullYear()}`;
 
         // Create an object with the items we want.
-        const entries = Object.entries({
+        const items = Object.entries({
             Year: DateTime.getFullYear(),
             Camera: `${exifData.image.Make} ${exifData.image.Model}`,
             Caption: imgDescription,
             'ƒ/stop': exifData.exif.FNumber,
-            Shutter: isNaN(exifData.exif.ExposureTime) ? null : `1/${1 / exifData.exif.ExposureTime}`,
+            Shutter: !(isNaN(exifData.exif.ExposureTime)) ? `1/${1 / exifData.exif.ExposureTime}` : null,
             'ISO': exifData.exif.ISO,
         });
 
         // Loop through the objects one by one and only include output
         // where it exists and makes sense.
-        for (const [key, value] of entries) {
+        for (const [key, value] of items) {
             if (value) {
                 markup += `<div>${key}: ${value}<div>`;
             }

diff --git a/.eleventy.js b/.eleventy.js
@@ -5,6 +5,8 @@ const exifData = require('./src/_includes/shortcodes/exif-data');
 module.exports = function(eleventyConfig) {
     // …
 
+    eleventyConfig.addShortcode('responsiveImage', responsiveImage);
+
     eleventyConfig.addShortcode('exifData', exifData);
 
     // …

diff --git a/responsive-image.js b/responsive-image.js
@@ -0,0 +1,44 @@
+const Image = require('@11ty/eleventy-img');
+const exif = require('fast-exif');
+
+module.exports = async (src, alt, title, width, height) => {
+    const options = {
+        inputDir: 'src/img/gallery',
+        outputDir: 'dist/img/gallery',
+        urlPath: '/img/gallery',
+        widths: [800, 1600, 2200, null],
+        formats: 'jpeg',
+    };
+
+    if (alt === undefined) {
+        // Pull in EXIF data if we don't have alt text.
+        const altText = await exif.read(`${options.inputDir}/${src}`).then(
+            exifData => exifData.image.ImageDescription
+        );
+
+        if (altText) {
+            alt = altText;
+        } else {
+            throw new Error(`Missing alt on responsiveImage from: ${src}`);
+        }
+    }
+
+    let stats = await Image(`${options.inputDir}/${src}`, options);
+    let lowestSrc = stats.jpeg[0];
+    let titleAttribute = (title) ? `title="${title}"` : '';
+    let props = stats[options.formats].pop();
+
+    // If sizes are passed in, use them. Otherwise, analyze the files.
+    let definedWidth = (width) ? width : props.width;
+    let definedHeight = (height) ? height : props.height;
+
+    const imgTag = `<img ${titleAttribute}
+                        alt="${alt}"
+                        src="${lowestSrc.url}"
+                        width="${definedWidth}"
+                        height="${definedHeight}"
+                        srcset="${stats.jpeg.map(entry => `${entry.url} ${entry.width}w`)}" />`;
+
+    // Remove extraneous spaces and newlines.
+    return imgTag.replace(/\n/g, '').replace(/\s+/g, ' ');
+};
diff --git a/exif-data.js b/exif-data.js
@@ -1,12 +1,13 @@
 const exif = require('fast-exif');
-const imgFolder = 'src/img/gallery/';
+const imgFolder = '';
 
 module.exports = async(src) => {
     const path = imgFolder + src;
 
     const imageData = await exif.read(path).then(exifData => {
-
         let DateTime;
+        let markup = '';
+
         if (exifData.exif.DateTimeDigitized) {
             DateTime = new Date(exifData.exif.DateTimeDigitized);
         } else {
@@ -17,22 +18,21 @@ module.exports = async(src) => {
             : `Photo from ${DateTime.getFullYear()}`;
 
         // Create an object with the items we want.
-        // Loop through the objects one by one and only include output
-        // where it exists and makes sense.
-        const items = {
-            year: DateTime.getFullYear(),
-            camera: `${exifData.image.Make} ${exifData.image.Model}`,
-            caption: imgDescription,
+        const entries = Object.entries({
+            Year: DateTime.getFullYear(),
+            Camera: `${exifData.image.Make} ${exifData.image.Model}`,
+            Caption: imgDescription,
             'ƒ/stop': exifData.exif.FNumber,
-            shutter: isNaN(exifData.exif.ExposureTime) ? null : `1/${1 / exifData.exif.ExposureTime}`,
+            Shutter: isNaN(exifData.exif.ExposureTime) ? null : `1/${1 / exifData.exif.ExposureTime}`,
             'ISO': exifData.exif.ISO,
-        };
-
-        const entries = Object.entries(items);
-        let markup = '';
+        });
 
+        // Loop through the objects one by one and only include output
+        // where it exists and makes sense.
         for (const [key, value] of entries) {
-            markup += `<div>${key}: ${value}<div>`;
+            if (value) {
+                markup += `<div>${key}: ${value}<div>`;
+            }
         }
 
         return markup;

diff --git a/exif-data.js b/exif-data.js
@@ -5,7 +5,6 @@ module.exports = async(src) => {
     const path = imgFolder + src;
 
     const imageData = await exif.read(path).then(exifData => {
-        // console.log('exifData', exifData);
 
         let DateTime;
         if (exifData.exif.DateTimeDigitized) {
@@ -29,15 +28,14 @@ module.exports = async(src) => {
             'ISO': exifData.exif.ISO,
         };
 
-        console.log('items', items);
+        const entries = Object.entries(items);
+        let markup = '';
 
-        return `
-            <div>year: ${DateTime.getFullYear()}</div>
-            <div>camera: ${exifData.image.Make} ${exifData.image.Model}</div>
-            <div>caption: ${imgDescription}</div>
-            <div>fstop: ${exifData.exif.FNumber}</div>
-            <div>shutter: 1/${1/exifData.exif.ExposureTime}</div>
-            <div>iso: ${exifData.exif.ISO}</div>`;
+        for (const [key, value] of entries) {
+            markup += `<div>${key}: ${value}<div>`;
+        }
+
+        return markup;
     }).catch(console.error);
 
     return imageData;

diff --git a/exif-data.js b/exif-data.js
@@ -5,6 +5,8 @@ module.exports = async(src) => {
     const path = imgFolder + src;
 
     const imageData = await exif.read(path).then(exifData => {
+        // console.log('exifData', exifData);
+
         let DateTime;
         if (exifData.exif.DateTimeDigitized) {
             DateTime = new Date(exifData.exif.DateTimeDigitized);
@@ -15,8 +17,23 @@ module.exports = async(src) => {
             ? exifData.image.ImageDescription
             : `Photo from ${DateTime.getFullYear()}`;
 
+        // Create an object with the items we want.
+        // Loop through the objects one by one and only include output
+        // where it exists and makes sense.
+        const items = {
+            year: DateTime.getFullYear(),
+            camera: `${exifData.image.Make} ${exifData.image.Model}`,
+            caption: imgDescription,
+            'ƒ/stop': exifData.exif.FNumber,
+            shutter: isNaN(exifData.exif.ExposureTime) ? null : `1/${1 / exifData.exif.ExposureTime}`,
+            'ISO': exifData.exif.ISO,
+        };
+
+        console.log('items', items);
+
         return `
             <div>year: ${DateTime.getFullYear()}</div>
+            <div>camera: ${exifData.image.Make} ${exifData.image.Model}</div>
             <div>caption: ${imgDescription}</div>
             <div>fstop: ${exifData.exif.FNumber}</div>
             <div>shutter: 1/${1/exifData.exif.ExposureTime}</div>

diff --git a/exif-data.js b/exif-data.js
@@ -11,17 +11,17 @@ module.exports = async(src) => {
         } else {
             DateTime = new Date(exifData.exif.DateTimeOriginal);
         }
+        const imgDescription = (exifData.image.ImageDescription)
+            ? exifData.image.ImageDescription
+            : `Photo from ${DateTime.getFullYear()}`;
 
-        return {
-            height: exifData.exif.PixelYDimension,
-            width: exifData.exif.PixelXDimension,
-            year: DateTime.getFullYear(),
-            caption: exifData.image.ImageDescription || `Photo from ${DateTime.getFullYear()}`,
-            fstop: exifData.exif.FNumber,
-            shutter: 1 / exifData.exif.ExposureTime,
-            iso: exifData.exif.ISO,
-        };
+        return `
+            <div>year: ${DateTime.getFullYear()}</div>
+            <div>caption: ${imgDescription}</div>
+            <div>fstop: ${exifData.exif.FNumber}</div>
+            <div>shutter: 1/${1/exifData.exif.ExposureTime}</div>
+            <div>iso: ${exifData.exif.ISO}</div>`;
     }).catch(console.error);
 
-    console.log('imageData', imageData);
+    return imageData;
 };
diff --git a/.eleventy.js b/.eleventy.js
@@ -0,0 +1,11 @@
+const exifData = require('./src/_includes/shortcodes/exif-data');
+
+// …
+
+module.exports = function(eleventyConfig) {
+    // …
+
+    eleventyConfig.addShortcode('exifData', exifData);
+
+    // …
+}
diff --git a/exif-data.js b/exif-data.js
@@ -0,0 +1,27 @@
+const exif = require('fast-exif');
+const imgFolder = 'src/img/gallery/';
+
+module.exports = async(src) => {
+    const path = imgFolder + src;
+
+    const imageData = await exif.read(path).then(exifData => {
+        let DateTime;
+        if (exifData.exif.DateTimeDigitized) {
+            DateTime = new Date(exifData.exif.DateTimeDigitized);
+        } else {
+            DateTime = new Date(exifData.exif.DateTimeOriginal);
+        }
+
+        return {
+            height: exifData.exif.PixelYDimension,
+            width: exifData.exif.PixelXDimension,
+            year: DateTime.getFullYear(),
+            caption: exifData.image.ImageDescription || `Photo from ${DateTime.getFullYear()}`,
+            fstop: exifData.exif.FNumber,
+            shutter: 1 / exifData.exif.ExposureTime,
+            iso: exifData.exif.ISO,
+        };
+    }).catch(console.error);
+
+    console.log('imageData', imageData);
+};
diff --git a/template.liquid b/template.liquid
@@ -0,0 +1,6 @@
+<figure>
+    {% comment %} Put an image here {% endcomment %}
+    <figcaption>
+        {% exifData 'whatever.jpg' %}
+    </figcaption>
+</figure>