Reputation: 101
I would like to make a link with a background-image in my project. It would allow me to get a clickable picture with good proportions.
Here is the best I can get until now :
<%= link_to "", show_item_general_path(item), html_options = {:class => "picture", :style => "background-image: url( asset_url(item.asset_files.first.image )); background-position: 50% 50%; background-size: cover;"} %>
html result:
<a class="picture" href="/items/1" style="background-image: url( asset_url(item.asset_files.first.image )); background-position: 50% 50%; background-size: cover;"></a>
My helper doesn't get interpreted.
Upvotes: 0
Views: 1132
Reputation: 9747
Try using #{asset_url(item.asset_files.first.image )}
for string interpolation.
<%= link_to "", show_item_general_path(item), html_options = {:class => "picture", :style => "background-image: url( #{asset_url(item.asset_files.first.image)} ); background-position: 50% 50%; background-size: cover;"} %>
You may want to try this (you may need to tweak css/style):
<%= link_to show_item_general_path(item), :class => "picture" do %>
<%= image_tag item.asset_files.first.image %>
<% end %>
Upvotes: 2