Loop within index.html.erb in Bass Music Step 16


#1

I can't get the index.html.erb to display the album covers and artists in Bass Music as a row. They all appear in a straight line down the left-hand side of the screen. I think its because the col-md-3 is in the wrong place or being used incorrectly. please help.


#2

Mine's doing the same. I'm also getting all of the album model data dumped in a div just above the footer. Can't find any reason why this would be happening.


#3

Further investigation indicates that it's a problem with the application layout file at bass-music/app/views/layouts/application.html.erb. I replaced everything above <div class="main"> with:

    <!DOCTYPE html>
    <html>
      <head>
        <title>BassMusic</title>
        <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
        <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,700,500' rel='stylesheet' type='text/css'>
        <link data-turbolinks-track="true" href="/assets/application-1ccba9a77340e9fdad9c23e8732cbb17.css" media="all" rel="stylesheet" />
        <script data-turbolinks-track="true" src="/assets/application-02c52244c0e2a3238fc4e84d9fa65e4c.js"></script>
        <meta content="authenticity_token" name="csrf-param" />
    <meta content="MQTYJJmF1qz1f0lzzRjkDCt1L+zvH8z1UGoeHmRRCpg=" name="csrf-token" />
      </head>
      <body>
        <div class="header">
          <div class="container">
            <img class="logo" src="https://s3.amazonaws.com/codecademy-content/projects/3/bass-music/logo.svg"/>
          </div>
        </div>

This appeared to resolve the issue.

My index.html.erb file looks like this:

<div class="row">
  <%= @albums.each do |album| %>
  <div class="col-md-3">
    <%= link_to (album) do %>
    <div class="thumbnail">
      <img src="<%= album.cover %>">
      <div class="caption">
        <h3 class="title"> <%= album.title %> </h3>
        <p class="artist"> <%= album.artist %> </p>
      </div>
    </div>
    <% end %>
  </div>
  <% end %>
</div>

It's still dumping all of the Albums model data just after the loop which is still confusing me.


#5

Thanks, this helped me fix my layout.

The reason it is dumping all your data below the loop is because you are using the equals sign in <%= @albums.each do |album| %>. It should be

<% @albums.each do |album| %>

Without the '=' sign. The '=' sign tells it to print all the information out.