iterating over embed ruby code blocks with nested if statements

Question

I'm relatively new to RoR & am having trouble iterating over HTML code in erb .

I'm working the twitter bootstrap image carousel & I'm trying to insert my Apps images into it. The problem is, the first <li> in the carousel needs to have a different class to the subsequent <li> 's, ie class="active" .

Similarly the corresponding <div> tags for the images also needs to have the class="item active for the first <div> but not the subsequent <div> 's.

I can iterate over my images normally with a code block but when I try to put in an if statement to cater for the special classes needed in the first iterations, I run into trouble. I don't think I have the correct conditional statement for my if clauses, ie <% if @hikingtrail.photos[0] %> , the [0] seems wrong. Anyway when I try it, it messes up the image carousel but throws back no errors, just the images are overlapping & not sliding from one to the next.

Working Code - before if statement

<div id="show_right"> 
  <div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
      <% counter = 1 %>
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <% @hikingtrail.photos.each do || %>
      <li data-target="#myCarousel" data-slide-to="<%= counter %>"></li>
      <% counter += 1 %>
      <% end %>
    </ol>

    <div class="carousel-inner">
      <div class="item active">
        <img src="http://twitter.github.com/bootstrap/assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">
      </div>
      <% @hikingtrail.photos.each do |photo| %>
      <div class="item">
      <%= image_tag photo.image_url(:large).to_s %>
      </div> 
      <% end %>      

    </div>
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
  </div>
</div>

Attempted Solution (with if statements)

<div id="show_right"> 
  <div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
      <% counter = 1 %>
      <% @hikingtrail.photos.each do || %>
        <% if @hikingtrail.photos[0] %>
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <% else %>
        <li data-target="#myCarousel" data-slide-to="<%= counter %>"></li>
        <% end %>
        <% counter += 1 %>
      <% end %>
    </ol>

    <div class="carousel-inner">
      <% @hikingtrail.photos.each do |photo| %>
        <% if @hikingtrail.photos[0] %>
          <div class="item active">
        <% else %>
          <div class="item">
        <% end %>
        <%= image_tag photo.image_url(:large).to_s %>
      </div> 
      <% end %>      
    </div>
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
  </div>
</div>

Answer 1

You can try <% if @hikingtrail.photos[0] == photo %> to see if your current photo is the same as the first photo in the @hikingtrail collection. You are missing the photo parameter in your first each block though.

A more efficient and cleaner approach would be to do something like

<div id="show_right"> 
  <div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
      <% @hikingtrail.photos.each_with_index do |photo, index| %>
        <li data-target="#myCarousel" data-slide-to="<%= index + 1 %>" class="<%= index == 0 ? 'active' : ''"></li>
      <% end %>
    </ol>

    <div class="carousel-inner">
      <% @hikingtrail.photos.each_with_index do |photo, index| %>
        <div class="<%= index == 0 ? 'item active' : 'item' %>">
          <%= image_tag photo.image_url(:large).to_s %>
        </div> 
      <% end %>      
    </div>
    ...
  </div>
</div>

Answer 2

I believe that the simpler solution to your problem is to iterate over the photo's array with each_with_index . And if the index == 0 , put the class active to the element.

I have this code working in a current own application. I think that it's simpler than yours.

<div id="myCarousel" class="carousel slide">
  <ol class="carousel-indicators">
    <% (0..@carousel.length - 1).to_a.each do |index| %>
      <li data-target="#myCarousel" data-slide-to="<%= index %>" 
           class="<%= 'active' if index == 0 %>" ></li>
    <% end %>
  </ol>
  <div class="carousel-inner">
    <% @carousel.each_with_index do |photo, index| %>
      <div class="item <%= 'active' if index == 0 %>">
        <%= image_tag photo.image_url.to_s %>
      </div>
    <% end %>
  </div>
</div>