mrryanjohnston

Ever wanted to know how to make a sweet rotator in Drupal? Of course you have. I fooled around with a couple of different modules, followed some tutorials, and added some custom tweaks to get just what I was looking for. BELOW IS TEH AWESOMEZORZ. DRUPAL HACKERS IN TRAINING, PREPARE FOR GLORY!

First, grab the following modules:
Flag – This will allow us to flag content to be placed into the rotator.
Views – This allows us to create a “view” of the posts marked as featured. If you don’t know what the Views module does, I highly recommend playing around with it first (if anything, for your own benefit).
Views Slideshow – This allows us to display the posts within the view using a slideshow-esque presentation sequence.
Chaos Tools – Required by Views.
Libraries – Provides an API for Drupal to load libraries from the sites/all/libraries folder.

This might be as great a time as ever to download and use the command line tool Drush. Either way, download those modules and then enable them. Additionally, enable the “Views UI” module so that we can create views with the assistance of the views gui as well as the “Libraries API” and “Views Slideshow: Cycle” modules.

“Views Slideshow: Cycle” makes use of the “Libraries API” to load a jQuery library. This is what powers the slideshow. Grab that from here. Put this file into the folder `sites/all/libraries/jquery.cycle.` You may have to create this folder. (Quick Download link from GitHub).

Now, create whatever content type that you’re going to use in your slideshow. If you’re doing, for instance, a recipe website with pictures of your delicious dishes, you could name this “Recipes.” Do this at `admin/structure/types/add`. The only required fields that you add for the sake of this tutorial are a title, body, and image field. Make the image field whatever size you’d like, though I’d recommend getting one that will scale to 500×450 pixels (once again, only for the purposes of this tutorial). To be on the safe side, you should also require that the minimum size for an image be 500×450. This will ensure that we don’t have any funkiness when it comes to scaling and cropping the image for the slideshow.

Now go to `admin/config/media/image-styles/add` in order to add a new “style” of image. We’re going to use this style to make sure all of the images for the slideshow come out to be the same. This will make the slideshow look nice and smooth. Choose to “Scale and Crop” the image to 500×450 pixels.

Next, create a flag that will be used to mark our recipes as featured. Go to `admin/structure/flags/add`. This will be a “Node” type flag. Make it a global flag. Only allow your content managers (whatever role you may have assigned to them) flag recipes as such; you don’t wish to allow all authenticated users to make recipes featured or not. That’d be silly. Make sure you choose recipes as the content to flag.

Now, create a new block view with the slideshow format. Make sure you choose Recipe as your node type. First, under “Advanced” on the right side, Add a Relationship. Make sure “Include only flagged content” is checked. Choose “Flags: Node flag.” Choose the “Featured Recipe” flag. Make sure to choose “Any user.”

On the left, remove the only sort criteria there. We’re going to make it so that the Featured Recipe Rotator order is only determined by the time which the Recipe was flagged. If you want, you can obviously make a different sort order. This one makes the most sense, in my opinion, and gives content managers the most control. Add a sort criteria for “Flags: Flagged time.” Choose “descending.”

You can choose to filter by Node Type to be double sure that we’re only grabbing recipes. Add a filter for “Content: Type.” Select “Is one of” and “Recipe.”

Now for the interestin’ stuff. Add the following fields:
Content: Title
Content: Food Image
Content: Body
Global: View result counter

Go through the fields, deselecting “Label” for each, until you hit “Body.” Choose to “Trim” this (or Summary if you got fancy) to a given amount of characters. Under “REWRITE RESULTS,” choose to “Trim this field to a maximum length.” I chose the same value from the above “Trim.” I left “Trim this field to a maximum length” and “Add an ellipsis” checked. At “Food Image,” make sure you choose the Image Style that you created. At “Global: View result counter”, don’t display a label. Also, choose to exclude this from the display.

Under “Format” on the left, click “Settings” next to “Slideshow.” Scroll to the bottom of this window and select “Pager” under “Bottom Widget.” Choose “Global: View result counter” and “Activate Slide and Pause on Pager Hover.”

