Merge pull request #118 from aarongustafson/image-transform-enhancements

Image transform enhancements

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hylia",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "A simple Eleventy starter kit to help you have a blog of your own",
   "main": "index.js",
   "dependencies": {
@@ -10,6 +10,7 @@
     "@tbranyen/jsdom": "^13.0.0",
     "concurrently": "^4.1.2",
     "html-minifier": "^4.0.0",
+    "image-size": "^0.8.3",
     "json-to-scss": "^1.5.0",
     "sass": "^1.26.3",
     "semver": "^6.3.0",

src/scss/global.scss

@@ -41,6 +41,11 @@ hr {
   margin: get-size(900) auto;
 }
 
+// For when metric attributes are added to img elements
+img {
+  height: auto;
+}
+
 :focus {
   outline: 1px solid var(--color-theme-primary-glare);
   outline-offset: 0.25rem;

src/transforms/parse-transform.js

@@ -2,6 +2,7 @@ const jsdom = require('@tbranyen/jsdom');
 const {JSDOM} = jsdom;
 const minify = require('../utils/minify.js');
 const slugify = require('slugify');
+const getSize = require('image-size');
 
 module.exports = function(value, outputPath) {
   if (outputPath.endsWith('.html')) {
@@ -10,7 +11,7 @@ module.exports = function(value, outputPath) {
     });
 
     const document = DOM.window.document;
-    const articleImages = [...document.querySelectorAll('main article img')];
+    const articleImages = [...document.querySelectorAll('main article img, .intro img')];
     const articleHeadings = [
       ...document.querySelectorAll('main article h2, main article h3')
     ];
@@ -20,6 +21,15 @@ module.exports = function(value, outputPath) {
       articleImages.forEach(image => {
         image.setAttribute('loading', 'lazy');
 
+        const file = image.getAttribute('src');
+
+        if (file.indexOf('http') < 0) {
+          const dimensions = getSize('src' + file);
+
+          image.setAttribute('width', dimensions.width);
+          image.setAttribute('height', dimensions.height);;
+        }
+
         // If an image has a title it means that the user added a caption
         // so replace the image with a figure containing that image and a caption
         if (image.hasAttribute('title')) {