Implement image optimization with thumbnails and WebP#168
Merged
Conversation
- Added `Pillow` and `python-magic` for secure image processing. - Installed `libmagic1` system dependency in `backend/Dockerfile`. - Created `ImageProcessingService` to validate, sanitize (strip EXIF), and generate optimized WebP variants (Medium, Thumbnail). - Updated `R2StorageService` to handle uploading sets of image variants. - Updated `R2StorageService` to generate signed URLs with `Content-Disposition: attachment` for downloads. - Updated `DiveSite` and `Dive` routers to integrate image processing and expose `download_url`. - Added `medium_url` and `thumbnail_url` columns to media tables via Alembic migration `0062`. - Updated Frontend (`DiveSites.js`, `DiveSiteDetail.js`) to use optimized thumbnails, lazy loading, and added a Download button to the Lightbox. - Fixed Frontend (`EditDiveSite.js`, `EditDive.js`, `CreateDive.js`) to correctly save `medium_url` and `thumbnail_url` and provide granular "Uploading..." feedback during submission. - Improved frontend error handling to show detailed error messages (e.g. 413 File Too Large) during upload. - Added `backend/scripts/generate_thumbnails.py` for backfilling existing media. - Updated Nginx configuration (`dev.conf`, `prod.conf`) to allow 20MB uploads and return JSON errors for 413. - Documented the architecture and implementation status in `docs/development/work/image_optimization_plan.md`.
kargig
force-pushed
the
feature/image_thumbnails
branch
from
487c2ac to
a065922
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Pillowandpython-magicfor secure image processing.libmagic1system dependency inbackend/Dockerfile.ImageProcessingServiceto validate, sanitize (strip EXIF), and generate optimized WebP variants (Medium, Thumbnail).R2StorageServiceto handle uploading sets of image variants.R2StorageServiceto generate signed URLs withContent-Disposition: attachmentfor downloads.DiveSiteandDiverouters to integrate image processing and exposedownload_url.medium_urlandthumbnail_urlcolumns to media tables via Alembic migration0062.DiveSites.js,DiveSiteDetail.js) to use optimized thumbnails, lazy loading, and added a Download button to the Lightbox.EditDiveSite.js,EditDive.js,CreateDive.js) to correctly savemedium_urlandthumbnail_urland provide granular "Uploading..." feedback during submission.backend/scripts/generate_thumbnails.pyfor backfilling existing media.dev.conf,prod.conf) to allow 10MB uploads and return JSON errors for 413.docs/development/work/image_optimization_plan.md.