[Rails] アイキャッチ画像のサイズ変更と位置指定

module ArticleDecorator
  def eye_catch_url(version = :origin)                     # 引数を渡す。　デフォルト値は origin　
    if !eye_catch.attached? || eye_catch.metadata.blank?   # 画像がない場合、もしくは画像のメタデータがからの場合
      return '/images/eye_catch.jpg'                       # '/images/eye_catch.jpg' を返す
    end

    command = case version                  # version が、
              when :thumb                   # :thumb の場合
                { resize: '640x480' }
              when :lg                      # :lg の場合
                { resize: '1024x768' }
              when :ogp                     # :ogp の場合
                { resize: '120x630' }
              else
                false
              end

    command ? eye_catch.variant(command).processed : eye_catch        # command がtrue の場合、条件分岐された結果に画像がリサイズされる。 falseの場合、リサイズされず、eye_catch が返される
  end
end

$ rails active_storage:install　　　

$ rails db:migrate    #migrationファイルをDBに反映させる。

#デフォルトではdevelopment環境のファイルの管理場所はlocalとなっている
config.active_storage.service = :local　　　　　　　　　　　　　　　　　# この local とは、config/storage.yml で定義された保存先の名前

local:   #localにおいてあるファイルの設定方法(デフォルト)。ここで、localを定義している。
  service: Disk    #localの時は使用するサービスをローカルディスクに設定
  root: <%= Rails.root.join('tmp', 'storage') %>    #ファイルを格納する場所

test:  #testにおいてあるファイルの設定方法。ここで、testを定義している。
  service: Disk   #testの時は使用するサービスをローカルディスクに設定
  root: <%= Rails.root.join('tmp', 'storage') %>    #ファイルを格納する場所

class AddColumnToArticles < ActiveRecord::Migration[5.2]
  def change
    add_column :articles, :eyecatch_width, :integer
    add_column :articles, :eyecatch_align, :integer, default: 0, null: false
  end
end

enum align: { left: 0, center: 1, right: 2 }

validates :eyecatch_width, numericality: { less_than_or_equal_to: 700, greater_than_or_equal_to: 100 }, allow_blank: true

def article_params
   params.require(:article).permit(
     :title, :description, :slug, :state, :published_at, :eye_catch, :eyecatch_width, :eyecatch_align, :category_id, :author_id, tag_ids: []
   )
end

= simple_form_for @article, url: admin_article_path(@article.uuid) do |f|
        .box-body
          - if @article.eye_catch.attached?
            = image_tag @article.eye_catch_url(:thumb), class: 'img-thumbnail'
            br
            br
          = f.input :eyecatch_width, placeholder: '100'        # 追加 プレースホルダーを100に設定
          = f.input_field :eyecatch_align, as: :radio_buttons       # 追加 f.input だと正しく出力されない。ラジオボタンを使うときはf.input_fieldを使う
          = f.input :description, input_html: { class: 'js-autosize' }

- if article.eye_catch.attached?
    section.eye_catch class="text-#{article.eyecatch_align}"
      = image_tag article.eye_catch_url(:lg), class: 'img-fluid', width: article.eyecatch_width

enum eyecatch_align: { left: 0, center: 1, right: 2 }

[2] pry(main)> article.eyecatch_align
=> "center"