Home

Image Resizing

21/12/2023

I have been working on my image processing functionality. It's taken a while, and a few stressful moments, but the system now handles image uploads correctly.

Images can be uploaded to the sources/images destination in S3. When that happens, a lambda function is called to generate different versions of the image according to the resolutions defined in the project cantilever.yaml file.

For each resolution, a new image is saved in /sources/generated/images/::name::/resolution - e.g a picture called "my-photo.jpg" and two image resolution definitions of "square-100x100" and "tall-100x200" will be saved to files sources/generated/images/my-photo/square.jpg and sources/generated/images/my-photo/tall.jpg.

My next step will be to add these images to metadata.json (or possibly a separateimages.json file). Logically, it goes in metadata, as a new ContentNode object. But I somehow I feel images should be separate.

Previewing Images

For my editing environment, I want to be able to display a grid of all the images available. The images are uploaded to the source bucket, and resized versions are put into the /generated/images folder in the source bucket. But they are not available in the editor bucket, so I cannot just use a standard HTML img tag to render the image or thumbnail.

I'll need to write an API to fetch the image blobs from the source bucket. I'll make it async; it will be a good learning exercise if nothing else!

Prev: Adding Images Next: Image Testing