Rails & Breadcrumb Options: Choose Gretel!

There are a surprising amount of options when adding breadcrumbs to your Ruby on Rails. From Ruby Gems like breadcrumbs_on_rails to Bootstrap's CSS magic, you can make it super simple or as fancy as you want. For my project, I decided to use Gretel. It ended up being a fun, semi-easy add, and I'll show you how I did just that and how I overcame a hurdle: breadcrumbs failing on nested routes.

First installing and setup was a breeze; I added the gem to my Gemfile and ran bundle i.

Easy peasy, next I used the command below to create the breadcrumb configuration file that Gretel would be using. And it did create the breadcrumbs.rb file in my config folder.

$ rails generate gretel:install

Following the README examples, I first added my root path or Home path, in my case: a Dashboard, and a path to my Artists index page to test out the code.

Now I needed to get some logic somewhere to display these breadcrumbs! Since this was a Ruby on Rails project, I was able to use the views/layouts/application.html.erb file and include the following line:

<%= breadcrumbs separator: " &rsaquo; ", style: :inline %>

This told the program: every time I call for "breadcrumbs," add a right angle bracket " > ", and style it 'inline.' There were a few options for breadcrumb styles, and I did check out Bootstrap since I was also using Bootstrap for the rest of my CSS. However, I did not like the boxy look with my already styled navbar. So I stuck with the 'inline' look.

Okay, I jumped ahead for a moment. How could I have compared the styles yet? I affixed the final bit of code needed to my artist index HTML page at the top!:

<% breadcrumb :artists %>

In this instance, my code was directly calling the :artists breadcrumb method. Since I did not require a class instance, I did not need to call one here, but my subsequential breadcrumbs did. Replace calling the method with the instance handled those. So did it all work? It sure did!

The ease ignited me! I was adding breadcrumbs everywhere! I could not be stopped. Or so I thought. I was nearly done when I realized that my URLs did not match my breadcrumb for some pages. Honestly, my navigation did not match my breadcrumb. It was my nested route.

In my project, users were able to view the photocards they created from their artists' pages. The users from the artist page would click the photocard to view it. The photocard belonged to the artist, and the artist has many photo cards. I created nested routes for them, so the URL was "/artists/id/photocards/id". Yet, the breadcrumb could only spit out:

Nothing in the README examples covered this particular case. The links to the additional Docs were dead. I found a blog that worked through adding Gretel, but they too did not cover this case, and their 2014 live code link was dead. I was finding dead end after dead end. I even spent a few hours attempting to use the Recursive Parent and Search URL examples. Facepalm! Of course, that would not work, especially how I was using them (I will not try to explain my craziness.).

After taking a break and a whole evening off, I thought of the answer just before I fell asleep, actually: helper methods! Luckily, I had set up omniauth previously for my project and had to look at my request.path a few times. More inspiration! I never thought I would wake up being excited to code.

Helper methods; if you never used them, start today! I did this for the first time, and I ended up making 13 total.

Back to the program, I decided to see if Gretel can see the URL and pull any params out like 'users' or 'artists.' If Gretel could see, I would have another step to take in debugging. At this point, I had no clue what to really do; I knew I needed to work with the tools I had and solve the puzzle before me. One could say I was hammering until something fit, but I really did feel like I was just tinkering until I heard it...click...

In my breadcrumbs.rb file, I added a 'binding.pry' just after my link command and refreshed my page:

crumb :photocard do |photocard|
    link photocard.title, photocard
    binding.pry
end

And in the terminal, it was easy to ask for the 'request.path'

Great, so could I also do...

request.path.include?("artists")

We took another step. I did not even try anything else; I decided to use this one line to make my helper method. I could have pottered around more to see if there were better things to ask for; however, I felt like Charlie and his Golden Ticket. I had a ticket out of this debugging mess! Yet, was this ticket truly golden or just a bag of mineral pyrite?

In my application_helper.rb, I created the simple method:

   def include_artist_path
        request.path.include?("artists")
    end

and added it to an if/else statement in my breadcrumbs:

crumb :photocard do |photocard|
    link photocard.title, photocard
    if include_artist_path
    parent photocard.artist
    else
      parent :photocards
    end
end

then clicked refresh & held my breath...3...4...3...2...1...

The epic victory pose I made could not have been more phenomenal. It seemed so simple yet so complicated, considering my rails experience consisted of just this project. When people tell you, "Coding has peaks and valleys," they were not kidding. I overcame this hurdle and presented a project I love. Gretel was an excellent choice for my breadcrumb needs as I didn't need much.

Maybe one day, I will fork my project and try out other breadcrumbs or give them a shot for the next project. Always try a new tool, I guess. I never know when it might be beneficial!