読者です 読者をやめる 読者になる 読者になる

主婦がアプリをリリースするまでの軌跡

自宅でお小遣い稼ぎをしたい主婦がアプリリリースを目指すブログです。

サムネイルのCarrierWaveの画像にリンクを貼る

Ruby on Rails アプリ作成 プログラミング

f:id:song-of-life1352607:20170221152659j:plain

こんにちは、マリンです。

サムネイルからのリンクにちょっと手間取ったのでメモります。

やりたかったこと

一覧ページで使っている、CarrierWaveでアップロードしたサムネイルをクリックすると、その詳細ページに飛ぶ。

方法

CarrierWaveの設定を変える

uploaders/〇〇_uploader.rbにはサムネイル用に画像をリサイズする設定があるので、

コメントアウトを外してお好みのサイズに設定してください。

   version :thumb do
     process resize_to_fit: [200, 200]
   end

サムネイルをつくる

1.リンクの要素をBootstrapのthumbnailclassのdivタグで囲う。

<div class="thumbnail">
       <link_to>
</div>

2.link_toにCarrierWaveの画像を設定する。

<div class="thumbnail">
       <link_to image_tag(@work.image.thumb.url), @work>
</div>

使う画像が最初に設定したCarrierWaveのthumbであることを、

忘れず設定してください。

まとめ

CarrierWaveといい、Bootstrapといい、

サムネイル用の設定まできちんと用意されているんですね!

至れり尽くせりです。

今回一番ハマったのは、

image_tagを付け忘れていくらやっても文字列化したURLしか出てこなかったってことですかね・・・

でもそういうケアレスミスのせいで深く考えすぎてしまうので、

気をつけねば・・・