Serve images/assests using Slim framework

Question

I need to serve images which are common in multiple modules, to the resources folder us outside of public folder. I am using Slim Framework.

app/-
    -Classes/
    -vendor/
    -Resources/-
               - Images/
    -Admin/-
           - Styles/
           - Scripts
           - index.php
           - init.php
    -Public/-
            - Styles/
            - Scripts
            - index.php
            - init.php

Currently I have created a subdomain static.pro1.local/ to serve local images. But now I am in search for some other way.

On slim I am trying to make a route to dynamically create and serve images as required

$app->get('/assets/:height/:width/:id/:type', function() use ($app) {
    header('Content-type: image/jpeg');
    $dir = dirname(__DIR__)."/Resources/Images/";
    $image = new Imagick($dir.$id.'.svg');
    /*
        Code to create images based on height, width, and change its format {svg to png} as required
    */
        $app->response->header('Content-Type', 'content-type: image/'.$type );
        echo $image;
    // $res->body($image);
});

I intent to use it as <img src="/assets/200/400/test/png" /> But i keep getting 404 error.

I already tried

• http://help.slimframework.com/discussions/questions/93-how-get-image-for-a-specific-route
• http://help.slimframework.com/discussions/questions/674-best-practice-to-return-images
• http://help.slimframework.com/discussions/questions/359-file-download
• https://stackoverflow.com/questions/20439144/php-how-to-use-a-rest-controller-to-serve-images

and few other. I also found https://github.com/tuupola/slim-image-resize but I need to use SVG Conversions and few other stuffs which it does not have.

Answer 1

I guess you are on the right track but you are missing some points. I made a fresh install of slim ("slim/slim": "^2.6"). This is my directory structure.

├── composer.json
├── composer.lock
├── public
│   ├── .htaccess
│   └── index.php
├── Resources
│   └── Images
│       └── smoke.svg
└── vendor

This is my Slim application file, index.php. Btw I didn't spend time on re-sizing the image I leave that to you. The application contains the assets route and test-image route.

<?php
require_once '../vendor/autoload.php';

$app = new \Slim\Slim();
$app->get('/assets/:height/:width/:id/:type', function($height, $width, $id, $type) use ($app) {
    $dir = dirname(__DIR__)."/Resources/Images/";

    $im = new Imagick();
    $im->setBackgroundColor(new ImagickPixel('transparent'));
    $svg = file_get_contents($dir.$id.'.svg');
    $im->readImageBlob($svg);

    $im->setImageFormat("png32");
    $im->resizeImage($height,$width,Imagick::FILTER_LANCZOS,1);

     $app->response->header('Content-Type', 'content-type: image/'.$type );
     echo $im;
     $im->destroy();
     
});

$app->get('/test-image', function() use ($app) {
    echo '<img src="assets/100/200/smoke/png" />';
});

$app->run();

The trick is removing the index.php from the url with the help of .htaccess There is a section for url rewriting in the docs; http://docs.slimframework.com/routing/rewrite/ -The docs include nginx directives too.-

The content of the .htacess file is;

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [QSA,L]

Also you need to add AllowOverride section to your virtual host file to be able to use the directives in your .htacess file. This one goes to virtualhost.conf

<Directory "/var/www/PUBLIC_DIRECTORY">
    AllowOverride All
    Order allow,deny
    Allow from all
</Directory>

Don't forget to restart or reload apache.

Then browse to http://<virtualhost>/test-image it should be good to go.

Update:

After your comments I setup a docker instance with nginx installed.

This is my virtualhost config file.

server {
server_name default;
root        /var/www/default/public;
index       index.php;

client_max_body_size 100M;
fastcgi_read_timeout 1800;

location / {
      try_files $uri /index.php?$args;
}

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
  expires       max;
  log_not_found off;
  access_log    off;
}

  location ~ \.php$ {
      fastcgi_split_path_info ^(.+\.php)(/.+)$;
      fastcgi_pass  unix:/var/run/php5-fpm.sock;
      fastcgi_index index.php;
      include fastcgi_params;
      fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
      fastcgi_param PATH_INFO $fastcgi_path_info;
  }
 }

And changed the php code a little bit to use correct url for the image generator route. I named the route and used urlFor method to retrieve correct url generated by the framework itself.

<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);

require_once '../vendor/autoload.php';

$app = new \Slim\Slim();
$app->get('/assets/:height/:width/:id/:type', function($height, $width, $id, $type) use ($app) {
    $dir = dirname(__DIR__)."/Resources/Images/";

    $im = new Imagick();
    $im->setBackgroundColor(new ImagickPixel('transparent'));
    $svg = file_get_contents($dir.$id.'.svg');
    $im->readImageBlob($svg);

    $im->setImageFormat("png32");
    $im->resizeImage($height,$width,Imagick::FILTER_LANCZOS,1);

     $app->response->header('Content-Type', 'content-type: image/'.$type );
     echo $im;
     $im->destroy();
     
})->name('generate-image');

$app->get('/test-image', function() use ($app) {

    $imageUrl = $app->urlFor('generate-image', 
                              array('height' => '200',
                                    'width' => '200', 
                                    'id' => 'smoke',
                                    'type' => 'png')
                            );

    echo '<img src="'.$imageUrl.'" />';
});

$app->run();

When I browse to the http://localhost/test-image url everything looks perfect on my side.