diff --git a/CHANGELOG.md b/CHANGELOG.md index 1b2a3f2f8..f7f2904ec 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Posts: move instance favicon beside username instead of post timestamp. - Posts: changed the behavior of content warnings. CWs and sensitive media are unified into one design. - Posts: redesigned interaction counters to use text instead of icons. +- Posts: letterbox images taller than 1:1. - Profile: overhauled user profiles to be consistent with the rest of the UI. - Composer: move emoji button alongside other composer buttons, add numerical counter. - Birthdays: move today's birthdays out of notifications into right sidebar. diff --git a/app/soapbox/components/media-gallery.tsx b/app/soapbox/components/media-gallery.tsx index cd7cd2605..722f5540a 100644 --- a/app/soapbox/components/media-gallery.tsx +++ b/app/soapbox/components/media-gallery.tsx @@ -294,7 +294,7 @@ const MediaGallery: React.FC = (props) => { const aspectRatio = media.getIn([0, 'meta', 'original', 'aspect']) as number | undefined; const getHeight = () => { - if (!aspectRatio) return w * 9 / 16; + if (!aspectRatio) return w; if (isPanoramic(aspectRatio)) return Math.floor(w / maximumAspectRatio); if (isPortrait(aspectRatio)) return Math.floor(w / minimumAspectRatio); return Math.floor(w / aspectRatio); diff --git a/app/soapbox/features/placeholder/components/placeholder-media-gallery.tsx b/app/soapbox/features/placeholder/components/placeholder-media-gallery.tsx index 3eab10e4d..b30940478 100644 --- a/app/soapbox/features/placeholder/components/placeholder-media-gallery.tsx +++ b/app/soapbox/features/placeholder/components/placeholder-media-gallery.tsx @@ -29,7 +29,7 @@ const PlaceholderMediaGallery: React.FC = ({ media, de let itemsDimensions: Record[] = []; if (size === 1) { - style.height = width! * 9 / 16; + style.height = width; itemsDimensions = [ { w: '100%', h: '100%' }, diff --git a/app/soapbox/features/status/components/card.tsx b/app/soapbox/features/status/components/card.tsx index 18dd427a5..c19191f85 100644 --- a/app/soapbox/features/status/components/card.tsx +++ b/app/soapbox/features/status/components/card.tsx @@ -111,7 +111,7 @@ const Card: React.FC = ({ // Constrain to a sane limit // https://en.wikipedia.org/wiki/Aspect_ratio_(image) - return Math.min(Math.max(9 / 16, ratio), 4); + return Math.min(Math.max(1, ratio), 4); }; const interactive = card.type !== 'link'; diff --git a/app/soapbox/utils/media-aspect-ratio.ts b/app/soapbox/utils/media-aspect-ratio.ts index 8821d9deb..781a22fd5 100644 --- a/app/soapbox/utils/media-aspect-ratio.ts +++ b/app/soapbox/utils/media-aspect-ratio.ts @@ -1,4 +1,4 @@ -export const minimumAspectRatio = 9 / 16; // Portrait phone +export const minimumAspectRatio = 1; // Square export const maximumAspectRatio = 10; // Generous min-height export const isPanoramic = (ar: number) => {