![見出し画像](https://assets.st-note.com/production/uploads/images/37647606/rectangle_large_type_2_a9697af72102e784d374ab13bb871dbf.jpeg?width=1200)
Photo by
kyatapy
【Refile】 gem refile 使用時 画像送信ボタン CSS 変更
Ruby JavaScript Rails Refile
【ゴール】
gemfile 'refile' 使用時の画像送信ボタンのレイアウトを変更
【開発環境】
■ Mac OS catalina
■ Ruby on Rails (5.2.4.2)
■ Virtual Box:6.1
■ Vagrant: 2.2.7
【実装】
アプリケーション内のGemfile内に以下を記述
アプリケーション内.Gemfile
#refileをインストール
gem "refile", require: "refile/rails", github: 'manfe/refile'
gem "refile-mini_magick"
#jqueryをインストール
gem 'bootstrap-sass', '~> 3.3.6'
gem 'jquery-rails'
gemfileを対象アプリへ認識させます
Mac内.terminal
$ bundle install
お好きなviewページで以下を入力(これが画像を送信するボタン)
(お好きな.view)
<div class="item_image_btn">
<%= f.attachment_field :image %>
</div>
ーーここからjQueryを使用しますーー
先ほどのコードを変更
(お好きな.view.html)
<div class="image_wrapper">
<div class="item_image_btn">
<%= f.attachment_field :image id: "file" %>
</div>
<div id="img_field" onClick="$('#file').click()" >
<p>画像選択</p>
</div>
</div>
上記コード解説
画像送信ボタンにidを付与
<%= f.attachment_field :image , id: "file" %>
上記の送信と下のコードを"id"で紐付け、jQueryもviewファイルにて記述
<div id="img_field" onClick="$('#file').click()" >
image_filedをcssで変更
viewに対応している.css
.item_image_btn{
display: none;
}#元の送信ボタンを隠す
#img_field {
font-size: 25px;
font-style: inherit;
margin: 0 auto;
color: white;
background-color: #5bc0de ;
border-radius: 5px;
width: 300px;
height: 40px;
text-align: center;
line-height: 40px;
}
あとはボタンを好きなデザインに変える事ができます。
参考
この記事が気に入ったらサポートをしてみませんか?