grain.social is a photo sharing platform built on atproto.
grain.social
atproto
photography
appview
fix: center images in carousel when landscape ratios differ significantly
Generalize the portrait centering logic to also handle mixed landscape
aspect ratios (e.g. tall 3:2 alongside wide panoramic). Images are now
vertically centered when the ratio spread exceeds 1.3x.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
+9
-4
+9
-4
app/lib/components/molecules/GalleryCard.svelte
+9
-4
app/lib/components/molecules/GalleryCard.svelte
···
75
75
}
76
76
77
77
const hasPortrait = $derived(photos.some((p) => photoRatio(p) < 1))
78
+
const ratios = $derived(photos.map(photoRatio))
79
+
const hasMixedRatios = $derived(
80
+
photos.length > 1 && ratios.length > 0 && Math.max(...ratios) / Math.min(...ratios) > 1.3
81
+
)
82
+
const needsFixedHeight = $derived(hasPortrait || hasMixedRatios)
78
83
const minRatio = $derived(
79
-
photos.length > 0 ? Math.max(Math.min(...photos.map(photoRatio)), 0.56) : 1
84
+
photos.length > 0 ? Math.max(Math.min(...ratios), hasPortrait ? 0.56 : Math.min(...ratios)) : 1
80
85
)
81
86
82
87
const labelDefs = createQuery(() => labelDefsQuery())
···
193
198
bind:this={carouselEl}
194
199
onscroll={onScroll}
195
200
ondblclick={() => { doFavorite?.(); showHeartAnim = true; setTimeout(() => (showHeartAnim = false), 800) }}
196
-
style={hasPortrait ? `aspect-ratio: ${minRatio};` : ''}
201
+
style={needsFixedHeight ? `aspect-ratio: ${minRatio};` : ''}
197
202
>
198
203
{#each photos as photo, i}
199
-
<div class="slide" class:centered={hasPortrait}>
204
+
<div class="slide" class:centered={needsFixedHeight}>
200
205
<div class="grain-image">
201
-
<svg class="spacer" viewBox="0 0 1 {1 / Math.max(photoRatio(photo), hasPortrait ? minRatio : photoRatio(photo))}"></svg>
206
+
<svg class="spacer" viewBox="0 0 1 {1 / Math.max(photoRatio(photo), needsFixedHeight ? minRatio : photoRatio(photo))}"></svg>
202
207
<img
203
208
src={Math.abs(i - currentIndex) <= 1 ? (isDesktop ? photo.fullsize : photo.thumb) : ''}
204
209
alt={photo.alt ?? ''}