fix: Handle EXIF orientation in uploaded gallery images (#1617, #1694).

app/back-end/helpers/avatar.js

@@ -1,4 +1,4 @@
-const sizeOf = require('image-size');
+const sizeOf = require('./rotation-aware-sizeof.js');
 
 class AvatarHelper {
     /*

app/back-end/helpers/rotation-aware-sizeof.js

@@ -0,0 +1,30 @@
+/*
+ * Rotation-aware sizeOf().
+ *
+ * Images can contain an embedded orientation field, which indicates that they
+ * should be rotated before display. sizeOf() from image-size provides the original
+ * width and height, and the EXIF orientation value.
+ * 
+ * For example, a 3000x4000 portrait image shot on an iPhone and exported from Apple
+ * Photos will appear to have width=4000, height=3000, orientation=6.
+ * 
+ * We often need the rotated dimension ([3000, 4000] for the above example image),
+ * most notably when initializing a Photoswipe gallery, so this module provides a
+ * sizeOf() that returns [width, height] after rotation,
+ * i.e. [3000, 4000] for the above example image.
+ */
+
+const originalSizeOf = require('image-size');
+
+function sizeOf(image) {
+    const info = originalSizeOf(image);
+    if (info.orientation == 6 || info.orientation == 8) {
+        return {
+            width: info.height,
+            height: info.width
+        };
+    }
+    return info;
+}
+
+module.exports = sizeOf;

app/back-end/image.js

@@ -7,7 +7,7 @@ const fs = require('fs-extra');
 const os = require('os');
 const path = require('path');
 const Model = require('./model.js');
-const sizeOf = require('image-size');
+const sizeOf = require('./helpers/rotation-aware-sizeof.js');
 const normalizePath = require('normalize-path');
 const Themes = require('./themes.js');
 const Utils = require('./helpers/utils.js');

app/back-end/modules/render-html/contexts/page-preview.js

@@ -1,7 +1,7 @@
 // Necessary packages
 const fs = require('fs');
 const path = require('path');
-const sizeOf = require('image-size');
+const sizeOf = require('./../../../helpers/rotation-aware-sizeof.js');
 const sqlString = require('sqlstring');
 const normalizePath = require('normalize-path');
 const slug = require('./../../../helpers/slug');

app/back-end/modules/render-html/contexts/post-preview.js

@@ -1,7 +1,7 @@
 // Necessary packages
 const fs = require('fs');
 const path = require('path');
-const sizeOf = require('image-size');
+const sizeOf = require('./../../../helpers/rotation-aware-sizeof.js');
 const sqlString = require('sqlstring');
 const normalizePath = require('normalize-path');
 const slug = require('./../../../helpers/slug');

app/back-end/modules/render-html/handlebars/helpers/image-dimensions.js

@@ -1,5 +1,5 @@
 const Handlebars = require('handlebars');
-const sizeOf = require('image-size');
+const sizeOf = require('./../../../../helpers/rotation-aware-sizeof.js');
 const path = require('path');
 const normalizePath = require('normalize-path');
 

app/back-end/modules/render-html/handlebars/helpers/json-ld.js

@@ -1,6 +1,6 @@
 const Handlebars = require('handlebars');
 const moment = require('moment');
-const sizeOf = require('image-size');
+const sizeOf = require('./../../../../helpers/rotation-aware-sizeof.js');
 const path = require('path');
 const URLHelper = require('../../helpers/url');
 

app/back-end/modules/render-html/handlebars/helpers/social-meta-tags.js

@@ -1,5 +1,5 @@
 const stripTags = require('striptags');
-const sizeOf = require('image-size');
+const sizeOf = require('../../../../helpers/rotation-aware-sizeof.js');
 const path = require('path');
 const normalizePath = require('normalize-path');
 

app/back-end/modules/render-html/items/featured-image.js

@@ -1,5 +1,5 @@
 const path = require('path');
-const sizeOf = require('image-size');
+const sizeOf = require('./../../../helpers/rotation-aware-sizeof');
 const URLHelper = require('./../helpers/url');
 const ContentHelper = require('./../helpers/content');
 const UtilsHelper = require('./../../../helpers/utils');

app/back-end/modules/render-html/renderer-context.js

@@ -8,7 +8,7 @@ const normalizePath = require('normalize-path');
 const Plugins = require('./../../plugins.js');
 const RendererCache = require('./renderer-cache');
 const RendererHelpers = require('./helpers/helpers.js');
-const sizeOf = require('image-size');
+const sizeOf = require('../../helpers/rotation-aware-sizeof.js');
 const UtilsHelper = require('./../../helpers/utils');
 
 /*

app/back-end/workers/thumbnails/post-images.js

@@ -1,6 +1,6 @@
 const Image = require('./../../image.js');
 const normalizePath = require('normalize-path');
-const sizeOf = require('image-size');
+const sizeOf = require('./../../helpers/rotation-aware-sizeof.js');
 
 let result = false;
 let appInstance = false;

app/package.json

@@ -26,6 +26,7 @@
   "homepage": "https://getpublii.com",
   "dependencies": {
     "@aws-sdk/client-s3": "3.623.0",
+    "@emnapi/runtime": "^1.5.0",
     "@gitbeaker/node": "35.8.1",
     "@google-cloud/storage": "6.11.0",
     "@octokit/rest": "22.0.0",

app/src/components/Splashscreen.vue

@@ -5,6 +5,8 @@
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 511 202" xml:space="preserve"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="15.452" y1="-2.861" x2="352.485" y2="112.589" gradientTransform="matrix(1 0 0 -1 -38.95 128.877)"><stop offset=".387" style="stop-color:#0079f2"/><stop offset=".471" style="stop-color:#0079f2"/><stop offset=".634" style="stop-color:#0079f2"/><stop offset=".86" style="stop-color:#1089ff"/><stop offset="1" style="stop-color:#1089ff"/></linearGradient><path fill="url(#a)" d="M6.708 69.285C3.103 71.991 1 61.767 1 58.76c.3-9.021 9.013-13.532 17.125-18.042 21.031-12.028 34.25-17.741 53.178-23.755.601-3.608.901-6.315 1.202-7.818 1.202-10.224 4.807-8.72 9.314-6.615 2.704 1.203 6.009.301 3.305 10.525 26.739-7.818 39.358-10.224 68.501-9.622 31.246.601 68.801 23.154 63.393 48.413-15.323 70.364-119.276 85.7-146.917 82.994 0 23.455 1.502 51.721 1.502 54.427.3 3.608 3.305 9.021-6.61 5.713-10.215-3.308-7.812-18.644-7.812-19.546 0-1.804 1.202-24.357 2.103-43.903-9.614-5.112-8.713-9.622-8.713-9.923 0-2.105 1.202-4.21 3.004-2.406 1.202 1.203 2.704 2.406 6.309 3.308.601-9.923.901-19.546.901-26.763.3-16.839 5.108-47.21 8.713-67.357-26.439 9.021-54.08 24.056-60.99 33.077-2.7 3.608.905 6.014-1.8 7.818zm198.293-20.373c6.009-30.972-34.551-35.182-51.075-35.784-29.143-1.203-47.77 3.308-72.407 11.427-3.605 16.238-6.009 47.21-9.614 73.371-.901 7.818-1.502 17.14-1.803 26.763 31.848 3.909 121.983-9.923 134.901-75.777h-.002z"/><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="46.556" y1="-93.792" x2="383.604" y2="21.663" gradientTransform="matrix(1 0 0 -1 -38.95 128.877)"><stop offset=".387" style="stop-color:#0079f2"/><stop offset=".471" style="stop-color:#0079f2"/><stop offset=".634" style="stop-color:#0079f2"/><stop offset=".86" style="stop-color:#1089ff"/><stop offset="1" style="stop-color:#1089ff"/></linearGradient><path fill="url(#b)" d="M210.408 192.874c-19.829.301-23.134-22.553-23.134-22.553s-7.511 23.154-22.533 21.951c-12.318-1.203-17.426-18.343-15.623-30.672s5.708-23.755 6.61-26.763c.3-1.804 1.502-6.615 8.112-4.511 5.408 1.504 2.404 6.315.601 12.329-3.004 10.224-9.013 37.889 2.404 39.392 7.812.902 16.524-19.846 18.327-27.063 1.202-4.811 2.103-9.322 3.305-14.133 1.202-5.112 3.906-6.916 7.511-6.014 6.61 1.804 3.605 4.811 2.404 9.622-.601 3.308-.601 10.224-1.202 21.049 0 9.021 2.404 17.741 10.215 18.644 19.829 2.105 30.645-22.853 37.555-35.483 2.704-4.811 7.511 2.105.901 13.832-6.01 10.527-19.83 30.073-35.453 30.373z"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="41.481" y1="-79.345" x2="378.689" y2="36.166" gradientTransform="matrix(1 0 0 -1 -38.95 128.877)"><stop offset=".387" style="stop-color:#0079f2"/><stop offset=".471" style="stop-color:#0079f2"/><stop offset=".634" style="stop-color:#0079f2"/><stop offset=".86" style="stop-color:#1089ff"/><stop offset="1" style="stop-color:#1089ff"/></linearGradient><path fill="url(#c)" d="M251.267 195.581c0 .301-6.61 8.119-11.116-3.007-4.807-11.727-.3-37.588-.3-37.588s6.61-40.294 13.52-113.665c5.108-10.525 16.224 0 14.421 6.615.3 0-15.022 55.931-17.726 117.575 0-.301 10.516-43.903 34.551-40.896 18.327 2.406 13.52 33.378 12.619 39.091-4.206 27.665-24.336 37.588-31.547 37.287s-14.422-5.112-14.422-5.412zm2.704-12.93c0 .301 2.103 8.72 10.816 8.42 21.932-1.203 35.452-57.434 16.524-56.231-17.727.9-27.34 47.811-27.34 47.811z"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="49.951" y1="-104.032" x2="387.105" y2="11.459" gradientTransform="matrix(1 0 0 -1 -38.95 128.877)"><stop offset=".387" style="stop-color:#0079f2"/><stop offset=".471" style="stop-color:#0079f2"/><stop offset=".634" style="stop-color:#0079f2"/><stop offset=".86" style="stop-color:#1089ff"/><stop offset="1" style="stop-color:#1089ff"/></linearGradient><path fill="url(#d)" d="M390.367 148.369c3.004-4.811 6.91 2.105.601 13.832-2.103 4.21-18.027 37.287-47.17 35.784-35.452-1.804-36.354-41.196-36.053-74.273.3-29.168 17.726-88.707 40.86-87.204 14.722.902 20.13 18.944 15.623 48.413-5.708 39.993-29.143 79.385-38.757 90.511 5.408 8.42 12.919 13.532 21.632 13.532 21.931.001 36.354-27.964 43.264-40.595zM348.305 47.634c-11.417-.902-27.641 36.084-31.547 76.679-.901 12.329.901 33.077 4.807 43.903 15.623-22.553 20.43-34.28 31.246-76.98 2.103-7.818 6.91-43-4.508-43.603l.002.001z"/><linearGradient id="e" gradientUnits="userSpaceOnUse" x1="67.053" y1="-153.738" x2="404.116" y2="-38.277" gradientTransform="matrix(1 0 0 -1 -38.95 128.877)"><stop offset=".387" style="stop-color:#0079f2"/><stop offset=".471" style="stop-color:#0079f2"/><stop offset=".634" style="stop-color:#0079f2"/><stop offset=".86" style="stop-color:#1089ff"/><stop offset="1" style="stop-color:#1089ff"/></linearGradient><path fill="url(#e)" d="M408.99 197.986c-23.435.301-25.838-27.665-25.237-33.077.601-6.615 3.004-20.147 3.004-20.147 2.103-5.413 11.417-4.811 11.417.601 0 1.504-11.417 43.903 12.018 42.7 15.923-.601 30.946-27.665 37.856-40.294 2.704-5.112 6.91 1.804.901 13.832-2.102 4.21-18.626 36.385-39.959 36.385zm-9.013-75.476c-.654 4.311-4.677 7.275-8.984 6.62a.25.25 0 0 1-.029-.005c-5.708-.902-6.91-5.713-6.61-8.72 0-2.706 3.004-10.224 9.314-9.322 6.609.901 6.91 7.216 6.309 11.427z"/><linearGradient id="f" gradientUnits="userSpaceOnUse" x1="73.136" y1="-171.516" x2="410.199" y2="-56.056" gradientTransform="matrix(1 0 0 -1 -38.95 128.877)"><stop offset=".387" style="stop-color:#0079f2"/><stop offset=".471" style="stop-color:#0079f2"/><stop offset=".634" style="stop-color:#0079f2"/><stop offset=".86" style="stop-color:#1089ff"/><stop offset="1" style="stop-color:#1089ff"/></linearGradient><path fill="url(#f)" d="M466.973 197.986c-23.435.301-25.838-27.665-25.237-33.077.601-6.615 3.004-20.147 3.004-20.147 2.103-5.413 11.417-4.811 11.417.601 0 1.504-11.417 43.903 12.018 42.7 15.923-.601 30.946-27.665 37.856-40.294 2.704-5.112 6.91 1.804.901 13.832-2.102 4.21-18.627 36.385-39.959 36.385zm-9.014-75.476c-.654 4.311-4.677 7.275-8.984 6.62a.25.25 0 0 1-.029-.005c-5.708-.902-6.91-5.713-6.61-8.72 0-2.706 3.004-10.224 9.314-9.322 6.61.901 6.911 7.216 6.309 11.427z"/></svg>
             </h1>
 
+            <h1>philandbrittany.com edition -- with image aspect ratio fixes.</h1>
+
             <small class="version">
                 v.{{ version }} (build <span class="splashscreen-build">{{ build }}</span>)
             </small>

brittany_build.sh

@@ -0,0 +1,26 @@
+#!/bin/bash
+set -euo pipefail
+
+source setup_correct_node.sh
+
+echo "Killing any stray webpack processes"
+pkill webpack || true
+
+echo "Running npm install"
+rm -vf package-lock.json app/package-lock.json
+npm install
+(cd app; npm install)
+
+echo "Running npm run prod"
+npm run prod
+
+echo "Running npm run prepare-editor"
+npm run prepare-editor
+
+echo "Running packager"
+rm -rf dist
+npm run packager:mac-m
+
+DEST="$HOME/Dropbox/brittany/Publii-for-Brittany.app"
+rm -rf "$DEST"
+cp -av dist/mac-arm64/Publii.app "$DEST"

clean.sh

@@ -0,0 +1,8 @@
+#!/bin/bash
+set -euo pipefail
+
+for d in . app; do
+    rm -vrf $d/node_modules
+    git checkout $d/package-lock.json
+done
+

dev.sh

@@ -0,0 +1,18 @@
+#!/bin/bash
+set -euo pipefail
+
+source setup_correct_node.sh
+
+echo "Installing node modules in ./"
+npm install
+echo "Installing node modules in ./app"
+(cd app; npm install)
+echo "Running npm run dev-prep"
+npm run dev-prep
+
+echo "Running npm run dev in the background"
+npm run dev &
+echo "Running npm run prepare-editor"
+npm run prepare-editor
+echo "Running npm run build, which should start the app"
+npm run build

package.json

@@ -12,6 +12,7 @@
   "main": "app/main.js",
   "scripts": {
     "dev": "cross-env NODE_ENV=development webpack --mode=development --progress --watch",
+    "dev-prep": "cross-env NODE_ENV=development webpack --mode=development --progress",
     "prod": "cross-env NODE_ENV=production webpack --mode=production --progress",
     "build": "node ./build/scripts/update-build-number.js && cross-env NODE_ENV=development ./node_modules/.bin/electron app/",
     "build2": "cross-env NODE_ENV=development ./node_modules/.bin/electron app/",

setup_correct_node.sh

@@ -0,0 +1,4 @@
+NODEVERSION=24
+export PATH="/opt/homebrew/opt/node@${NODEVERSION}/bin:$PATH"
+export LDFLAGS="-L/opt/homebrew/opt/node@${NODEVERSION}/lib"
+export CPPFLAGS="-I/opt/homebrew/opt/node@${NODEVERSION}/include"