• Dynamic image resizing via URI with Glide and Slim
  • Introduction to Glide
  • Install Slim
  • Install Glide Slim
  • Implement resizing code
  • The end

#Dynamic image resizing via URI with Glide and Slim

If you have ever used WordPress.com backend. You will notice its image resizing works by appending a dimension string at the end of the URL.

In this tutorial, we will show you how to do that for your own project. At the end of this tutorial, you will have an image resizing server that is able to give you specific dimension upon request. For example, you want the image with the dimensions of 200x300, all you need to do is request it via a URL and append the dimension at the end. For example http://www.your-image-server/myphoto.jpg?w=200&h=300. That is pretty neat!

#Introduction to Glide

The library we are using in this tutorial is called Glide.It is an easy on-demand image manipulation library with an HTTP based API.

Even though we are going to use Glide with Slim in this tutorial. It is worth mentioning that Glide is a framework agnostic library. Which means it is perfectly fine to use it in any PHP projects.

Glide's API is very easy to use and it provides a comprehensive documentation online. Do check it out after this tutorial if you wish to use it with other frameworks or your standalone application.

As mentioned earlier, we are going to use Slim in this tutorial. The reason is that we want to provide a user with an elegant and clean way to access the image The request URI should look like http://www.your-image-server/img/myphoto.jpg?w=200. Which means we probably need a router to analyse the request. While a full blown framework will definitely provide a router,but it is overkilled. Slim happens to be a good fit as a micro-framework.

#Install Slim

Installing Slim is extremely easy with the power of Composer

Let's get it installed now.

composer create-project slim/slim-skeleton image-server

This command will install a skeleton Slim site under the folder image-server. At the time of writing this tutorial, Slim version 3.7.0 is installed by default.

Now navigate to folder image-server, and run the command below, it will serve the installed Slim with PHP built-in server.

php -S 0.0.0.0:8080 -t public public/index.php

Now open your default browser and hit the URL 0.0.0.0:8080 . If you see a nice Slim welcome page, it means you have done installing Slim.

#Install Glide Slim

Every framework hands HTTP responses different ways. To integrate Glide with Slim, we need to make sure the image response is handled in Slim's way. However Glide provides Slim support the out of box, this saves us a lot of hassle.

We still need to pull in another package though as Slim support is out of the core package. We can do that again using Composer.

composer require league/glide-slim

#Implement resizing code

We have installed all the packages we need and have our application running on PHP built-in server.It is time to implement our actual code. In fact, the code we are going to implement is very minimum thanks to the great package design.

Open file src/routes.php. And create an additional routing rule as shown below:

$app->get('/img[/{params:.*}]', function (Request $request, Response $response, $args) {
 
    $server = ServerFactory::create([
        'source' => 'public/source',
        'cache' => 'public/cache',
        'response' => new SlimResponseFactory(),
    ]);
 
    return $server->getImageResponse($request->getAttribute('params'), $request->getQueryParams());
 
});

This routing rule intercepts request to URI started with img. For example:

• http://0.0.0.0:8080/index.php/img/myphoto.jpg?w=100
• http://0.0.0.0:8080/index.php/img/yourphoto.jpg?h=100

Now let's take a look at the code block below:

$server = ServerFactory::create([
    'source' => 'public/source',
    'cache' => 'public/cache',
    'response' => new SlimResponseFactory(),
]);

The code block tells Glide server to look for images under the folder public/source specified by source parameter and store image cache under the folder public/cache specified by cache parameter.

Move on to the last piece of code:

return $server->getImageResponse($request->getAttribute('params'), $request->getQueryParams());

• Code $request->getAttribute('params'): it gives us rest part of the URL after img besides query parameters($_GET).
• Code $request->getQueryParams(): it gives us query parameters($_GET).

Now we need to allocate some images to the source folder to test out. So manually copy some image files to public/source folder. For example, we have:

image-server/public/source/programmer.jpb

Now we are ready to test out our on-demand image resizing server.

Hit the browser with the URI http://0.0.0.0:8080/index.php/img/programmer.jpg?w=100, you should see our image is resized to 100px in width.

We can actually do a lot of other image manipulation besides resizing. You can find out what you can do here.

#The end

Hopefully this simple tutorial helped you with your development. If you like our post, please follow us on Twitter and help spread the word. We need your support to continue. If you have questions or find our mistakes in above tutorial, do leave a comment below to let us know.