記事投稿 アイキャッチ作成

アイキャッチの設定

①app/models/article.rb

  has_one_attached :eyecatch

②app/controllers/articles_controller.rb

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

eyecatchを追加
③app/views/articles/_form.html.haml

%div
  = f.label :eyecatch, 'アイキャッチ'
%div
  = f.file_field :eyecatch

④app/views/commons/_article.html.haml

.card
    - if article.eyecatch.attached?
      .card_image
        = image_tag article.eyecatch

⑤app/views/articles/show.html.haml

  - if @article.eyecatch.attached?
    .article_image
      = image_tag @article.eyecatch

⑥app/assets/stylesheets/article.scss

$container-padding: 16px;

.article {
  background-color: white;
  margin: 16px 16px;
  padding: $container-padding $container-padding;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
  position: relative;

  &_image {
    height: 180px;
    position: relative;
    overflow: hidden;
    margin: $container-padding * -1 $container-padding * -1 16px;

    img {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      width: 100%;
    }
  }

これで、画像も枠内に表示されるようになりました