Add Picture Grid layout type for custom sections

[vincentmakes]

Summary

Introduces a new "Picture Grid" layout type for custom sections, allowing users to upload and display images in a responsive 3-column grid with optional captions.

Key Changes

Frontend (Admin & Public)

• New layout type: Added picture-grid to the layout types array with custom SVG icon
• Admin rendering: Implemented renderPictureGridLayout() to display images in a 3-column grid with optional captions in the admin interface
• Public rendering: Implemented renderPictureGridPublic() to display only visible items with images on the public view
• Item management:
  • Added picture upload modal with file preview (200x200px preview area)
  • Implemented previewPictureGridImage() and removePictureGridImage() helpers for client-side image handling
  • Added thumbnail display in the admin items list for picture-grid sections
  • Updated validation to require image selection for new picture-grid items
• Styling: Added comprehensive CSS for picture grid layout with responsive design (3 columns on desktop, 2 on tablet, 1 on mobile) and print-friendly styles
• Internationalization: Added 12 new translation keys across 8 languages (en, de, es, fr, it, nl, pt, zh) for picture-related UI elements

Backend

• API endpoint: Added POST /api/custom-sections/:id/items/:itemId/picture for image uploads using multer with 5MB file size limit and JPEG/PNG/WebP validation
• File management:
  • Automatic filename generation with timestamp (cs_${sectionId}_${itemId}_${timestamp}${ext})
  • Old image deletion on new upload
  • Cleanup of all section images when section is deleted
  • Cleanup of item image when item is deleted
• Database: Leverages existing image column in custom_section_items table

Version & Documentation

• Updated version to 1.14.0
• Added changelog entry documenting the new feature

Implementation Details

• Images are stored in the /uploads directory with automatic cleanup on deletion
• File uploads are handled separately from item metadata (title/caption) to support partial updates
• Picture grid items require an image but caption is optional
• Client-side state management uses pendingPictureGridFile and pictureGridRemoved flags to track changes
• Images are displayed with aspect-ratio: 1 for consistent square thumbnails
• Responsive grid adjusts from 3 columns (desktop) → 2 columns (tablet) → 1 column (mobile)

https://claude.ai/code/session_01AD2TdNL3RDp5ynSrJr2tpN