将重复视图HTML重构到Ruby的每个循环中

Question

I have the following HTML code

<div class="col-xs-1"> 
    <img src="/assets/X.jpg" class="img-responsive" alt="X">
    <h6>X</h6>
</div>

<div class="col-xs-1">
    <img src="/assets/Y.jpg" class="img-responsive" alt="Y">
    <h6>Y</h6>
</div>

<div class="col-xs-1"> 
    <img src="/assets/Z.jpg" class="img-responsive" alt="Z">
    <h6>Z</h6>
</div>
...

As you can see there's a ton of redundancy (especially since it's actually repeating 10+ times not just the 3 I have here). I'm trying to think through how to make something like this into a DRY each loop, but am having a bit of difficulty.

I initially thought to just declare in the controller for this view:

@images = ["X", "Y", "Z"]

And then in the view do

<% @images.each do |image| %>
<div class="col-xs-1">
    <img src="/assets/#{image}.jpg" class="img-responsive" alt="#{image}">
    <h6>"#{image}"</h6>
</div>
<% end %>

But this syntax must not be right since all of the images show up broken. Any thoughts on what I'm doing wrong?

Also, if this turned out to be a not very efficient way of refactoring, I'm very open to suggestions!

Answer 1

You're expecting the #{image} to interpolate, but that code in image src , alt attributes are just text and not ruby. Same applies for text in h6 tag.

You need to use erb scriplets <%=...%> around them to output their values.

Update your view code with the following:

<% @images.each do |image| %>
<div class="col-xs-1">
    <img src="<%= "/assets/#{image}.jpg" %>" class="img-responsive" alt="<%= "#{image}" %>">
    <h6><%= "#{image}" %></h6>
</div>
<% end %>