Action textに画像アップロードを追加

前回の記事でAction textを導入した記事を超ざっくり書きました。

ざっくり書きすぎて初学者には全然わからなかったかもしれません...

文章力無さすぎて....もっとうまく書かなくちゃね！！！！！！！！

さて今回はまず記事を投稿したらサムネ画像も表示させたくないですか？

その機能を追加してみます。

これのことですね

若干小さい画像のところで画像が中心になってないのが手直し必須の所ですが...
直しました！！！

とりあえず参考にした物を貼っておきます！
こちら

まずimage_processing gemの導入をしてください。

gem 'image_processing', '~> 1.2'

has_one_attached :image
has_rich_text :body

def blog_params
      params.require(:blog).permit(:title, :body, :image)
end

@blog = Blog.new(blog_params)

<div class="images">
    <%= form.label :画像 %>
    <%= form.file_field :image, accept: "image/png, image/jpeg, image/gif"%>
</div>

<%= image_tag @blog.image.variant(resize_to_fill:[800,600]).processed, class:'img-fluid' if @blog.image.attached? %>

 max-width: 100%;
 height: auto;

if @blog.image.attached? 

ここ注目テストに出るよー

- gem "mini_magick"
+ gem "image_processing", "~> 1.0"

- <%= image_tag user.avatar.variant(resize: "300x200") %>
+ <%= image_tag user.avatar.variant(resize_to_fit: [300, 200]) %>

cropの設定もできました。

<%= image_tag b.image.variant(resize_to_fill:[120,120],crop:("120x120+0+0")).processed, class:"image-index" if b.image.attached? %>

むしろcropを使わないとサイズがバラバラになったので設定してみてください。

crop:("120x120+0+0")ここで設定できるよ〜。

２時間ハマったちょめこ。

以上で画像アップロードは完了です。

ちなみに画像はどこに保存してあるかというと、デフォルトのままだとローカル環境では、storageに保存されています。

バリデーションの設定

validates :image,  presence: true

validate :image_content_type, if: :was_attached?

  private
  def image_content_type
    extension = ['image/png', 'image/jpg', 'image/jpeg']
    errors.add(:image, "の拡張子が間違っています") unless image.content_type.in?(extension)
  end

  def was_attached?
    self.image.attached?
  end

記事の枠を少し広げてみた

.trix-content {  
　　font-size: 16px;
  line-height: 26px;
  color: #111111;
  min-height: 20em;
}

• min-height: 20em;

記事のh1要素にborderを追加した

.trix-content h1 {  
　　border-bottom: 1px solid #ccc;
  font-size: 1.6em;
  line-height: 1.2;
  margin: 0;
}

• border-bottom: 1px solid #ccc;

次回