Save the view. Go to `admin/structure/block` and place your block somewhere you’ll be able to find it. I chose to put it into the “Content” area. I also went through little extra bits to only display it on the front page. To do this, select configure for that block and select “Only the listed pages.” Enter “” into the textarea. Save the block.

Anywho, we need to add some content and then flag it! Go to `node/add/recipe.` Get out your best recipes, folks. Spend a few hours baking, then take pictures of your results. Alternatively, if you’re lazy, Google image search for things like “Chicken Pot Pie” and “Stir Fry Chicken.” Save these posts. You will then be directed to the nodes themselves. Scroll to the bottom and “Flag” them. Rinse and repeat.

Now, go take a look at your pretty slideshow on your front page! Looks pretty nice, right? In order to make it look “even nicer,” we’ll apply some CSS styles:

/* This file will hold the main styles for your website. */                                                                                                    
                                                                                                                                                               
/* Featured Recipe Rotator */                                                                                                                                  
/* This should allow us to move stuff around within the block itself */                                                                                        
#block-views-featured-recipe-rotator-block .view-content {                                                                                                     
  position: relative;                                                                                                                                          
}                                                                                                                                                              
/* This puts a background slightly transparent and changes font sizes */                                                                                       
#block-views-featured-recipe-rotator-block .views-field-title {                                                                                                
  background-color: rgba(0,0,0,.65);                                                                                                                           
  padding: 10px;                                                                                                                                               
  width: 480px;                                                                                                                                                
  font-size: 1.3em;                                                                                                                                            
  position: absolute;                                                                                                                                          
}                                                                                                                                                              
#block-views-featured-recipe-rotator-block .views-field-title .field-content a {                                                                               
  color: #f7f7f7;                                                                                                                                              
}                                                                                                                                                              
/* Pager area */                                                                                                                                               
#block-views-featured-recipe-rotator-block .view-content .views-field-counter .views-content-counter {                                                         
  background-color: rgba(0,0,0,.65);                                                                                                                           
  float: left;                                                                                                                                                 
  width: 20px;                                                                                                                                                 
  height: 20px;                                                                                                                                                
  padding: 5px;                                                                                                                                                
  color: #f7f7f7;                                                                                                                                              
}                                                                                                                                                              
#block-views-featured-recipe-rotator-block .view-content .views-slideshow-controls-bottom {                                                                    
  position: absolute;                                                                                                                                          
  width: 584px;                                                                                                                                                
  bottom: 58px;                                                                                                                                                
  right: -5px;                                                                                                                                                 
  z-index: 10;                                                                                                                                                 
  text-align: center;                                                                                                                                          
}                                                                                                                                                              
#block-views-featured-recipe-rotator-block .view-content .field-content img {                                                                                  
  height: 450px;                                                                                                                                               
}                                                                                                                                                              
#block-views-featured-recipe-rotator-block .views-field-body {                                                                                                 
  background-color: rgba(0,0,0,.65);                                                                                                                           
  padding: 10px;                                                                                                                                               
  width: 480px;                                                                                                                                                
  position: absolute;                                                                                                                                          
  bottom: 0px;                                                                                                                                                 
}                                                                                                                                                              
#block-views-featured-recipe-rotator-block .views-field-body .field-content p {                                                                                
  color: #f7f7f7;                                                                                                                                              
  padding: 0px;                                                                                                                                                
  margin: 0px;                                                                                                                                                 
}

Yes, the interface design leaves much to be desired. I wanted to push this puppy out for the world to see. I was too anxious… I couldn’t help myself!

Dramatics aside, go check out the first official (as I’m calling it) Alpha release of Rock, Paper, Scissors, Node! Some of the changes in this release:

• Rounds: Every week, a round begins. Each day of the round (Sunday through Friday), users are granted 10 round plays. They use these round plays against other players. On Saturday, no round plays are given and the winners are determined! 1st, 2nd, and 3rd place (as determined by whoever has the most wins) get trophies added to their stats page. Yay! How do they determine tie breakers? Heh… I don’t know yet. If you tie, you might get screwed out of a trophy for right now. Sorry!
• Interface: This release bolsters a slightly improved interface. I made the CSS a little more manageable, though it still has a long way to go. I added a checkbox so that people using modern browsers could elect to hear a sound upon each count-down of the timer. The stats pages are a bit more fleshed out, though still lacking. I use the Google ChartAPI to show sweet graphs for each user.
• OAuth Logins: Users can login with Twitter, GitHub, or site-specific password credentials. This once took me a while to understand even though it was wrapped up quite nicely in a node.js module called mongoose-auth.
• Custom Trophies!: Trophies that you can win are going to be fairly unique in the future. The trophies that you can win while in this iteration, the alpha medals, are limited time only; these user profiles will be the only ones to win after I’m done with this phase. This will make the game a bit more enjoyable to play.

