Rails — как поместить текст на изображение в цикле кода

Я строю сайт событий с помощью rails. Для моей страницы индекса у меня есть цикл кода, показывающий изображение, название события и дату для каждого события. Мне нужно показать название и дату поверх изображения. Блоки кода для заголовка и даты завернуты в теги h2 и h3 соответственно. Я не совсем уверен, как правильно это стиль.

Моя html-страница представлена следующим образом —

индекс.формат html.erb-события

<div class="container">
 <div class="row">
    <div class="col-md-12">
        <div class="events">    
            <% @events.each do |event| %>
                <li><%= link_to (image_tag event.image.url), event, id: "image" %></li>
            <div id="text"> 
                <h2><%= link_to event.title, event %></h2>
                <h3><%= link_to event.date.strftime('%A, %d %b %Y'), event %></h3>
            <% end %>
            </div>  
        </div>          

      </div>
   </div>   
 </div> 

Мой CSS для раздела изображений выглядит следующим образом —

Мероприятия.стиль CSS.scss

div.container {
width: 100%;

}   



.col-md-12 { 

     width: 100%;


}    

 div.events img {
    width: 350px;
    height: 350px;
    margin: 20px;
    display: inline-block;
    border-radius: 25px;


}

 div.events li {

    float: left;
    list-style-type: none;
}   

Что нужно сделать, чтобы поместить текстовые элементы этого цикла кода на соответствующее изображение?

1 ответ

  1. Вы просто должны упаковать свои вещи в один элемент DOM. Если вы не уверены, вы можете создать быстрый статический прототип HTML (обычный старый html-файл), а затем поместить соответствующие элементы в представления rails. Здесь быстрый пример, позаботьтесь вы устанавливаете Li расположенное относительное и Абсолют div поэтому вы можете расположить его путь вам нужно оно…

        <ul>
          <li class="teaser">
              <img src="http://lorempixel.com/400/200/">
              <div class="event-details">
                <h2>foo</h2>
              </div>
          </li>
          <li class="teaser">
            <img src="http://lorempixel.com/400/200/">
            <div class="event-details">
              <h2>foo</h2>
            </div>
          </li>
        </ul>
    
        li.teaser { width: 400px; height: 200px; position: relative; }
        li.teaser img { width: 100%; height: 100%; }
        div.event-details { background: white; padding: 25px; position: absolute; bottom: 25px; right: 25px; }
    

    В вашем случае наверняка… <% @events.each do |event| %><li>...</li><% end -%>