aboutsummaryrefslogtreecommitdiffstats
path: root/src/features
diff options
context:
space:
mode:
authorAdam Soltys <[email protected]>2026-10-04 09:07:47 -0700
committerAdam Soltys <[email protected]>2026-10-04 09:07:47 -0700
commitd5db8bf6226f2fe06a65eed05e706c80dd0d904c (patch)
tree6c3b58cb651a0357ce5474d995b398ac6e413306 /src/features
parent7421218e987b0053f1ddbefaddc2c9ecfd664954 (diff)
downloadcoinosv3-d5db8bf6226f2fe06a65eed05e706c80dd0d904c.tar.gz
coinosv3-d5db8bf6226f2fe06a65eed05e706c80dd0d904c.zip
Feed pictures uncropped: the column's width at their own shape, height-capped
The 3:4 crop for tall pictures cut the top and bottom off comics. Now nothing is cropped; a picture is as wide as the column allows up to min(560px, 70vh) tall, and only one taller than that narrows. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_011bvzKaZosXGHkigcGcSzAR
Diffstat (limited to 'src/features')
-rw-r--r--src/features/messages.js14
1 files changed, 4 insertions, 10 deletions
diff --git a/src/features/messages.js b/src/features/messages.js
index 547c050..09e4c95 100644
--- a/src/features/messages.js
+++ b/src/features/messages.js
@@ -6709,7 +6709,6 @@ export function messagesFeature(ctx) {
// opens the thread — not on the picture.
function onPicture(e) {
const el = e.currentTarget;
- if (el.classList.contains('tall')) return true; // cropped to fill its frame: all picture
const r = el.getBoundingClientRect();
const nw = el.naturalWidth, nh = el.naturalHeight;
if (!nw || !nh || !r.width || !r.height) return true;
@@ -6725,19 +6724,14 @@ export function messagesFeature(ctx) {
if (isImage || /\.(png|jpe?g|gif|webp|avif)(\?[^\s]*)?$/i.test(url)) {
const size = feedPaint ? feedMedia(url) : null;
if (feedPaint && !size) return h('a', { href: url, target: '_blank', rel: 'noopener noreferrer' }, label || url);
- // tap it to see it properly — a 320px-tall crop of someone's
- // photograph is a thumbnail, not the picture they posted
+ // tap it to see it full size (the feed shows it uncropped, but
+ // height-capped: see .note-img)
const known = size || mediaReady.get(url);
- // A tall picture (a phone screenshot, a 9:16 wallpaper) fitted inside
- // the 320px box was a skinny strip with the column empty beside it. It
- // gets a 3:4 frame as wide as the column allows instead, cropped to
- // fill it; a tap still opens the whole thing.
- const tall = !!(known && known.width && known.height / known.width > 4 / 3);
return h('img', {
- src: mediaSrc(url, known), class: 'note-img clickable' + (tall ? ' tall' : ''), loading: feedPaint || known ? 'eager' : 'lazy', alt: label || '',
+ src: mediaSrc(url, known), class: 'note-img clickable', loading: feedPaint || known ? 'eager' : 'lazy', alt: label || '',
decoding: known && known.thumb ? 'sync' : undefined, // a few-ms decode: paint it with the page
width: size?.width, height: size?.height,
- style: tall ? undefined : size ? 'height:auto;aspect-ratio:' + size.width + '/' + size.height : undefined,
+ style: size ? 'height:auto;aspect-ratio:' + size.width + '/' + size.height : undefined,
onClick: (e) => { if (!onPicture(e)) return; e.stopPropagation(); ctx.openImage && ctx.openImage(url); },
// a picture we were TOLD was a picture and which won't load leaves
// nothing behind — the alt text is already in the sentence above it