Craft 4: Separate filesystems for image uploads and image transforms

[jannisborgers]

I usually download all images from the production site to my local machine with scp or rsync when working on a site after longer periods of live editing. Downloads take a long time when image transforms are saved in the same folder the originals are saved in.

Since filesystems in Craft 4 allow separating the originally uploaded images from the transformed ones, I created two filesystems:

• images with url @web/images and path @webroot/uploads/images
• images_transformed with url @web/images and path @webroot/images_transformed

In the volume images, I assign the images filesystem and images_transformed filesystems accordingly.

Expectation

Both transformed (template) and untransformed (e.G. richtext) images share the domain.tld/images/… URL format. When setting up the site locally, I download only the /web/uploads folder from the production server and let Craft generate the transforms locally, saving bandwidth and time needed to download files from the server.

Result

The file systems only work when the base URL matches the base path. Is there a way to use different formats for the base URL and the base path? The current behavior is okay-ish, but clean, unnested URLs would be even better. Right now, when an editor places an untransformed image in a rich text field, the URL has to be domain.tld/uploads/images. The format domain.tld./images would be preferable.

[brandonkelly]

• images with url @web/images and path @webroot/uploads/images
• images_transformed with url @web/images and path @webroot/images_transformed

Not following. How can two separate source folders (@webroot/uploads/images and @webroot/images_transformed) share the same public URL (@web/images)?

[jannisborgers]

I assumed it would work, but realize it can't. 😅

[brandonkelly]

Yeah ok, to clarify, Craft doesn’t actually serve those files, your web server does. Technically I guess you could configure the web server to route requests to /images to either /uploads/images or /images_transformed depending on which folder actually contains the requested file. But that would probably be more trouble than it’s worth and make your site less portable.

[jannisborgers]

Hey Brandon. Thanks for explaining. When I migrated a couple of sites from 3 to 4 and saw the filesystem settings, I guess I thought Craft was doing some aliasing/routing behind the scenes to allow separating the actual path to the file from the URL to serve the file.

I realized this was two questions in one:

It would be helpful (in a "nice to have but totally not crucial" way) to be able to name the URL segment(s) different from the files inside the web directory. E. G. @web/images/abc.jpg resolves to web/transformed_images/abc.jpg. This would enhance the solution for separating transformed files from originals while maintaining a clean url for the transformed ones. Of course I could still achieve this by naming the folder for transformed images @web/images and using something else for the "original" images which should never be used on the site anyway because they could be any resolution. But this is probably OCD on my part if nothing else…

Regarding the same URL segment serving different filesystems, I think even if Craft did do something like that, once files with the same name exist in both folders, it would become complicated quickly. I'll stick to separate URLs for original and transformed images.

One thing to note is that with filesystems in Craft 4, separating them at all became possible. The rest is syntactic sugar.