Headless mode & image transforms

[goellner]

A big thing would be if image transform urls can be requested with focal points and glide options.

It would be good if the response times don't get slower, when a lot of images are present in an entry. For srcset there can be up to 10 images (most of the times 3 image urls) for one asset in the json response. With many other image transform solutions implemented in other CMS this slows down the response time of, since the images have to be generated before the final image url can be output.

When using an external image provider the only thing needed is the raw asset path stored in the entries yaml file. e.g.: images/second-folder/third-folder/image-name.jpg.

Maybe some sort of global settings would be good, to configure the returned values of images would be good to switch between untransformed images (direct path to asset), glide transformed images (glide generated url) and external image provider (raw path from yaml) would be awesome.

[jasonvarga]

By default, Glide only generates the image when you request the image's URL.

Asset fields only ever give you the path, and you would manually provide it to a Glide tag.

Maybe I'm missing something though?

[goellner]

If we render the fronted with Vue or React we can't really use the glide tags, thats why we need final image URLs in the response.

[martink635]

@goellner I solved this by doing

use Statamic\Facades\Image;

...

$image = "assets/" . $this->resource->data()->get('cover');
$fullUrl = url(Image::manipulate($image, ['w' => 256, 'h' => 256]));

where cover is the field name and assets is the missing part of the path for my asset container. Hope it helps.

[goellner]

That certainly helps and I did basically the same with v2 already. I thought that this could be an option in the api settings, how asset url are getting returned. Some may need a custom prefix or multiple sizes to use with srcset.

Now that I think about it, maybe there is a better way:

A built in service, where one could supply the image path and url parameters from the frontend. Sort of the way Imgix handles the transforms.

e.g.:

https://statamic.dev/glide/path/to/image?w=200&h=600&focus=20-30

[martink635]

You can already pass them via a custom API endpoint and build images on the fly as the client of the API needs it. The problem is if you have to set the 'secure' parameter to false. But like it says in the comments of this option, you are then open to mass image resize attacks :)

[martink635]

I am having an issue if I use this, together with asset caching, the urls don't work anymore. If I don't use cacheing glide generates images on every page load which is kinda dumb and super slow.

Any ideas perhaps?