[rails]Active Adminの編集画面に登録済みの画像プレビューを表示する

先日のActiveAdminまとめに続き今回もActive Adminネタです。

8 Insanely Useful ActiveAdmin Customizations | Vigetという記事で紹介されていたActiveAdminの便利なカスタマイズ機能のうちの一つに「すでに画像アップロード済みのデータを編集する際にプレビューを表示する」というものがあったので対応してみました。

• file_input.rb を追加

app/admin/inputs ディレクトリを作成し、その中に file_input.rb を追加しました。

image_preview_html 内で画像サイズを調整しています。

class FileInput < Formtastic::Inputs::FileInput
  def to_html
    input_wrapping do
      label_html <<
      builder.file_field(method, input_html_options) <<
      image_preview_content
    end
  end

  private

  def image_preview_content
    image_preview? ? image_preview_html : ""
  end

  def image_preview?
    options[:image_preview] && @object.send(method).present?
  end

  def image_preview_html
    template.link_to(template.image_tag(@object.send(method).url, class: "image-preview", height: 64), @object.send(method).url, target: '_blank')
  end
end

• 管理画面のform部分修正

app/admin/question.rb 内のimageのinputタグを修正します。

form(:html => { :multipart => true }) do |f|
  f.inputs "Details" do
    f.input :title
    f.input :image, :image_preview => true   # image_previewを追加
    f.input :publish_datetime, as: :just_datetime_picker
    f.input :image_cache, as: :hidden
  end

  f.inputs do
    f.has_many :answers, heading: 'Answers', allow_destroy: true, new_record: true do |a|
      a.input :answer_text
      a.input :total_count
    end
  end

  f.actions
end

この状態で新規にデータを作成した後、編集画面を見ると↓のようにアップロード済みの画像がプレビュー表示されます。

地味ですが、編集画面で「どんな画像あげてったっけ？」と迷うことがなくなり、少し快適になりました。

今回の変更点は前回のリポジトリに追加しています。

hilotter/rails_question_sample