May 31, 2018

Level 1

Intervention: Image Manipulation on the Fly?

Hi Folks,

I have 2 Tables (Images: Name, URL, Project_ID - Projects: Name, User_ID). I use eloquent to fetch the Data:

Controller:

public function ProjectShow () {

  $user = Auth::user();


  $projects = Project::with('images')
                ->whereHas('user', function ($query) use ($user) {
                    $query->where('id', '=', $user->id);
                })->get();

return view('project-show', compact('projects', 'user'));

}

Blade:

@foreach($projects as $project)

This is Project Name: {{ $project->name }}

@foreach($project->images as $image)
    <p>This is Project FotoURL:  <img src ="{{ $image->url }}" alt=""></p>
@endforeach

@endforeach

To show thumbnails, I have installed Intervention Package with:

php composer.phar require intervention/image

and entered the required data in config/app (providers, aliases)

I have watched the Thumbnail Video, but I am stuck as in the Video I have to add a ->thumbnail_ extension to the variable, but as I am using $projects->url I am not able to add this "extra" ->thumbnail_ stuff.

How can I solve this to show thumbnails (5 in a row, max 3 lines? Can I do this on the fly in the blade, or do I have to manipulate the image in the controller?

Sorry if already asked, but I was not able to find a solution for this request...

Kind Regards

Stefan

Snapey

8 years ago

Level 122

You either have to pre-process the images into the thumbnails so that they exist on your file server as individual files, or create a route that serves images at the requested size.

For instance, if you have a route like

Route::get('/thumbnails/{id}/{width}',ImagesController@show);

Then you could create an html tag in your blade file like

<img src="/thumbnails/1234/150">

The browser then parses the html and finds the img request. It then downloads image 1234. Your controller gets the image id and the required width

It can then reply with the image resolution that was requested by loading the image into memory, resizing it with Intervention and replying with the content.

In the interests of performance, you should pre-process the images at the sizes you need.

Bosstone

7 years ago

Level 1

Dear Snapy thank you for your feedback. I have made it as you suggested, but I am not able to use aspect ratio:

I am saving the thumbnails like

$img = Image::make($thumbnailpath)->resize(250, 150)->save($thumbnailpath);

Intervention Image tells that I have to use:

$img->resize(null, 200, function ($constraint) { $constraint->aspectRatio(); });

but when I adapt my code, then I get a "unexpected } error"

$img = Image::make($thumbnailpath)->resize(null, 200, function ($constraint) { $constraint->aspectRatio()})->save($thumbnailpath);

How can I solve this issue? I want all the images with a width of 200 and an aspected Ratio...

Kind Regards,

Stefan

Snapey

7 years ago

Best Answer

Level 122

From an actual project;


        $image->resize(800, 960, function ($constraint) {
            $constraint->aspectRatio();
        });

from the docs

// resize the image to a width of 300 and constrain aspect ratio (auto height)
$img->resize(300, null, function ($constraint) {
    $constraint->aspectRatio();
});

So 200 should be your 1st parameter and null as the second.

Your error is because you are missing the ; so you get unexpected }

Should be

$img = Image::make($thumbnailpath)
    ->resize(200,null, function ($constraint) {
        $constraint->aspectRatio();
    })
    ->save($thumbnailpath);

1 like

Bosstone

7 years ago

Level 1

Dear Snapy, thank you very much for your support. Works like a charm :-)

Kind Regards,

Stefan

Please or to participate in this conversation.