I made use of some pretty cool modules with this release. Go check out the code and see the Readme.md for credits.
As a side note, I’ve done some pretty cool stuff at ONS recently. I’ll post a bit about them next time.

Just playing on the node.js repl, I found this URL here: http://stackoverflow.com/questions/359494/javascript-vs-does-it-matter-which-equal-operator-i-use

The special case is when you compare a string literal with a string object created with the String constructor.

"abc" == new String("abc")    // true
"abc" === new String("abc")   // false

Here the == operator is checking the values of the two objects and returning true, but the === is seeing that they’re not the same type and returning false. Which one is correct? That really depends on what you’re trying to compare. My advice is to bypass the question entirely and just don’t use the String constructor to create string objects.

I thought this was interesting, so I tried it out on the node.js repl:

> typeof new String("test")
'object'
> typeof "test"
'string'
> var myString =  new String("test")
> myString
{ '0': 't', '1': 'e', '2': 's', '3': 't' }
> var myOtherString = "test"
> myOtherString
'test'

Interesting: creating a string with `new String()` creates an object, whereas creating a literal string creates a “string” type.

Today was an interesting day. It started off on a high note; a good day at work, came home deposited some checks, then finally pushed out RPS to the interwebs and had some fellow noders test it out (Thanks guys!).

Then I crashed and burned when I became far too tired and tried trouble shooting an error for several hours when it turned out to be a missing right paren.

Anywho, check out the two repos:
https://github.com/rjohnston/rock-paper-scissors-node
https://github.com/rjohnston/svn-monitor-node

Also, check out the first release of RPS!
http://rockpaperscissors.nodester.com

Thanks, Nodester, for the free hosting!

Me and two other guys, Victor and Aleksey, have begun plans for a node.js project. I’m quite excited because this is mostly going to be an exercise in learning for me; I”m pretty sure these guys have a much better handle on what we’re doing than I do . It’s hard to believe, but I really only started coding stuff in JavaScript a month ago. Already, though, I’ve messed around with more libs than I think I’ve dealt with in my life. Be on the lookout on this blog over the next few weeks (heh) for updates as far as that goes.

I’m starting to get settled in to my job at ONS. The staff is very friendly, my co-workers and boss are all very helpful and inviting, and it’s a big boy job! Yay!

Only thing to do now is plug forward. I need to find housing in the next few weeks; the lease on my current dwelling will be up come the end of July and I’m going to move closer to work.

Also, I lol’d when I heard “Ubuntu Natty.”

This is my first blog in quite some time. If you choose to follow this blog, you’ll get my personal experiences with computers, coding, CrossFit, Minecraft, and life in between. For now, just think of this as a personal dumping grounds for what I may be working on at the time.

I missed my second PHP meetup in a row. Boo. Originally I had thought the meeting place was far closer to my home, but it turns out it was a bit further away, and time was not on my side. I’m really hoping I get the chance to go and talk/listen to some professional PHP programmers in the area come next meeting.

I just finished up Pedro Teixeira‘s Node video on sessions this evening. I’m hoping to play around with that a little bit tomorrow after work. Before that, I’m going to make a bit of headway into a small .Net project at work. It’ll be my first whack at hacking around with an actual .Net application. Woo woo!

I’m also attempting to learn a bit of C++ on the side. I never had a chance to learn it in school; high-school didn’t offer the right courses, and I mostly took Java and PHP courses in college. I had tried learning it in the past on my own, but I was much younger and the concept of pointers/references vs values eluded me. C++ seems like a really cool language, so I think I’ll enjoy hacking around with it in the future.

Sorry that this post is a bit boring. I’ll attempt to make future posts more lively and exciting.