【rails】アイキャッチの設定

※本サイトで紹介している商品・サービス等の外部リンクには、アフィリエイト広告が含まれる場合があります。

アイキャッチ画像を設定する

記事にアイキャッチを設定できるようにして、記事一覧や記事詳細のページで表示できるようにしていく


アイキャッチをアップロードできるようにする

app/models/article.rbを開く

アイキャッチをアップロードするので、以下のように書き加える

class Article < ApplicationRecord
  has_one_attached :eyecatch


保存対象に:eyecatchを追加する

app/controllers/article_controller.rbを開く

eyecatchの保存を許可する

  def article_params
    params.require(:article).permit(:title, :content, :eyecatch)
  end


フォームを編集する

app/views/articles/_form.html.hamlを開く

フォーム画面でアイキャッチをアップロードできるようにする

  = form_with(model: @article, local: true) do |f|
    %div
      = f.label :eyecatch, 'アイキャッチ'
    %div
      = f.file_field :eyecatch

アップロードしたアイキャッチを表示する

記事一覧でアイキャッチを表示する

app/views/commons/_article.html.hamlを開く

article.eyecatch.attached?

  1. articleeyecatchattachedされていた場合
  2. article.eyecatchを表示する
  3. article.eyecatchがなければ、なにも表示しない
  .card
    - if article.eyecatch.attached?
      .card_image
        = image_tag article.eyecatch


記事詳細でアイキャッチを表示する

app/views/articles/show.html.hamlを開く

@article.eyecatch.attached?

  1. @articleeyecatchattachedされていた場合
  2. @article.eyecatchを表示する
  3. @article.eyecatchがなければ、なにも表示しない
  - if @article.eyecatch.attached?
    .article_image
      = image_tag @article.eyecatch

#DAY25