Glide Image Manipulation Library integration with Textpattern

giz · 2021-03-31 20:07:07

I was hoping this would be ‘wonderfully easy’ and ‘straightforward’. How does one integrate a library like Glide in a Textpattern install?

After a bit of trial and error, I’ve managed to get Glide to spit out a resized image by using this bit of code at the top of pages/default.txp:

<txp:php>
require 'vendor/autoload.php';

use League\Flysystem\Adapter\Local;
use League\Flysystem\Filesystem;
use League\Glide\ServerFactory;

// Setup Glide server
$server = League\Glide\ServerFactory::create([
    'source' => 'images',
    'cache' => 'cache',
]);

// You could manually pass in the image path and manipulations options
$server->outputImage('1.jpg', ['w' => 300, 'h' => 400]);

// But, a better approach is to use information from the request
// $server->outputImage($path, $_GET); // attempting this generates errors
</txp:php>

While this ‘works’, everything else on the page is missing. If I place it lower down on the page I get a broken image symbol only.

How do you configure this thing so that a simple <img src="/images/1.jpg?w=300&h=400"> can be used in a Textpattern form?

Bloke · 2021-03-31 20:14:04

I wonder if using a custom Form type (set up in advanced prefs) would work here? You can specify the mime type, but that would only work for images of one type.

Alternatively, can you use the <txp:header> tag?

giz · 2021-04-01 16:36:54

Thanks for the pointers. I’ll report back…

giz · 2021-04-01 19:55:42

I found no change when using either <txp:header /> or custom form types, so tried another approach; calling the code directly: <img src="/routes.php">

That works normally in my templates. But when I attempt the next step in routes.php:

// You could manually pass in the image path and manipulations options
// $server->outputImage('1.jpg', ['w' => 300, 'h' => 400]);

// But, a better approach is to use information from the request
$server->outputImage($path, $_GET);

and use <img src="/routes.php?path=1.jpg&w=300&h=400"> I get a broken image (500 server error). I realise that my path string is wrong, but short of any examples in Glide’s documentation, I’m stuck. Am I missing something obvious here ?

Bloke · 2021-04-01 22:05:53

Routes in frameworks like Laravel (where most of these tools play) work in a proper MVC manner, so you set up a route beforehand and tell it how to handle that route in your controller to output content of a particular mime type or content type that your view then renders.

We don’t have that separation in quite the same way, although you can approach it either the way you have, by offloading image processing to a script, or by using Forms of a particular mime type and calling them from the URL with ?f=formname.

Presumably you’re instructing Glide to construct a source at /path/to/images? What happens if you manually pass the path in the URL request?

<img src="/routes.php?path=/images/1.jpg&w=300&h=400">

Does that make any difference, just to rule out any internal issues with the way they interpret paths?

giz · 2021-04-02 18:34:19

Thanks, Stef. I’ve tried a bunch of variations, including <img src="/routes.php?path=/images/1.jpg&w=300&h=400">, but Glide doesn’t understand my path variable and so chucks:

[03-Apr-2021 07:20:15 Pacific/Auckland] PHP Notice:  Undefined variable: path in /boo/Sites/all-grid/routes.php on line 23
[03-Apr-2021 07:20:15 Pacific/Auckland] PHP Fatal error:  Uncaught League\Glide\Filesystem\FileNotFoundException: Image path missing. in /boo/Sites/all-grid/vendor/league/glide/src/Server.php:178
Stack trace:
#0 /boo/Sites/all-grid/vendor/league/glide/src/Server.php(621): League\Glide\Server->getSourcePath('')
#1 /boo/Sites/all-grid/vendor/league/glide/src/Server.php(588): League\Glide\Server->makeImage(NULL, Array)
#2 /boo/Sites/all-grid/routes.php(23): League\Glide\Server->outputImage(NULL, Array)
#3 {main}
  thrown in /boo/Sites/all-grid/vendor/league/glide/src/Server.php on line 178

This prologue of a book on Calculus comes to mind when I read Glide’s documentation ;-)

giz · 2021-04-02 18:54:43

My plan is to use Glide/whatever as part of my all-grid Textpattern Theme (I want it to include robust image manipulation ‘in the box’).

My understanding of Glide is that once I have it included in my theme folder, and its plumbing hooked up using a form in my theme (with HTTP signatures for security), it should be set-and-forget…

Is this advisable or even feasible?

giz · 2021-04-06 17:55:33

Bump!

Bloke · 2021-04-07 16:34:48

I don’t have the minimum PHP requirements to try Glide out on my local dev setup yet – I’m still testing 5.6.0 with some features and PHP 8.0 isn’t built with GD or Imagick in MAMP, it seems (!) – so I haven’t had a chance to play with it, sorry.

You’d think it’d be easy to integrate, but I do know from my dealings so far with Intervention that they very much tie a lot of its functionality to Laravel and the way it handles MVC routes. So to wire it up to Txp might be a little circuitous. It took me a little bit of hackery to get Intervention playing nicely because it insisted on sending headers I didn’t want with some of the methods and URL constructs.

giz · 2021-04-07 17:53:06

Thanks, Stef. Its a bummer that ‘easy’ is always relative ;-)

I’m putting this into the ‘too hard’ basket.

jakob · 2021-04-07 20:59:27

Maybe this Dynamic image resizing via URI with Glide and Slim tutorial might help. It adds “slim” as a micro-framework to the mix to add the routing so that you can intercept a particular url pattern (they use /img/…) and pass that to glide. It’s a couple of years old so may not be up to date but it looks like slim is also PHP8 compatible). If you try it out, let us know how you get on.

Textpattern CMS

Textpattern CMS support forum

#1 2021-03-31 20:07:07

Glide Image Manipulation Library integration with Textpattern

#2 2021-03-31 20:14:04

Re: Glide Image Manipulation Library integration with Textpattern

#3 2021-04-01 16:36:54

Re: Glide Image Manipulation Library integration with Textpattern

#4 2021-04-01 19:55:42

Re: Glide Image Manipulation Library integration with Textpattern

#5 2021-04-01 22:05:53

Re: Glide Image Manipulation Library integration with Textpattern

#6 2021-04-02 18:34:19

Re: Glide Image Manipulation Library integration with Textpattern

#7 2021-04-02 18:54:43

Re: Glide Image Manipulation Library integration with Textpattern

#8 2021-04-06 17:55:33

Re: Glide Image Manipulation Library integration with Textpattern

#9 2021-04-07 16:34:48

Re: Glide Image Manipulation Library integration with Textpattern

#10 2021-04-07 17:53:06

Re: Glide Image Manipulation Library integration with Textpattern

#11 2021-04-07 20:59:27

Re: Glide Image Manipulation Library integration with Textpattern

Board footer