fix: use photo dimensions for mosaic aspect ratios (#146)
Thumbnails are generated as 300x300 squares, so CSS Columns alone couldn't show varied aspect ratios. Now using the photo's width/height metadata with CSS aspect-ratio property to force correct proportions.
This commit is contained in:
@@ -55,11 +55,17 @@ const MosaicPhoto: React.FC<MosaicPhotoProps> = ({
|
|||||||
const [likedLocal, setLikedLocal] = React.useState(false);
|
const [likedLocal, setLikedLocal] = React.useState(false);
|
||||||
const canComment = Boolean(feedbackEnabled && feedbackOptions?.allowComments && onQuickComment);
|
const canComment = Boolean(feedbackEnabled && feedbackOptions?.allowComments && onQuickComment);
|
||||||
|
|
||||||
|
// Calculate aspect ratio from photo dimensions (fallback to 1 if unknown)
|
||||||
|
const aspectRatio = (photo.width && photo.height) ? photo.width / photo.height : 1;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div
|
<div
|
||||||
className="photo-card relative group cursor-pointer overflow-hidden rounded-lg bg-neutral-100 mb-2"
|
className="photo-card relative group cursor-pointer overflow-hidden rounded-lg bg-neutral-100 mb-2"
|
||||||
style={{ breakInside: 'avoid' }}
|
style={{
|
||||||
|
breakInside: 'avoid',
|
||||||
|
aspectRatio: aspectRatio.toString()
|
||||||
|
}}
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
onClick(e);
|
onClick(e);
|
||||||
@@ -68,7 +74,7 @@ const MosaicPhoto: React.FC<MosaicPhotoProps> = ({
|
|||||||
<AuthenticatedImage
|
<AuthenticatedImage
|
||||||
src={photo.thumbnail_url || photo.url}
|
src={photo.thumbnail_url || photo.url}
|
||||||
alt={photo.filename}
|
alt={photo.filename}
|
||||||
className="w-full h-auto object-cover transition-transform duration-300 group-hover:scale-105"
|
className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
isGallery={true}
|
isGallery={true}
|
||||||
protectFromDownload={!allowDownloads}
|
protectFromDownload={!allowDownloads}
|
||||||
|
|||||||
Reference in New Issue
Block a user