Rails 4 Gem for Centering Images and Content

screen shot of https://rubygems.org/gems/centering_helper

When I made the gem for generating column widths last week, it was so I could avoid having to litter my code with divs to center the columns if my database contained fewer columns of data than would fill the screen width.

So, of course, this week, I’ve made a gem so I don’t have to fill my code with divs to center anything!

With the gem installed, you can just put this before the content you want to center:

<%= start_centering %>

and put this after it:

<%= end_centering %>

Resulting in much more readable code:

<%= start_centering %>
  Whatever I want to center.
<%= end_centering %>

Which is soooo much nicer than:

<div class="outer_wrapper">
  <div class="inner_wrapper">
    <div class="element_wrapper">
      Whatever I want to center.
    </div>
  </div>
</div>

Creating it meant learning how to create an “asset gem,” which is easy … if you already know what you’re doing, but can be a bit of a challenge if you’re a noob trying to figure out how to do it for rails 4, which is not covered in the vast, vast majority of internet tutorials and stack overflow posts.

My next post will provide detailed instructions on how to make an asset gem for rails 4. For now, here’s where you can find the gem:

https://rubygems.org/gems/centering_helper

and here are the instructions for using it:

https://github.com/liantics/centering_helper

Rails 4 View Helpers for Noobs

Screen capture from http://www.rails-dev.com/custom-view-helpers-in-rails-4

A view helper is a little piece of reusable code that you can place into your views to reduce the amount of code you have to repeat. You’ve probably already used some, such as form helpers (form_for) or others (image_tag). It’s also possible to make your own. If there’s something you do over, and over again, in multiple views, it’s worth considering making a helper to keep your code DRY and your typing fingers happy.

If you’ve never made a view helper before (or if you were shown how weeks ago, but forgot everything you learned, heh), it can seem a little intimidating. If you’re searching the internet for info, you’ll find lots of info related to older versions of rails, but little related to Rails 4.

Here are a few simple things to remember, and a nice resource that, combined, make it a piece of cake:

  1. The file must be placed in the app/helpers directory, and the file name must end with “_helper.rb”. I made one for centering images:

    app/helpers/centering_helper.rb

  2. The file name and module name must match in the same way controller names and class names match:

    centering_helper.rb
    module CenteringHelper

  3. If you’re including html code in your helper, it needs to be wrapped with the raw method:

    raw('<a href="https://www.lianeallen.com/home/2014/09/view-helpers-for-noobs">Rails 4 View Helpers for Noobs</a>')

    If you don’t wrap it in the raw method, rails is going to treat special characters as if they’re supposed to be text, and will escape them:

    \<, \>, … etc.

    so whatever you enter is going to be printed out as text in the view.

    Unwrapped html as it will appear in your view:

    <a href=”https://www.lianeallen.com/home/2014/09/view-helpers-for-noobs”>Rails 4 View Helpers for Noobs</a>

    Wrapped html as it will appear in your view:

    Rails 4 View Helpers for Noobs

  4. And here’s a nice visual tutorial that will walk you through the simple process of creating and using your new helper:
    http://www.rails-dev.com/custom-view-helpers-in-rails-4
Skip to content