I want to make a card with a dynamic background with Cloudinary. I want that all the div can be interactive but i struggle to place the link as well.

Here is the HTML

<div >
<% @works.each do |work| %>
    <div  style="background-image: url('<%= cl_image_path work.photo.key, height: 420, width: 420, crop: :fill %>')">
      <%= link_to works_path(@work), class: 'work-card-link' do %>
      <h1><%= work.name %></h1>
      <% end %>
    </div>
<% end %>

How can I make this whole section a link without losing my columns?

CodePudding user response：

From HTML5 specification:

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)

You can wrap your card into a tag like this

<div >
  <% @works.each do |work| %>
    <a href="<%= work_path(work) %>">   <!-- `a` tag as wrapper -->
      <div  style="background-image: url('<%= cl_image_path work.photo.key, height: 420, width: 420, crop: :fill %>')">
        <h1 ><%= work.name %></h1>
      </div>
    </a>
  <% end %>
</div>