RailsGirls Shiojiri thumbnail list snippet

index.html.erb

<div align="center">

  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="width: 500px;">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <% @ideas.count.times do |i| %>
        <li data-target="#carousel-example-generic" data-slide-to="<%= i %>" class="<%= i == 0 ? 'active' : '' %>"></li>
      <% end %>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <% @ideas.each_with_index do |idea, index| %>
        <% if idea.picture.present? %>
          <div class="item<%= index == 0 ? ' active' : '' %>">
            <%= image_tag(idea.picture_url, height: '500px') %>
            <div class="carousel-caption">
              <h2><%= idea.name %></h2>
              <p>
                <%= idea.description %>
              </p>
            </div>
          </div>
        <% end %>
      <% end %>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>


<hr>


<% @ideas.each_slice(4) do |ideas| %>
  <div class="row">
    <% ideas.each do |idea| %>
      <div class="col-md-3">
        <div class="thumbnail">
          <%= image_tag(idea.picture_url, width: 600) if idea.picture.present? %>
          <div class="caption">
            <h3><%= idea.name %></h3>
            <p><%= idea.description %></p>
            <p>
              <%= link_to '開く', idea, class: 'btn btn-primary' %>
              <%= link_to '編集', edit_idea_path(idea), class: 'btn btn-warning' %>
              <%= link_to '削除', idea, class: 'btn btn-danger', data: { confirm: '削除してよろしいですか？' } %>
            </p>
          </div>
        </div>
      </div>
    <% end %>
  </div>
<% end %>