Laravel5入門として画像投稿機能付き掲示板作成を目指す：画像投稿偏(LightBox使用)

前回では base64を使用してブラウザに画像を表示していたのですが、画像の保存やlightboxが使えなかったので別のアプローチから攻めてみます。

方針

• 画像はDBではなく、public/mediaにユニークな名前で保存する
  • その際、サムネイルを生成し、public/media/mini に同名で保存する
• DBには画像の名前（fig_name）と拡張子（fig_mime)を保存する
• 表示する際は、DBから名前を取り出し、サムネイル表示のため public/media/mini を参照する
  • 画像をクリックした場合、lightboxでオリジナルサイズの画像を表示する

DBの設定

php.database/migrations/2016_02_10_162119_create_posts_table.php

~~
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->increments('id');
            $table->integer('post_id')->nullable();
            $table->integer('res_id')->nullable();
            $table->string('title');
            $table->string('contributor');
            $table->string('body');
            $table->string('fig_name')->nullable();
            $table->string('fig_mime')->nullable();
            $table->timestamps();
        });
    }
 ~~
}

コントローラー

php.app/Http/Controllers/PostsController.php

~~
    public function store(PostRequest $request){
        //        Post::create($request->all());
        $this->post = new Post();
        $this->post->fill($request->all());

        $tmp_post_id = $_POST['post_id'];
        if ( $tmp_post_id == '-1') { //新規作成
            $this->post->post_id = Post::max('post_id') + 1;
            $this->post->res_id = 0;
        } else {
            $this->post->post_id = $tmp_post_id;
            $this->post->res_id = Post::where('post_id', '=', $tmp_post_id)->max('res_id') + 1;
        }

        $image = Input::file('data');
        if(!empty($image)) {
            $this->post->fig_mime = $image->getMimeType();
            switch ($this->post->fig_mime) {
            　　case "image/jpeg": $flag = TRUE; break;
            　　case "image/png": $flag = TRUE; break;
            　　case "image/gif": $flag = TRUE; break;
            　　default: $flag = FALSE;
            }
            if ($flag == FALSE) {
                \Flash::error('アップロード可能な画像ファイルは jpg, png, gif のみです。');
                return redirect()->back();
            }

            //ユニークな名前を作成
            $name = md5(sha1(uniqid(mt_rand(), true))).'.'.$image->getClientOriginalExtension();
　　　　　　 //オリジナルサイズの画像をpublic/mediaに保存
            $upload = $image->move('media', $name);

            //サムネイルを作成し、public/media/mini に保存
            Image::make('media/'.$name)
                ->resize(400, 400)
                ->save('media/mini/'.$name);
            $this->post->fig_name = $name;
        }

        $this->post->save();
        \Flash::success('記事が投稿されました。');

        if ( $tmp_post_id == '-1') { //新規作成
            return redirect()->route('posts.index');
        }
        return redirect()->route('posts.show', [$tmp_post_id]);

    }
 ~~
}

ビューファイル

• lightboxの導入についてはこのサイト様を参考にしました。

PHP.resources/views/posts/one_article.blade.php

~~
        {{-- Image view start --}}
        @if (!empty($post->fig_name))
            <div style="padding:10px">
                <a href="http://localhost/my_bbs/public/media/{{ $post->fig_name}}" 
                    data-lightbox="image-1">
                <img src="http://localhost/my_bbs/public/media/mini/{{ $post->fig_name}}"
                    alt="test" height="400" width="400"/>
                </a>
            </div>
        @endif
        {{-- Image view end --}}
~~

• <a/>タグ内の data-lightbox="image-1"でlightboxを使用しています

結果

画像クリック前(サムネイル)

画像クリック後（オリジナルサイズ）