From 24b45a49457b58c7a926f777ad75b4146a624f60 Mon Sep 17 00:00:00 2001 From: Garrett Mills Date: Mon, 23 Mar 2026 23:56:22 -0500 Subject: [PATCH] Create photo_exif liquid component + update photography blogs to use it --- eleventy.config.js | 13 ++++ package.json | 1 + pnpm-lock.yaml | 8 ++ src/_includes/icons/aperture.liquid | 1 + src/_includes/icons/arrow-up.liquid | 1 + src/_includes/icons/calendar.liquid | 1 + src/_includes/icons/camera.liquid | 1 + src/_includes/icons/crop.liquid | 1 + src/_includes/icons/locate-fixed.liquid | 1 + src/_includes/icons/map-pin.liquid | 1 + src/_includes/icons/rabbit.liquid | 1 + src/_includes/photo_exif.liquid | 47 ++++++++++++ src/assets/css/obsidian.css | 75 ++++++++++++++++++- src/blog/index.liquid | 3 +- src/blog/posts/2021-08-25-self-portrait.md | 6 +- .../posts/2024-05-15-commencement-photos.md | 21 ++++-- ...5-04-16-miscellaneous-photos-april-2025.md | 45 +++++++---- .../2026-03-08-misc-photos-march-2026.md | 63 ++++++++++------ src/technical.md | 1 + 19 files changed, 241 insertions(+), 50 deletions(-) create mode 100644 src/_includes/icons/aperture.liquid create mode 100644 src/_includes/icons/arrow-up.liquid create mode 100644 src/_includes/icons/calendar.liquid create mode 100644 src/_includes/icons/camera.liquid create mode 100644 src/_includes/icons/crop.liquid create mode 100644 src/_includes/icons/locate-fixed.liquid create mode 100644 src/_includes/icons/map-pin.liquid create mode 100644 src/_includes/icons/rabbit.liquid create mode 100644 src/_includes/photo_exif.liquid diff --git a/eleventy.config.js b/eleventy.config.js index 9a83481..fac42ec 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -4,6 +4,9 @@ import brokenLinksPlugin from 'eleventy-plugin-broken-links' import { eleventyImageTransformPlugin } from '@11ty/eleventy-img' import syntaxHighlight from '@11ty/eleventy-plugin-syntaxhighlight' import footnote from 'markdown-it-footnote' +import fetch from 'node-fetch' +import fs from 'node:fs' +import exifParser from 'exif-parser' import { EleventyRenderPlugin, IdAttributePlugin } from '@11ty/eleventy' import { setupBlogCollections } from './scripts/eleventy/blog.js' import { setupFeedCollections } from './scripts/eleventy/feed.js' @@ -33,6 +36,16 @@ const setupPlugins = eleventyConfig => { eleventyConfig.addLiquidFilter('dateToRfc822', rssPlugin.dateToRfc822) eleventyConfig.addLiquidFilter('dateToRfc3339', rssPlugin.dateToRfc3339) eleventyConfig.addLiquidFilter('getNewestCollectionItemDate', rssPlugin.getNewestCollectionItemDate) + + eleventyConfig.addLiquidFilter('parseExif', async (src) => { + const content = src.startsWith('https://') + ? await fetch(src).then(r => r.arrayBuffer()) + : fs.readFileSync(src) + + const result = exifParser.create(content).parse() + console.log({ result }) + return result + }) } export default function (eleventyConfig) { diff --git a/package.json b/package.json index 69dc8f8..7490be4 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0", "canvas": "^3.1.0", "eleventy-plugin-broken-links": "^2.2.1", + "exif-parser": "^0.1.12", "favicons": "^7.2.0", "markdown-it-footnote": "^4.0.0", "node-fetch": "^3.3.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d643303..a691dad 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -29,6 +29,9 @@ importers: eleventy-plugin-broken-links: specifier: ^2.2.1 version: 2.2.1 + exif-parser: + specifier: ^0.1.12 + version: 0.1.12 favicons: specifier: ^7.2.0 version: 7.2.0 @@ -643,6 +646,9 @@ packages: eventemitter3@4.0.7: resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==} + exif-parser@0.1.12: + resolution: {integrity: sha512-c2bQfLNbMzLPmzQuOr8fy0csy84WmwnER81W88DzTp9CYNPJ6yzOj2EZAh9pywYpqHnshVLHQJ8WzldAyfY+Iw==} + expand-template@2.0.3: resolution: {integrity: sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==} engines: {node: '>=6'} @@ -2176,6 +2182,8 @@ snapshots: eventemitter3@4.0.7: {} + exif-parser@0.1.12: {} + expand-template@2.0.3: {} extend-shallow@2.0.1: diff --git a/src/_includes/icons/aperture.liquid b/src/_includes/icons/aperture.liquid new file mode 100644 index 0000000..5de867b --- /dev/null +++ b/src/_includes/icons/aperture.liquid @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/_includes/icons/arrow-up.liquid b/src/_includes/icons/arrow-up.liquid new file mode 100644 index 0000000..71fd923 --- /dev/null +++ b/src/_includes/icons/arrow-up.liquid @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/_includes/icons/calendar.liquid b/src/_includes/icons/calendar.liquid new file mode 100644 index 0000000..4c131e3 --- /dev/null +++ b/src/_includes/icons/calendar.liquid @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/_includes/icons/camera.liquid b/src/_includes/icons/camera.liquid new file mode 100644 index 0000000..6b84fac --- /dev/null +++ b/src/_includes/icons/camera.liquid @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/_includes/icons/crop.liquid b/src/_includes/icons/crop.liquid new file mode 100644 index 0000000..7628e2d --- /dev/null +++ b/src/_includes/icons/crop.liquid @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/_includes/icons/locate-fixed.liquid b/src/_includes/icons/locate-fixed.liquid new file mode 100644 index 0000000..10d4384 --- /dev/null +++ b/src/_includes/icons/locate-fixed.liquid @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/_includes/icons/map-pin.liquid b/src/_includes/icons/map-pin.liquid new file mode 100644 index 0000000..c4d566f --- /dev/null +++ b/src/_includes/icons/map-pin.liquid @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/_includes/icons/rabbit.liquid b/src/_includes/icons/rabbit.liquid new file mode 100644 index 0000000..93c16bd --- /dev/null +++ b/src/_includes/icons/rabbit.liquid @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/_includes/photo_exif.liquid b/src/_includes/photo_exif.liquid new file mode 100644 index 0000000..80f3a51 --- /dev/null +++ b/src/_includes/photo_exif.liquid @@ -0,0 +1,47 @@ +{% assign exif = src | parseExif %} +
+
+ Image: {{ title }} +
+
+
    +
  • {{ title }}
    • +
  • + {%- include './icons/calendar' -%} +
    {{ exif.tags.CreateDate | date:'%b %Y' }}
    +
    • + {%- if location -%} +
  • + {%- include './icons/map-pin' %} +
    {{ location }}
    +
    • + {%- endif -%} + {%- if exif.tags.GPSLatitude %} +
  • + {%- include './icons/locate-fixed' -%} +
    {{ exif.tags.GPSLatitude | round:3 }}, {{ exif.tags.GPSLongitude | round:3 }}
    +
    • + {% endif -%} +
  • + {%- include './icons/camera' -%} +
    {{ exif.tags.Model }}
    +
    • +
  • + {%- include './icons/arrow-up' -%} +
    ISO {{ exif.tags.ISO }}
    +
    • +
  • + {%- include './icons/aperture' -%} +
    f/{{ exif.tags.FNumber }}
    +
    • +
  • + {%- include './icons/rabbit' -%} +
    {{ exif.tags.ExposureTime }}
    +
    • +
  • + {%- include './icons/crop' -%} +
    {{ exif.tags.ExifImageWidth }} ✕ {{ exif.tags.ExifImageHeight }}
    +
    • +
