CODEWITHSUNDEEP
cssruby-on-railsruby
JamesRocky
JamesRocky

Reputation: 721

Can someone help me with rails Iterators like "each"?

I have code and css setup but i'm not sure how to implement them. So basically the rails code puts out each book with a title, author, price, and etc.

Yet I want each book to be in a layout like this: http://ironsummitmedia.github.io/startbootstrap-thumbnail-gallery/

When I do try to get it in, its only vertical and not horizontal layout

The Code:

<% @books.each do |book| %> 

      <%= link_to book.title, product  %> 
      <%= book.edition %>
      <%= image_tag book.image.url(:thumb) %>
      <%= book.author %>
      <%= link_to time_ago_in_words(book.created_at) + " ago", book %>

<% end %>

I'm just unsure how to do this.. thanks in advance!

Upvotes: 0

Views: 98

Answers (3)

Surya
Surya

Reputation: 16002

Try this:

<div class='row'>
  <% @books.each do |book| %> 
    <div class='col-lg-3 col-md-4 col-xs-6 thumb'>
      <a href= <%= book.title %>, class ='thumbnail' >
        <%= image_tag book.image.url(:thumb), :class => 'img-responsive' %>  
      </a>
      <%= book.edition %>
      <%= book.author %>
      <%= link_to time_ago_in_words(book.created_at) + " ago", book %>
    </div>
  <% end %>
</div>

Note that <img>(generated from image_tag method) tag is inside the <a> tag, that's why we had to use HTML <a> tag instead of link_to method here.

Upvotes: 1

Milind
Milind

Reputation: 5112

WITHOUT BOOSTRAP:-

HTML-----------------

<div class="smart_listing">
<% if @books.present? %>
  <ul>
 <% @books.each do |book| %> 
    <li>
        <a href="<%= product_path%>">
           <%= image_tag book.image.url(:thumb) %>
       </a>
      <%= book.title %>|<%= book.edition %>|<%= book.author %>|<%= time_ago_in_words(book.created_at) + " ago", book %>    
   </li>
<%end%>
  </ul>
<%end%>
</div>

Css-------

.smart_listing {
/*change the width as you need*/
  width: 900px;
  margin: 0 auto;
  overflow: auto;
}

.smart_listing ul {
  list-style-type: none;
}

.smart_listing li img {
  float: left;
  margin: 10px;
  border: 5px solid #fff;

  -webkit-transition: box-shadow 0.5s ease;
  -moz-transition: box-shadow 0.5s ease;
  -o-transition: box-shadow 0.5s ease;
  -ms-transition: box-shadow 0.5s ease;
  transition: box-shadow 0.5s ease;
}

.smart_listing li img:hover {
  -webkit-box-shadow: 0px 0px 7px rgba(255,255,255,0.9);
  box-shadow: 0px 0px 7px rgba(255,255,255,0.9);
}

WITH BOOTSTRAP... just add pull-left or float:left to li to make it a listing page 

<% if @books.present? %>
<ul class="list-unstyled">
 <% @books.each do |book| %> 
     <li class="pull-left">
      <%= link_to book.title, product  %> 
      <%= book.edition %>
      <%= image_tag book.image.url(:thumb) %>
      <%= book.author %>
      <%= link_to time_ago_in_words(book.created_at) + " ago", book %>
    </li>
<% end %>
</ul> 
<%end%>

IT WILL LOOK SOMEWHAT LIKE BELOW PAGE

WILL LOOK SOMEWHAT LIKE THIS:-

Upvotes: 2

Amit Badheka
Amit Badheka

Reputation: 2672

You can try

<% @books.each do |book|   %>
  <div class="col-lg-3 col-md-4 col-xs-6 thumb">
    <%= link_to book.title, product  %>
    <%= book.edition %>
    <%= image_tag book.image.url(:thumb) %>
    <%= book.author %>
    <%= link_to time_ago_in_words(book.created_at) + " ago", book %>
  </div>
<% end %>

You can edit that classes and add more elements to make it look the way you like

Upvotes: 2

Related Questions