Merge pull request #182 from the-luap/feat/new-features

fix: restore aspect-ratio layouts and improve hero image quality (#180)

frontend/src/components/gallery/HeroHeader.tsx

@@ -137,8 +137,8 @@ export const HeroHeader: React.FC<HeroHeaderProps> = ({
       {/* Hero Section */}
       <div className="relative h-[60vh] sm:h-[70vh] lg:h-[80vh] max-h-[700px] -mx-4 sm:-mx-6 lg:-mx-8 mb-8">
         <AuthenticatedImage
-          src={heroPhoto.url}
-          fallbackSrc={heroPhoto.thumbnail_url || undefined}
+          src={heroPhoto.hero_url || heroPhoto.url}
+          fallbackSrc={heroPhoto.url}
           alt={heroPhoto.filename}
           className="w-full h-full object-cover"
           style={{ objectPosition: heroImageAnchor }}

frontend/src/components/gallery/layouts/MasonryGalleryLayout.tsx

@@ -62,10 +62,11 @@ const MasonryPhoto: React.FC<MasonryPhotoProps> = ({
     const aspectRatio = photoWidth / photoHeight;
 
     // Calculate height based on column width and aspect ratio
-    // Clamp to reasonable min/max heights for visual consistency
+    // Use dynamic constraints based on column width to preserve aspect ratio variation
+    // This allows panoramic images to be short and tall portraits to be tall
     const calculatedHeight = columnWidth / aspectRatio;
-    const minHeight = 150;
-    const maxHeight = 500;
+    const minHeight = Math.max(80, columnWidth * 0.25); // Allow wide panoramics (4:1)
+    const maxHeight = columnWidth * 2.5; // Allow tall portraits (1:2.5)
 
     return Math.max(minHeight, Math.min(maxHeight, calculatedHeight));
   }, [photo.width, photo.height, columnWidth]);
@@ -361,11 +362,13 @@ export const MasonryGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
       // Add photo to shortest column
       cols[shortestCol].push(photo);
 
-      // Estimate height based on aspect ratio
+      // Estimate height based on aspect ratio (using same constraints as MasonryPhoto)
       const photoWidth = photo.width || 800;
       const photoHeight = photo.height || 600;
       const aspectRatio = photoWidth / photoHeight;
-      const estimatedHeight = Math.max(150, Math.min(500, approxColWidth / aspectRatio));
+      const minHeightConstraint = Math.max(80, approxColWidth * 0.25);
+      const maxHeightConstraint = approxColWidth * 2.5;
+      const estimatedHeight = Math.max(minHeightConstraint, Math.min(maxHeightConstraint, approxColWidth / aspectRatio));
       colHeights[shortestCol] += estimatedHeight + gutter;
     });
 

frontend/src/types/index.ts

@@ -71,6 +71,7 @@ export interface Photo {
   filename: string;
   url: string;
   thumbnail_url?: string;
+  hero_url?: string; // Hero-optimized image URL (1920x1080) for full-width hero sections
   secure_url_template?: string;
   download_url_template?: string;
   requires_token?: boolean;