+
+
diff --git a/src/assets/css/obsidian.css b/src/assets/css/obsidian.css index e235a14..855c6ee 100644 --- a/src/assets/css/obsidian.css +++ b/src/assets/css/obsidian.css @@ -1,12 +1,11 @@ - - - body { --background: #111; --background-2: #252525; --background-3: #444; --color: #fffbe3; --color-2: #d0c895; + --color-3: #999; + --content-width: 800px; background: var(--background); color: var(--color); @@ -20,7 +19,7 @@ body { } .wrapper { - max-width: 800px; + max-width: var(--content-width); width: calc(100% - 40px); padding-left: 20px; padding-right: 20px; @@ -288,6 +287,74 @@ td, th { white-space: nowrap; } +.photo-exif { + display: flex; + flex-direction: row; + gap: 10px; + margin-top: 30px; + margin-bottom: 30px; + width: calc(var(--content-width) + 260px); +} + +.photo-exif .img-wrapper img { + margin: 0; + border-radius: 15px; + max-height: calc(100vh - 20px); + width: auto; +} + +.photo-exif .exif-wrapper { + min-width: 250px; +} + +.photo-exif .exif-wrapper ul { + list-style-type: none; + margin: 0; + color: var(--color-3); + background: var(--background-2); + padding: 10px; + border-radius: 15px; +} + +.photo-exif .exif-wrapper ul li { + display: flex; + flex-direction: row; + margin: 7px 0; +} + +.photo-exif .exif-wrapper ul li svg { + min-width: 24px; + max-width: 24px; + min-height: 24px; + max-height: 24px; + margin-right: 7px; +} + +.photo-exif .exif-wrapper ul .title { + color: var(--color); + font-style: italic; +} + +@media screen and (max-width: 1270px) { + /* 1020px = 800px (max content width) + 470px (.photo-exif title card width * 2) */ + /* Below that, reformat for portrait mode. */ + .photo-exif { + flex-direction: column; + width: unset; + } + + .photo-exif .exif-wrapper ul { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 0 20px; + } + + .photo-exif .exif-wrapper ul .title { + flex-basis: 100%; + } +} + @media screen and (max-width: 500px) { nav ul { flex-direction: column; diff --git a/src/blog/index.liquid b/src/blog/index.liquid index 4fe1a8d..2f02506 100644 --- a/src/blog/index.liquid +++ b/src/blog/index.liquid @@ -7,7 +7,8 @@