CODEWITHSUNDEEP
ruby-on-rails
darkginger
darkginger

Reputation: 690

Looping over an element in Rails 4 that encloses other elements with loops

I am running issues using a link_to through a loop when there is another element encompassing the looped attributes.

Here's what I mean. I am showing posts for a blog in an image - this image will contain multiple elements of content, all of which are being pulled from my table in Rails.

With a stub as the link, this works fine, and it contains all of the image/post content within an <a> link: 

<ul id="hexGrid">
  <li class="hex">
    <a class="hexIn" href="#">
      <img alt="rss feed" src="http://www.example/image.png" />
      <h1>Business Business Business </h1>
      <p>Ipsum Incorporated is going to do something</p>
    </a>
  </li>
</ul>

That said, I want it to attach the associated link from my Stub column in my Post table, so I will adjust the code like so: 

<ul id="hexGrid">
  <li class="hex">
    <%= link_to post.slug, about_path(post.slug), class: "hexIn" %>
      <img alt="rss feed" src="http://www.example/image.png" />
      <h1>Business Business Business </h1>
      <p>Ipsum Incorporated is going to do something</p>
    </a>
  </li>
</ul>

Now I thought this looked great. I am still changing the link to be the hexIn class. However, the image posts end up being distorted and clearly wrong.

After looking at the source code, I noticed that Rails is successfully changing href to the link from the table (good!) but attaching a closing ` after the link. Since in the original code, this link remains open until line 7, I believe that's causing the issue. 

<a class="hexIn" href="/about"></a>

Is there any way I can prevent the dynamic addition of that </a> in line 3 to fix this? Or another method?

Upvotes: 0

Views: 26

Answers (1)

Abid Iqbal
Abid Iqbal

Reputation: 773

Try this one.

<%= link_to about_path(post.slug), class: "hexIn" do %>
      <img alt="rss feed" src="http://www.example/image.png" />
      <h1>Business Business Business </h1>
      <p>Ipsum Incorporated is going to do something</p>
<%end%>

Upvotes: 1

Related Questions