[ENH] Image Resizing and Manipulation with Query String

[mdmontesinos]

Oqtane Info

Version - 5.2.3
Render Mode - Static
Interactivity - Server
Database - SQL Server

Describe the enhancement

Similar to how images can be resized and manipulated with the File API endpoint by id and route parameters (i.e):

api/file/image/1010/1500/1500/crop/center/transparent/0/false

It would interesting for some use cases when the id is not available to be able to achieve the same, retrieving the image by its path and with a query string. This is the way most libraries and websites I've seen work:

files/folder/subfolder/myImage.jpg?w=1500&h=1500&mode=crop&position=center&background=transparent&rotate=0&recreate=false

This should be updated in the GET action in the Files Page. Also, the generated image should be cachable with the ETAG, or another mechanism, to avoid regenerating it multiple times and reducing CPU and memory consumption.

Anything else?

[tvatavuk]

We've been using an Imageflow-based extension for Oqtane in our 2sxc module to handle image resizing and manipulation via query strings. Imageflow is an outstanding solution—it's extremely optimized, super fast, and packed with features.

The extension can also be installed as a standalone module in Oqtane, making it versatile for various use cases.

Here are some resources you might find helpful:

• Imageflow Query String API Documentation
• 2sic's Oqtane Imageflow Extension on GitHub
• 2sic's Oqtane Imageflow Module

[mdmontesinos]

@tvatavuk Thanks for the info about the Imageflow-based Oqtane module! Is it free for commercial use or do I need to purchase an imageflow license? Is it compatible with Oqtane > 5? (the last commit was on May)

Also, I still believe there should be an in-framework solution, as Oqtane already bundles with SixLabors.ImageSharp and provides the functionality, just in a different format. In this way, there's no need for extra dependencies or modules.

Although it seems that imageflow is more optimized and provides cache systems out of the box.

[tvatavuk]

If you're able to comply with the terms of the AGPLv3, then you can use Imageflow for free, including for commercial use.

Imageflow is 100% Open Source Software. You can use it freely under the terms of the AGPLv3. AGPLv3 requires that if you distribute the software (including making it available as a service), you must also make the complete source code of your application publicly available under an AGPLv3-compatible license. They also offer commercial licenses if you do not wish to use the AGPLv3.

It works with the latest Oqtane (as it did with previous versions). We are heavily using it in 2sxc all the time, and it is part of the 2sxc installation.

[mdmontesinos]

@sbwalker I've seen that SixLabors.ImageSharp has another package called ImageSharp.Web that provides the middleware to allow processing and caching image requests with a query string. As Oqtane already includes the base ImageSharp package, does its license also allow including this middleware package?

[sbwalker]

@mdmontesinos please describe a scenario where the FileId is not available

[mdmontesinos]

@sbwalker Firstly, using the full path instead of the Id improves the readability of the url (similar to using a url slug instead of a numerical id for a blog post or news article), although that's not critical.

However, the specific use case I've encountered is when migrating content from other CMS. For example, a table with news articles that includes a column with the image url from their file management system (i.e. /myfiles/news/oqtane.jpg). To migrate it, I've designed a script that goes through all the records, stores the original url in a text file and rewrites it to match my file system (i.e. /images/oqtane.jpg). After that, I downloaded all the images from "/myfiles/news" as a zip, uploaded it to the Oqtane folder "/images" and used the new unzip functionality.

In this way, all original image files are migrated to the Oqtane file system and the urls in the database and rewritten to accomodate this. However, by using the process of uploading the images through the unzip functionality, I don't get the FileId of each of them.

[sbwalker]

I think its a good suggestion to incorporate this functionality into the existing "files/" page, as that file server already supports mapping the path to a folder, eTags, etc....

[sbwalker]

the other benefit of having this integrated in the framework is that Oqtane is able to automatically cleanup the resized images when a file is deleted or moved to a different folder

[mdmontesinos]

the other benefit of having this integrated in the framework is that Oqtane is able to automatically cleanup the resized images when a file is deleted or moved to a different folder

Then, I assume that the resized/manipulated images would be cached into disk and there would be a mechanism to recover them if the same query is received, right?

And perhaps an expiration mechanism should also be set into place, as a maliciuous user could generate thousands of variations to saturate the disk capacity.

(or integrating ImageSharp.Web if that's a possibility)

[sbwalker]

"And perhaps an expiration mechanism should also be set into place, as a maliciuous user could generate thousands of variations to saturate the disk capacity."

This is already supported in Oqtane. You must configure the Folder to indicate the image sizes supported when resizing. By default Folders do not support resizing (to prevent the issue you described above).

The existing image generator also adheres to the Capacity limit for the folder (if specified).

[sbwalker]

I would prefer to avoid third party dependencies in Oqtane. But please feel free to use ImageSharp.Web in your own custom solution if it meets your needs.

[mdmontesinos]

I also prefer avoiding any extra dependencies (to reduce server load), that's why I was suggesting having an in-framework solution using the already included ImageSharp library.

This is already supported in Oqtane. You must configure the Folder to indicate the image sizes supported when resizing. By default Folders do not support resizing (to prevent the issue you described above).

Do you mean when using the api/file/image endpoint? Does it automatically generate the image sizes or it prevents me from calling the endpoint with a different size than the ones allowed?

[sbwalker]

If you do not enter specific image sizes or a wildcard ( * ) for the Folder where the File resides, then the existing api/file/image endpoint prevents you from generating any images. This protects the system from the vulnerability you outlined above. And if you do provide specific image sizes or a wildcard ( * ) for a Folder, images are never auto generated - they are always initially generated based on a request and they will only be generated if the parameters match the size criteria for the folder.