So my pins are working and people can upload images, but what if I want it to look good? Right now, it definitely doesn’t. So we’re going to use jQuery to make it look better.
jQuery Masonry is a script that will make my images dynamically resize based on position and the size of the browser to give it that “pinteresty” look. Since there is no gem for this, we have to download the script (jquery.masonry.min.js) from scratch. I download it and then drag it into the Vendor -> Assets -> JavaScripts folder. Then we have to ‘require’ it in our application. In App -> Assets -> Javascripts I open up application.js and add //= require jquery.masonry.min.js.
So it’s now installed, but I need to start working with it. I’m going to open up the Views -> pins -> index.html file. I basically get rid of everything because I no longer want the pins to be displayed in a handy table. I changed it to:
Then I open up the _pin partial and get rid of all of the table tags and put it all include a “box” div class. I notice that this screenshot is missing a ” after the box div class…be sure to add that. 😉
Finally, I open up pins.js.coffee under App -> Assets -> javascripts and then add the following bit of jQuery (actually CoffeeScript, and there is a nice converter from JS to Coffeescript here).
jQuery ->
$('#pins').imagesLoaded ->
$('#pins').masonry itemSelector: ".box"
This is basically telling Rails to run this jQuery after the page is loaded. The code for it (before converting to CoffeeScript) is here. If I wanted to do JavaScript instead I could have just made any new file in the javascripts folder, or the lazy way to do it would have been to put that code in the applications.js file instead.
Next we need to do some custom CSS styling. In the styles.css.scss file under App -> stylesheets, I need to add the following to the bottom:
/* Required for jQuery Masonry */
.box {
margin: 5px;
padding: 5px;
font-size: 11px;
line-height: 1.4em;
float: left;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 1px 1px 10px #444;
width: 214px;
}
.box img {
diplay: block;
width: 100%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.description {
margin: 10px 0 5px;
}
Next we have to add the “Add new Pin” link back because we deleted it. We’ll do this in the header by adding this to the header.html:
Next we wanted to add the person’s name who uploaded the pin. In _pin.html I added the following highlighted portion:
Next I want to make the image clickable to make larger instead of people having to click on the “show” link. We do this by taking the show link and applying it to the image.
So I change:
<%= image_tag pin.image(:medium) %>
To:
<%= link_to (image_tag pin.image(:medium)), pin %>
Next we want to reverse the order so the newer pins show the top. We do this in the controller for the pins. In the def for the index we change
@pins = Pin.all
to:
@pins = Pin.order("created_at desc")
Easy! Next I want the root of our application to go to the pins instead of that index page. To do this we open the routes.rb file under config -> routes. And where it’s currently set to:
root :to => ‘pages#home’
We change that to:
root :to => ‘pins#index’
Finally, we want to still use that fancy One Month Rails page if people are not logged in. Actually, I kind of don’t want that but it’s required for this damn tutorial so I’ll do it I guess… And I need more practice with partials. We just rename home.html.erb to _home.html.erb and now it became a partial. And then we have to call it in our index page that’s rendering the pins currently by adding <%= render ‘pages/home’ %> to the top of it. Bam, success.
Check out my site. It’s like a real working application now.
cuppy.code() 