Resizing and serving images on the fly with Laravel – Part 1



Hi all, in this multi-part tutorial I will teach you about manipulating and serving images (and other assets) on the fly.

Note: part 2 of this tutorial can be found here

In more detail, we will learn how to

  • Create a config file for our app-specific settings.
  • Read an asset outside of the public folder.
  • Resize images according to controller parameters.
  • Use the imagine library to resize images.
  • Create a service to do the heavy lifting.
  • Cache the resized image.
  • Set the mime type of the response to the mime of the image.

Create a config file for our app-specific settings

To make our code a bit cleaner when we serve our images, we will define the path our images are located in a config file.

Create a new file in app/config and name it assets.php and add the following code

<?php

return array(
	'images' => 'app/assets/images/'
);

Now later on, we can use Config::get() to retrieve the value when needed.

Setting up our controller

Let’s start off by reading the image from the folder we defined in our config. First, create the folders /assets/images in your app directory. Place an image inside of the folder (I will call it YOURIMAGE.jpeg from now on).

Now that we have a sample image, we must create a new controller file under app/controllers. Name it ImageController.php.

Let’s create an action inside of this controller that accepts $filename as a parameter.



<?php

class ImageController extends BaseController {

	public function getImage($filename) {

	}

}

Next we must generate the full path to the original image location, read the file, get the mimetype and output the file again with the right mimetype. This can be easily done like so:

<?php

class ImageController extends BaseController {

	public function getImage($filename) {

		// Append the filename to the path where our images are located
		$path = Config::get('assets.images') . $filename;

		// Initialize an instance of Symfony's File class.
		// This is a dependency of Laravel so it is readily available.
		$file = new Symfony\Component\HttpFoundation\File\File($path);

		// Make a new response out of the contents of the file
		// Set the response status code to 200 OK
		$response = Response::make(
			File::get($path), 
			200
		);

		// Modify our output's header.
		// Set the content type to the mime of the file.
		// In the case of a .jpeg this would be image/jpeg
		$response->header(
			'Content-type',
			$file->getMimeType()
		);

		// We return our image here.
		return $response;
	}

}

Adding the router

Now we must connect a route to the getImage function.

Say if we want to for example access the image by going to http://yourproject.dev/images/YOURIMAGE.jpeg we can set up our route like this:

Route::get(
	'/images/{file}', 
	'ImageController@getImage'
);

We’re done for now

You can now access your image by going to http://yourproject.dev/images/YOURIMAGE.jpeg – In the next part of this tutorial we will look at how we can process the images and resize them before outputting them.

Share the knowledge!
Share on Facebook0Tweet about this on Twitter0Share on Google+19Share on StumbleUpon267Share on Reddit3Share on LinkedIn2Share on TumblrBuffer this pageDigg this

Comments

You may also like...

Stay updated
Subscribe!