In this guide we are going to go and update our source tracker for blogs and portfolio items. As a quick review our source tracker is our little helper that we can use to do something like this. Where a user can come to the site. If you send the link on something like Facebook you can see. q=facebook and it's going to store this value of q and then you can call this anywhere you want in the application and you'll know where the user came from. That's something that you may or may not want to use. I personally share quite a bit and I plan to share quite a few of my blogs on Twitter and different social media outlets so I think this is kind of a cool feature. Also, it gives you a good idea on how to work with session data.

Let's come to the application and decide where we want to put this. I'm going to pull it out of the home page so I'm going to for our application lay out. I don't really see a need for populating it here or on the about me page or anything like that. I'm going to pull it from that layout file. That's also one of the very nice things about having multiple layouts, is you can be more specific about what items you want to show up and which ones you don't. For the blog post I think I'm going to slide an alert in right here right under the about section right above topics that will say something like 'Hi welcome to the site. I saw you came here from Facebook or Twitter' and then, have a link to the contact us page. For the portfolios, I want to put it right here. I want to put it right above all of the content and I think that'll work out nicely. Let's see how we're going to do this. First, let's come and find it. It's been a while since we used it. Hopefully, we can track it down. If I go to the app helper we can see right here we have the source helper. First and foremost let's open up our layout files where this is getting called which is going to be our application layout file, our blog layout file and then our portfolio layout file. You can see that we have this called right here.

We have it called here and then in application we have it right here. Like I said I want to get rid of it from the application so I'm going to pull that out. Now we're done we're not going to worry about it now. In the other items before, we had the concept of passing in the layout that it was in and at the time that made sense. But now I don't really want to pass in the layout. Instead what I'd like to do is pass in the style. For example on our blog page I want to use a different kind of color and a different type of alert system then on the portfolio page. In order to do that because the content is going to be the same all I have to do is pass in the style I want and then it can dynamically change. Let's come to application helper, instead of layout name I'm just going to say styles and if session source this is still going to be the same. For the greeting I'm going to keep "Thanks for visiting me from wherever the source actually was". Let's remove the rest because we're not getting the layout name that was more just for testing. I'm going to add a comma after the source and say "please feel free to", then I'm going to use some string interpellation to say link_to and then contact me and pass in the contact_path and that should be all I need. There and then say "if you'd like to work together". That is more I think, a helpful message because if you're using this as a freelancer or to get a job this is the kind of message that someone would want to see and it gives a call to action where they can click on your link and go to your contact page. Inside of the content_tag I no longer want to use a tag. Instead I want to use a div. We're going to pass in the greeting. But one thing that we need to do is, because we put this link inside we have to say html_safe and then the class is going to be a set of styles so we don't say source greeting. We can just say styles and that's all we need to do. Because we have that source greeting. Let's do a universal search(Let me verify that I have the right spelling). I'm going to cut this, change this back to styles and the reason I'm doing this is because it's considered a poor practice to leave code in your application that you're no longer using. I'm going to do command 'shift f' and paste in source greeting. I don't want to replace it with anything I just want to see where it is. If I hit find 0 matches so it looks like we never actually implemented it. That's good. Now that we have this, when we call our source helper we need to pass in the styles. What we can do is come to our blog. I'm going to get rid of source helper here and instead I'm going to put this inside of the blog sidebar. Right here where I am planning on putting this is above topics and below about. Let's talk about how we can do this. I can give a div and then inside of this I can put in the source helper but I want to pass in the alert warning. Or in this case let's do just the alert-primary. I'm going to say 'alert alert-primary' and let's just take a look at how this is going to play out. Let's also put in our class module here. Coming back to this site if I hit refresh you can see that this kind of works. This is giving us exactly everything that we need though. The reason is because, let's see. Did I pass this in correctly? I have a sidebar module here and I'm calling alert alert-primary. Let's test this out and let's see in the bootstrap documentation if this is not correct https://v4-alpha.getbootstrap.com/components/alerts/ sometimes I'll call an older version of bootstrap classes just because I've been working with bootstrap for a number of years now. Taking a look at the alerts we have, oh! That's because there is no such class as a primary. There is alert-success. I kind of like this alert-info. Let's take a look at this one. If I paste this in...

Come back, hit refresh. There you go see how it gives us this nice kind of look and feel. I like that, we can play with the margin and some things like that. But I'm not worried about at the moment. For right now I just want to get it populated. That is on the blog side.

On the portfolio side I want to remove this from here as well. I want to put it below the mastheads. Right here we have our masthead and we also have that concept of an album. Let's do a quick universal search for, album and we can see that we have it right here in the portfolio index page. If I click on this you can see that we have album, text-muted and container. I think I just want to put it right here...

and now I'm going to say 'alert alert-warning'. I like that kind of brownish color. Let's take a look and see if this is working. If I hit portfolio now, you can see this does work. It says "Thanks for visiting me from Facebook. Please feel free to contact me if you'd like to work together." If I click on contact, it goes to the contact page. We don't have any errors. Nothing weird is showing up. We're still carrying that around that little session variable of source in our session. As we travel around if we go back to the blog you can see that, that is still there. But if it is a user who did not come from one of those urls, if you hit refresh then you can see that nothing pops up right there. That is perfect, that is exactly what we're looking for.

With that in place there's only one thing that I want to try out. You notice there's a little bit of space here and it's because it's making room for that div. If I switch back you can see that we have this weird padding here. I'm not a huge fan of that. If you right click to inspect it. I think this is going to reveal, yes. The sidebar module is taking that up, so I want our alert to go from side to side. Let's see if I come back to our blog sidebar if I just remove this entirely. This is going to create a div anyway, so before when we had the outside div, it was like a div inside of a div. I think that's what was causing the padding issue. Let's come back and hit refresh. There you go. We can see that, that's working a little bit better. It's not perfect and it's because now they're buddying up against each other. Let's see what this looks like here. If I hit refresh now. That works perfect so we're good here. But on this side we just need a little bit of margin on the top. Let's come to our blog sidebar and we can still have a div or I should say what we can do is just add the class here so I can say blog-sidebar-source. Let's come back to the blog.scss file, coming all the way down. If I add a custom class of blog-sidebar-source I should be able to give a margin-top: 20px. If I hit refresh Let's see if this gives us the space that we need. It does, perfect! If I come back where there is no source and hit refresh here nothing changes. I really like this implementation. The reason is because before when we had that wrapper div, what was happening is that div would be called whether a source existed or not. It could create some kind of confusing behavior where we'd end up with an empty div. Where here what is going to happen is this class is only going to be called and this entire line is only going to take up html space, if there actually is a source because if you come down into our application helper to our source helper. Notice that this content tag doesn't get created if there is no session source. This is going to be a lot better from an implementation standpoint. Let's just take a quick look at everything else and see if everything else is looking good. I like our blog sidebar. Our blog html side is good, our application helper is good. Everything else here looks fantastic, I like it!

In the next guide, we're going to integrate favicon. That'll be a fun episode. I can say git status, git add ., git commit -m "Updated source tracking feature", git push origin final-changes. We're getting very close to getting done with this application and getting it ready to deploy. Very nice work! I'll see in the next guide where we start to add a favicon.

Resources

• Source Code