xslibx
xslibx

Reputation: 4349

Creating thumbnail images for social network site using Laravel

I'm wondering if anyone knows a good strategy for solving this problem:

I'm creating a social networking site using Laravel 4. Users can upload pictures to their own gallery. These pictures can be any shape and size but the gallery on their profile will only display a cropped and resized thumbnail of the image (200px x 200px), which you can click on to view the full image.

Im using the Laravel plugin Intervention right now, which saves the original image, then resizes and crops that image and saves it again ( so now I have 2 copies). I then display the cropped/resized image as the thumbnail that links to the full size original image. However, I find that making copies of every image will be a tedious waste of space on my server since there could be thousands of images uploaded to the site.

Is there a way to grab the original image, resize and crop it on the fly and display it only when the user loads the page without having to save the thumbnail to the server? or am I stuck with having to make a cropped copy for every image?

A great example that shows what I'm looking to achieve is the way Facebook crops pictures into squares in a users picture gallery or how they are cropped and resized on the newsfeed when a user uploads multiple images to a status.

Any advice is greatly appreciated!

Upvotes: 1

Views: 1819

Answers (2)

Brandon Johnson
Brandon Johnson

Reputation: 21

Have you seen League/Glide yet? It's basically a wrapper for Intervention/Image and Intervention/ImageCache. Glide's Laravel setup video gets you set up in two minutes (pay attention to the second example).

Upvotes: 1

lukasgeiter
lukasgeiter

Reputation: 152980

Yes Intervention let's you manipulate and display on the fly too. Here's a simple example (obviously you would actually do it with a controller etc)

Route::get('img/profile/picture.jpg', function(){
    $img = Image::make('path/to/profile/picture.jpg');

    // resize, crop, whatever

    return $img->response();
});

And then you just set the right URI to this route as src of your image.

Intervention Docs

Keep in mind that this will use more server resources and make the image response take longer

Upvotes: 0

Related Questions