経緯

上の記事ではlaravelで画像を表示できるようにしました。
しかし、画像によっては大きく表示されてしまっていたので、画像のサイズを変更して表示したい！と思い画像をリサイズして表示することに挑戦！🐶

やりたいこと

画像をリサイズして表示する

環境

・M1 Mac
・Laravel Framework 8.82.0
・PHP 8.1.2
・docker

やったこと

①composerを使ってintervention/imageをインストール。

以下のコマンドを使って、Intervention Imageという外部のライブラリをインストールする。

composer require intervention/image

②設定を行う

インストールできたら、configフォルダの中にあるapp.phpで設定を行う！

app.phpのproviders

 'providers' => [

        /*（省略）*/

         /*
         * Package Service Providers...
         */
        Illuminate\View\ViewServiceProvider::class,
        //大体１６０行目くらいに僕は追加しました
    ],

app.phpのaliases

    'aliases' => [
        ///aliasesの一番下に追加しました
        'InterventionImage' => Intervention\Image\Facades\Image::class,
        //※ここでImageとするとImageモデルと被る可能性があるので、InterventionImageとした
    ],

設定はこれで終わり！簡単！🐶

③画像のサイズを変更する

僕はこんな感じでcontrollerを書きました！
参考程度にどうぞ！

僕が実際に書いたcontrollerのコード

//ここでuseするのを忘れないように！
use Illuminate\Support\Facades\Storage;
use InterventionImage;


public function store(Request $request)
    {
        $post = new Post();
        $post->title = $request->title;
        $post->body = $request->body;
        $post->image = $request->image;

        $file = $request->file('image');
        // アスペクト比を維持しつつ画像の幅を1920pxで保存している
        $resized = InterventionImage::make($file)->resize(1920, null, function ($constraint) {
            $constraint->aspectRatio();
        })->save();

        //画像の保存
        Storage::put('public/' . $post->image, $resized);

        $post->save();

        return redirect()
            ->route('posts.index');
    }

④bladeに渡して表示

あとはこんな感じでbladeファイルに渡して表示するだけ！

bladeファイル

 <div class="show_picture">
        <img src="{{asset('storage/' . $post->image)}}">
 </div>

画像の範囲が分かりにくいと思うんですけど、こんな感じで表示できました！（少しCSS使って調整もしました...）

お世話になった方々

クソおせわになりました！
【Laravel】画像をアップロードして、表示させる方法
 Laravelで画像サイズを変更して保存する方法がめちゃめちゃ簡単だった話
 Laravelで画像をリサイズ＆勝手に回転しないようにする【EXIF情報も削除】

まとめ

リサイズするだけで初めは「めんどくさっ」てなんたんですけど、わかれば結構簡単でした！
いろいろ参考にしながら自分で考えてやってみたところもあるので、間違ってるところもあるかもしれないです！
参考程度に見てくれると幸いです🐶
最後まで見てくださりありがとうございました！

Laravelで画像をリサイズして表示する

経緯