Best approach to implementing static asset middleware plugin?

[caseyohara]

Hi! Experienced Ruby dev but Bridgetown noob here. I've read all of the docs and a lot of the bridgetown-core source code so I am somewhat familiar with all of the moving parts, but I could use some help pointing me in the right direction with my problem.

I'm building a photo blog and I'm currently storing my photos in src/images.

Ideally what I want to build is a plugin that acts as "middleware" for my static images and performs some transformations before writing to output, for example:

1. Strip EXIF data
2. Hash the filename (or otherwise anonymize it in a deterministic way)
3. Prepare multiple size variants

Let's I have an image:

src/images/IMG_1234.JPG

The plugin would write multiple images to the output dir:

output/images/a4b0232c7c9786e1465cadbeca906001-original.JPG
output/images/a4b0232c7c9786e1465cadbeca906001-large.JPG
output/images/a4b0232c7c9786e1465cadbeca906001-medium.JPG
output/images/a4b0232c7c9786e1465cadbeca906001-small.JPG

What is the best way to approach writing a plugin like this? I am very experienced with Ruby and working with images, but I'm new to Bridgetown so I'm unsure the best way to tap into the build process to manipulate static assets like this.

Are there any existing plugins that do something similar that I could look at for inspiration?

Any advice you have would be greatly appreciated.

Thanks!

[ayushn21]

Hey @caseyohara,

I don't know if there are any existing plugins that do what you're after. The cloudinary plugin (https://github.com/bridgetownrb/bridgetown-cloudinary) helps you integrate Cloudinary with Bridgetown which can do transformations and the like, I'm not sure, I've never used it.

To your actual question, I'd firstly recommend against storing your images in the Git repo itself. It can cause the repo size to really balloon. I have a photo gallery website powered by Bridgetown (https://fslash42.com). I do store the photos in the project, but they're in a gitignored folder. I have a rake task which syncs this folder to an S3 bucket which has a CloudFront distribution in front of it. I'd recommend doing something similar.

If you're keen on storing your images in the repo anyway, I'd recommend storing them in a folder prefixed with a _, for eg: _photographs. This way they are not output by default. You can then operate on them in a build hook:

# plugins/builders/photos_builder.rb

class Builders::AlbumsBuilder < SiteBuilder
  def build
    hook :site, : pre_read do |site|
      # Transform your images here and write them to a folder in the project which will be output, eg: `photographs`
    end
  end

You might need to experiment with different hooks to see which one works for you: https://www.bridgetownrb.com/docs/plugins/hooks#complete-list-of-hooks. Also you probably don't want to do this on every single build so you'd need a way to optimise/cache this work.

Without knowing more specifics it's hard to advise. Feel free to ask further questions if you'd like, I'm happy to help!

I'm also happy to share my photo gallery website's source with you (privately) if you like.

[caseyohara]

@ayushn21 Thanks for your response, this is very helpful. I wasn't thrilled about keeping the images in the git repo because big binary files bloat the repo terribly, like you mentioned.

I quite like your idea of having a Rake task to sync the images up to S3. I'll be deploying the site there anyway so that will work out nicely.

I'll update this discussion later with my solution in case anyone else comes across it in the future.

BTW I like your site and photo style! It's very similar to mine. I shoot with a X100V too, and also a X-T4. I love Fujifilm cameras.

[ayushn21]

I'll update this discussion later with my solution in case anyone else comes across it in the future.

That'd be great, thanks! If you need any further help with anything just let me know :)

BTW I like your site and photo style! It's very similar to mine. I shoot with a X100V too, and also a X-T4. I love Fujifilm cameras

Thanks!! 🙌 ... yeah Fuji cameras are awesome, I adore my X100V ... so much power and it fits in my pocket!