現状

記事にアイキャッチ画像を紐付けることが出来ますが、表示する際に画像の大きさが選べません。（その為に常に横幅100%の大きさで画像が表示されてしまい、見栄えが悪くなっています。）

改修後

記事編集時に、画像の横幅をピクセル単位で指定できるようにしてください。表示されるアイキャッチ画像の横幅を、指定した大きさで表示されるようにしてください。

登録できる画像の横幅は100〜700pxの間とします。横幅が100pxより小さいサイズで登録された場合は「100以上の値にしてください」というバリデーションエラーを表示してください。横幅が700pxを超えたサイズで登録された場合は「700以下の値にしてください」というバリデーションエラーを表示してください。

記事編集画面に「左寄せ」「中央」「右寄せ」のラジオボタンを設置してください。ラジオボタンにて選択された位置に画像が表示されるように改修してください。アイキャッチ横幅用のカラムは eyecatch_width で作成してください。アイキャッチ横幅の入力フォームは placeholder に 100 を設定してください。

実　装　手　順

①　記事編集画面に画像の位置を選択させるラジオボタンの設置＆画像の横幅を入力できる入力欄を設置

②　入力された内容を画像とともに保存できるようにする

③　呼び出したときにこの２つを反映させられるようにする

①　記事編集画面に画像の位置を選択させるラジオボタンの設置＆画像の横幅を入力できる入力欄を設置

先ずは必要なカラムの追加を行う

$rails g migration AddColumnToArticlesを実行し、以下のように編集して$rails db:migrateを実行する

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

これによりeyecatch_widthとeyecatch_positionカラムが追加されたので次に、

登録できる画像の横幅は100〜700pxの間とします。横幅が100pxより小さいサイズで登録された場合は「100以上の値にしてください」というバリデーションエラーを表示してください。横幅が700pxを超えたサイズで登録された場合は「700以下の値にしてください」というバリデーションエラーを表示してください

この条件をつけるためにvalidationを設定する

article.rb

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