In the previous lesson we implemented the new Topic page and cleared out the orphaned pages. However our view still needs work, namely we need to implement a placeholder image for the posts and also get the icons working, as shown below:

Whenever you see broken image links in a view it typically means that Rails can't find the image in the asset pipeline. This is just a placeholder, in the future we'll have the featured image from the post (if there is one) replace it, but for now we'll just hard code an image here because I don't like seeing broken image links and I want to remember that an image call eventually needs to go here, so let's simply change:

<!-- app/views/topics/posts/index.html.erb -->
            <div class="article-image">
              <div class="mask"></div>
              <img src="images/common/article_image.png"/>
            </div>

To:

<!-- app/views/topics/posts/index.html.erb -->
            <div class="article-image">
              <div class="mask"></div>
              <img src="https://s3.amazonaws.com/rails-camp-tutorials/pro-rails/ui/article_image.png"/>
            </div>

Now the site has our placeholder image for each post:

With that looking better now let's figure out why the icons aren't showing up. Usually I prefer to use an icon library such as font awesome, however those are very easy to integrate and many production applications won't let you use icons that are as generic as that, so let's implement what the designer created for us.

The first spot to look is going to be in the view template where they're called to see what classes are being used:

<!-- app/views/topics/posts/index.html.erb -->

            <div class="article-stats">
              <ul class="pull-right">
                <li>
                  <span class="icon icon-view"></span>
                  <h2>347</h2>
                </li>
                <li>
                  <span class="icon icon-comment"></span>
                  <h2>347</h2>
                </li>
                <li>
                  <span class="icon icon-connection"></span>
                  <h2>347</h2>
                </li>
              </ul>
            </div>

As you can see we have three different icon class calls, so we can run a universal search to see where in the stylesheets these are called and the text editor will bring up this call for us:

/* app/assets/stylesheets/template/main.css.erb */
/* around line 1283 */

ul.articles .article-stats span.icon {

    width:30px;

    height:20px;

    float:left;

    background-image:url(../../images/common/icons.png) !important;

}

The designer is using this icons.png image file for all of the icon calls and if we open up the file at app/assets/images/common/icons.png we'll see them there. Since our main.css.erb file allows for embedded Ruby code we can call the asset pipeline from the file directly. So let's update the span.icon call as below:

/* app/assets/stylesheets/template/main.css.erb */
/* around line 1283 */

ul.articles .article-stats span.icon {

    width:30px;

    height:20px;

    float:left;

    background-image:url(<%= image_url('common/icons.png') %>) !important;

}

Now if you refresh the page you'll see that our icons are now showing up properly!

So that's all working properly and our Topic page is now something I'm happy with. One thing you may notice, if you try going to a URL such as http://localhost:3000/topics/my-title-99/ you'll get an error (since we removed that route). In the next guide we'll walk through how to get that action to redirect to our designed Topic page.

Code repo at this stage of the project

• Code