Imager + fortrabbit Object Storage

After working with Imager in a fortrabbit-hosted Craft 3 project, I published a storage driver that André claimed would be easy to write. (It was.) The Imager Storage Driver for fortrabbit Object Storage makes it possible to store Imager’s transforms in fortrabbit’s Object Storage Volumes, which you’ll want to do if you’re working with fortrabbit’s Pro Stack. (Imager’s aws driver doesn’t work because fortrabbit’s endpoints are different.)

If you have an app running on the Pro Stack—not the Univeral Stack, which uses something different called Web Storage—you can use Imager for your transforms and have access to all kinds of magic. Here’s how to get those transforms stored on fortrabbit’s Object Storage.

What you need:

a site built with Craft CMS 3+
Imager 2+
fortrabbit Pro Stack with Object Storage

1. Install the Imager plugin if you haven’t already.

composer require aelvan/imager

Require the Imager from your project directory, then install from Settings → Plugins in the Craft control panel or via ./craft install/plugin imager.

2. Install the Imager fortrabbit Object Storage driver.

composer require workingconcept/imager-fortrabbit-object-storage-driver

Again install via Settings → Plugins in the Control panel or ./craft install plugin imager-fortrabbit-object-storage-driver.

3. Configure the driver for your site.

If you don’t already have Imager creating transforms in your templates, pick an Asset somewhere and set up a test:

{# get an Asset or URL #}
{% set resizedImage = craft.imager.transformImage(imageAsset, { width: 500 }) %}
<img src="{{ resizedImage.url }}" alt="test"/>

You should get a nicely-resized image, because Imager will store its transforms in web/imager by default. Next we’ll have it store those transforms with fortrabbit Object Storage instead of local storage.

Create config/imager.php if you don’t already have it. There are loads of available settings, so while you should season to taste we’ll focus only on transforms here. If you configured your site using environment variables like fortrabbit suggests and want transforms stored in a folder called “transforms,” this should almost work right out of the gate:

<?php

return [
    'storageConfig' => [
        'fortrabbit' => [
            'accessKey' => getenv('OBJECT_STORAGE_KEY'),
            'secretAccessKey' => getenv('OBJECT_STORAGE_SECRET'),
            'endpoint' => 'https://' . getenv('OBJECT_STORAGE_SERVER'),
            'region' => getenv('OBJECT_STORAGE_REGION'),
            'bucket' => getenv('OBJECT_STORAGE_BUCKET'),
            'folder' => 'transforms',
            'requestHeaders' => [],
        ]
    ],
    'storages' => ['fortrabbit'],
    'imagerUrl' => getenv('IMAGER_URL'),
];

You’ll need to add an IMAGER_URL environment variable set to your public, absolute Object Storage URL. That’ll look something like https://my-app.objects.frb.io/. The entire .env would look something like this, where my-app is a placeholder for your actual app handle:

OBJECT_STORAGE_BUCKET=my-app
OBJECT_STORAGE_HOST=my-app.objects.frb.io
OBJECT_STORAGE_KEY=my-app
OBJECT_STORAGE_REGION=us-east-1
OBJECT_STORAGE_SECRET=••••••••••••••••••••••••••
OBJECT_STORAGE_SERVER=objects.us1.frbit.com
IMAGER_URL=https://my-app.objects.frb.io/transforms/

You could also just hardcode that URL into config/imager.php if you wanted to, but what fun is that?

'imagerUrl' => 'https://my-app.objects.frb.io/transforms/'

4. Make sure it works!

Clear out Imager’s transform caches and refresh your test page. You should see your new transforms being stored to and served from fortrabbit’s Object Storage.

Leave a comment or open an issue on GitHub if you run into any trouble, and otherwise enjoy those fortrabbit-stored transforms!