fix(theme): block submit on unfinished photo uploads; un-squeeze EXIF portraits in lightbox
Two prod bugs from the 2026-07-09 owner test: - post-form.js: complete upload gate on create submit. The form plugin's guard only blocks PROCESSING/QUEUED, so a failed upload (processing-error) or a just-picked file (loading) submitted silently and the entry saved without its photo. Submit is now blocked unless every FilePond item is processing-complete, with a visible status message for the failed vs still-uploading cases. (Bundle rebuilt via make build-assets.) - entry-journal partial: PhotoSwipe slides now link to a 2000px fit-within derivative and measure THAT file for data-pswp-width/height. The old img.width/height came from raw getimagesize() of the original, which ignores EXIF orientation, so stored-rotated portrait JPEGs got landscape slide boxes and rendered squeezed. Derivatives are re-encoded (EXIF stripped, orientation baked in server-side), so declared dims always match rendering. Also fixes the wrapper aspect-ratio pick for portrait-first entries. Note: Medium 'path' must be called as path() in Twig — the ArrayAccess 'path' item (page folder) shadows the method. Covered by tests/ui/post/upload-gate.spec.js and lightbox-dims.spec.js in the dev repo. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0195b3cDdMeize2Mm1FgC2aU
This commit is contained in:
File diff suppressed because one or more lines are too long
@@ -235,6 +235,38 @@ function initPhotoConversion() {
|
||||
}
|
||||
}, true);
|
||||
|
||||
// Complete upload gate (BUG 2026-07-09: fast create submit lost the photo).
|
||||
// The form plugin's own submit guard (filepond-handler.js) only blocks the
|
||||
// PROCESSING / PROCESSING_QUEUED states. A file still being read (LOADING —
|
||||
// the "too quick" click) or one whose upload FAILED (PROCESSING_ERROR)
|
||||
// slips through it and the entry is saved without the photo — silently,
|
||||
// because an errored thumbnail still satisfies the ≥1-photo count. Block
|
||||
// submit unless every FilePond item reached PROCESSING_COMPLETE, and say
|
||||
// which case blocked it.
|
||||
form.addEventListener('submit', function (e) {
|
||||
if (!orderPond) return;
|
||||
var files = orderPond.getFiles();
|
||||
if (!files.length) return; // the ≥1-photo rule is initValidation's job
|
||||
var statuses = (window.FilePond && window.FilePond.FileStatus) || {};
|
||||
var pending = 0;
|
||||
var failed = 0;
|
||||
files.forEach(function (f) {
|
||||
if (f.status === statuses.PROCESSING_COMPLETE) return;
|
||||
if (f.status === statuses.PROCESSING_ERROR || f.status === statuses.LOAD_ERROR) failed++;
|
||||
else pending++; // LOADING, INIT, IDLE, QUEUED, PROCESSING, …
|
||||
});
|
||||
if (!pending && !failed) return;
|
||||
e.preventDefault();
|
||||
if (collapse) collapse.details.open = true; // reveal the item states
|
||||
setStatus(failed
|
||||
? 'A photo failed to upload — remove it (tap its ✕) and re-add it before posting.'
|
||||
: 'Photos are still uploading — hang on a moment.', 'err');
|
||||
var el = photoStatusEl();
|
||||
if (el && typeof el.scrollIntoView === 'function') {
|
||||
el.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
}, true);
|
||||
|
||||
// FilePond hook: reject a HEIC item, convert it to JPEG via the lazy heic-to
|
||||
// chunk (KTD4), then re-add the JPEG through pond.addFile() so FilePond
|
||||
// uploads and page-attaches it via its own (correct) contract.
|
||||
|
||||
@@ -38,15 +38,32 @@
|
||||
|
||||
{% set images = entry.media.images %}
|
||||
{% if images|length > 0 %}
|
||||
{% set firstImg = images|first %}
|
||||
{% set wrapRatio = firstImg.height > firstImg.width ? '4 / 5' : '4 / 3' %}
|
||||
{#
|
||||
Lightbox slides link to a 2000px fit-within DERIVATIVE, and the
|
||||
data-pswp-* dims are measured from that derivative's saved file — never
|
||||
from `img.width`/`img.height`, which are the ORIGINAL's raw stored pixels
|
||||
with EXIF orientation ignored. Originals from iPhones are often stored
|
||||
rotated (landscape pixels + EXIF "rotate 90°"), so raw dims disagree with
|
||||
what the browser renders and PhotoSwipe squeezes portraits into landscape
|
||||
boxes (BUG 2026-07-09, covered by tests/ui/post/lightbox-dims.spec.js).
|
||||
The derivative is re-encoded (EXIF stripped, orientation baked in when
|
||||
php-exif is available), so its measured dims always match its rendering.
|
||||
Note: .path()/.url each finalize+reset the medium's operation queue,
|
||||
hence the repeated cropResize() calls — the derivative file itself is
|
||||
cached. path() needs explicit parens: Medium is ArrayAccess and carries a
|
||||
'path' ITEM (the page folder), which shadows the method in Twig's
|
||||
attribute resolution and hands getimagesize a directory.
|
||||
#}
|
||||
{% set firstDims = (images|first).cropResize(2000, 2000).path()|getimagesize %}
|
||||
{% set wrapRatio = firstDims[1] > firstDims[0] ? '4 / 5' : '4 / 3' %}
|
||||
<div class="journal-photo-wrap" style="aspect-ratio: {{ wrapRatio }}">
|
||||
<div class="journal-photo-strip pswp-gallery" id="gallery-{{ entry.slug }}" data-slides="{{ images|length }}">
|
||||
{% for img in images %}
|
||||
{% set slideDims = img.cropResize(2000, 2000).path()|getimagesize %}
|
||||
<a class="journal-photo-slide"
|
||||
href="{{ img.url }}"
|
||||
data-pswp-width="{{ img.width }}"
|
||||
data-pswp-height="{{ img.height }}"
|
||||
href="{{ img.cropResize(2000, 2000).url }}"
|
||||
data-pswp-width="{{ slideDims[0] }}"
|
||||
data-pswp-height="{{ slideDims[1] }}"
|
||||
style="--thumb: url('{{ img.cropResize(900, 675).url }}')"
|
||||
target="_blank">
|
||||
<img src="{{ img.cropResize(900, 675).url }}" alt="{{ entry.title }}" loading="lazy">
|
||||
|
||||
Reference in New Issue
Block a user