[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

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

q1

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

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

hilotter/rails_question_sample