In this post, I covered from minute 2:19:19 until 2:31:48 of this video.
In previous part, we have a problem where the image wasn't automatically resized to 1:1. To do that, we need to use an external PHP library called Intervention. It is recommended to read the documentation in their website. Intervention has integration for Laravel which definitely will help us.
Installing Intervention Image
Run composer require intervention/image
In the photo below, you can see there are some discovered package. This is what we call package auto discovery feature in Laravel. It allows a package to hook itself up into our application without us having to explicitly tell Laravel. Now, not all packages have opted in. However, it is imperative that if you write a package that has a Laravel integration, you would want it to be auto discoverable like the way Intervention is. In the past, before package auto discovery was introduced, we would have had to go into Laravel configuration and tell Laravel about this Intervention Image package. But now, we don't need to.
Resizing the image
Explanation:
-
Image::- Use the Image class fromIntervention\Image\Facades\Image -
make()- wrap image file around Intervention class so that we can start to manipulate it public_path()- helper to find our image file"storage/{$imagePath}"- the path to our image file-
fit()- Intervention class that can cut any excess of an image to fit it to new width and height. Different that resizing. Takes 2 arguments and they are pixel count 1200, 1200- width and height of the new imagesave()- save the image
7 8 9 10 21 22 30 31 32 33 40 41 |
use Intervention\Image\Facades\Image; class PostsController extends Controller { ... public function store() { ... $image = Image::make(public_path("storage/{$imagePath}"))->fit(1200, 1200); $image->save(); ... } } |
app > Http > Controllers > PostsController.php
Linking the image to the post
Let's take a look back at
resource controller. We are now going to use the 'show' action. As you can see, for the
path, it is /photo/{photo}. Meaning that, we need to wrap the image in the
profile with an anchor linked to something like /p/{post_id}.
25 26 27 28 29 30 31 |
@foreach($user->posts as $post)
<div class="col-4 pb-4">
<a href="/p/{{ $post->id }}">
<img src="/storage/{{ $post->image }}" class="w-100">
</a>
</div>
@endforeach
|
resources > views > profiles > index.blade.php
We then need to add a new route for the post.
22 23 24 |
Route::get('/p/create', [App\Http\Controllers\PostsController::class, 'create']);
Route::post('/p', [App\Http\Controllers\PostsController::class, 'store']);
Route::get('/p/{post}', [App\Http\Controllers\PostsController::class, 'show']);
|
routes > web.php
Next, let's create the method for show. For this method, we're gonna use
what we call 'route model binding' to simplify our code. If we use just $post, it will only return the id of
the post. But when we use \App\Models\Post $post, it will return all the
data of the post with that id. And remember what we do in our
ProfilesController.php when we use findOrFail() instead of find()? This
route model binding will also do that for us, so we don't need to write it
manually.
42 43 44 45 |
public function show(\App\Models\Post $post)
{
return view('posts.show', compact('post'));
}
|
app > Http > Controllers > PostsController.php
Last but not least, let's create a new view and name it show.blade.php in the posts folder, to show the post when we click on the image.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-8">
<img src="/storage/{{ $post->image }}" class="w-100">
</div>
<div class="col-4">
<h3>{{ $post->user->username }}</h3>
<p>{{ $post->caption }}</p>
</div>
</div>
</div>
@endsection
|
resources > views > posts > show.blade.php
Now we're done! In the next part, we will learn to be able to edit the details in our profile such as the profile photo, title, description and url.
No comments:
Post a Comment