OneDay

40歳からプログラマとして生活しています。

Bootstrap "hidden-xs" と"visible-xs"で条件分けしてviewファイル書きたい

xs表示で、写真の大きさを変更したいのだが、コードがくどい。

<!--app/views/users/hogehoge.html.erb-->
<% @users.each do |u| %>  
   <%= link_to (image_tag u.profile_image.thumb
        ,style: "height:auto; max-width:100%;" 
        ,class:"img-rounded visible-xs")
        ,user_path(u) %>
   <%= link_to (image_tag u.profile_image.thumb
        ,style: "height:auto; max-width:30%;" 
        ,class:"img-rounded hidden-xs")
        ,user_path(u) %>
<% end %>

style:max-widthの値と、class:のhidden-xsとvisible-xsだけの違い。なんとかならないか。
まず、link_toのブロックにしてlinkの重複を解除してみる。

<!--app/views/users/hogehoge.html.erb--> 
<% @users.each do |u| %> 
   <%= link_to user_path(u) do %>
        <%= image_tag u.profile_image.thumb
        ,style: "height:auto; max-width:100%;" ,class:"img-rounded visible-xs"%>
        <%= image_tag u.profile_image.thumb
        ,style: "height:auto; max-width:30%;" ,class:"img-rounded hidden-xs"%>
   <% end %>
<% end %>


次に配列使ってみる。

<!--app/views/users/hogehoge.html.erb-->
<% @users.each do |u| %> 
   <% width=["100%", "30%"]; xs=["visible", "hidden"]  %>
   <%= link_to user_path(u) do %>
        <%  2.times do |i|  %>
             <%= image_tag u.profile_image.thumb
            ,style:  "height:auto; max-width:#{width[i]};"
            ,class: "img-rounded #{xs[i]}" %>
        <% end %>
   <% end %>
<% end %>

まだくどい。


今度はHashでやってみる。

<!--app/views/users/hogehoge.html.erb-->
<% @users.each do |u| %> 
   <% visible={style: "width:100%;", class:"visible-xs"}; hidden={style:"width:30%;", class:"hidden-xs"}%>
   <%= link_to user_path(u) do %>
        <%  [visible, hidden].each do |bootstrap|  %>
             <%= image_tag u.profile_image.thumb
            ,style:  "height:auto; max-width:#{[bootstrap[:style]};"
            ,class: "img-rounded #{bootstrap[:class]}" %>
        <% end %>
   <% end %>
<% end %>

くどい。少しは良くなったが、viewファイルにこのまま書くと可読性が保てない。helper_methodと部分テンプレートを用いてみる。

helper_methodを設定する。引数にcssのハッシュとimage情報を入力して、imgタグを返すメソッド。tagというヘルパーメソッドを使用。
ActionView::Helpers::TagHelper

erbファイルでvisibleとhiddenという変数に必要なclassとstyleの情報を入れる。height:autoなどのstyleがダブっている点が不満だが、最初に変数に入れてしまえば、visibleとhiddenでのcssの違いが分かりやすい。

#app/helpers/user_helper.rb
module UserHelper
  def bootstrap_simple(xs, image)
    tag("img", src:image, style: xs[:style], class: xs[:class])
  end
end
<!--app/views/users/hogehoge.html.erb-->
<% @users.each do |u| %> 
   <% visible={style:"height:auto; max-width:100%;", class:"img-rounded visible-xs"} %>
   <% hidden={style:"height:auto; max-width:30%;", class:"img-rounded hidden-xs"} %>

   <%= link_to user_path(u) do %>
       <% [visible, hidden].each do |bootstrap| %>
           <%= bootstrap_simple(bootstrap, u.profile_image.thumb.url) %>
       <% end %>
   <% end %>
<% end %>

最終形。hogehoge.html.erbが一応すっきり。

#app/helpers/user_helper.rb
module UserHelper
  def bootstrap_simple(xs, image)
    tag("img", src:image, style: xs[:style], class: xs[:class])
  end
end
<!--app/views/users/hogehoge.html.erb-->
<% @users.each do |u| %> 
   <%= render 'bootstrap_xs', u:u %>
<% end %>
<!--app/views/users/_bootstrap_xs.html.erb-->
<% visible={style:"height:auto; max-width:100%;", class:"img-rounded visible-xs"} %>
<% hidden={style:"height:auto; max-width:30%;", class:"img-rounded hidden-xs"} %>

<%= link_to user_path(u) do %>
    <% [visible, hidden].each do |bootstrap| %>
        <%= bootstrap_simple(bootstrap, u.profile_image.thumb.url) %>
    <% end %>
<% end %>

もっと簡潔なやり方があると思うが、今のところ、これが限界。
アドバイス等いただけると大変ありがたいです。