CODEWITHSUNDEEP
cssruby-on-railsrubyruby-on-rails-4rubygems
Charlie
Charlie

Reputation: 246

Rails - how can I display left and right layout for image and its content in every other row

I want to to loop through each post and display a left and right layout of image and its content in every other row

like this Theme basically the html is: 

<div class="container">

    <div>
    <div class="images"><img src="image1"></div>
    <div class="images-content">content 1 here</div>
    </div>

    <div>
    <div class="images images-right"><img src="image2"></div>
    <div class="images-content images-content-right">content 2 here</div>
    </div>

   <div>
    <div class="images"><img src="image3"></div>
    <div class="images-content">content 3 here</div>
    </div>

    <div>
    <div class="images images-right"><img src="image4"></div>
    <div class="images-content images-content-right">content 4 here</div>
    </div>

   <div>
    <div class="images"><img src="image5"></div>
    <div class="images-content">content 5 here</div>
    </div>

    <div>
    <div class="images images-right"><img src="image6"></div>
    <div class="images-content images-content-right">content 6 here</div>
    </div>


 </div>

I have tried this cycle example

<% @posts.each do |post| %>

  <div class="<%= cycle('images', 'images images-right') %>">
    Image here
  </div>

<% end %>

but the problem is how to add the respective content div classes which goes with the images

Upvotes: 0

Views: 155

Answers (2)

Jagdeep Singh
Jagdeep Singh

Reputation: 4920

You can use with_index to add classes dynamically to your odd-indexed posts.

Also, please prefer using image_tag instead of using raw HTML to create <img> tag.

<div class="container">
  <% @posts.each.with_index do |post, index| %>
    <div class="images <%= 'images-right' if index.odd? %>"><%= image_tag post.image %></div>
    <div class="images-content <%= 'images-content-right' if index.odd? %>"><%= post.content %></div>
  <% end %>
<div>

Upvotes: 1

Aaron Breckenridge
Aaron Breckenridge

Reputation: 1819

It on what attributes your Post model has. Presumably it has content and image attributes?

<% @posts.each do |post| %>
  <div>
    <div class="<%= cycle('images', 'images images-right') %>">
      <%= post.image %>
    </div>
    <div class="<%= cycle('images-content', 'images-content images-content-right') %>">
      <%= post.content %>
    </div>
  </div>
<% end %>

Upvotes: 0

Related Questions