Moving forward ladies and gents we are onto round two of this two part tutorial. In part one we covered the HTML/CSS/jQuery of our one page responsive Dribbble portfolio site. If you missed the first post please check it out here. Now it’s time to convert HTML to PHP and use the Dribbble API to pull your data. Plus IE fixes.
HTML to PHP
First things first let’s turn our project from HTML to PHP. This task takes two easy steps. First, make sure we have our files in a php environment. Second change the file extension of the index file.
As most of you know, when you run PHP you need to be in a PHP environment such as a live server or a local server. I personally use MAMP as a test server before putting anything live. MAMP is for Mac users where as WAMP is for Windows users. These two solutions are super easy to install and operate. Also you have the option of using a live server.
Now that we have our PHP environment lets take our static HTML Dribbble Portfolio and upload it to our server. Since I’m using MAMP the default local host is ‘localhost:8888/’ and the directory is ‘Dribble-Portfolio/’. In the browser the direct path is ‘http://localhost:8888/Dribble-Portfolio/’. From here lets change the file extension of our index.html to index.php. When you refresh the page you will notice the url doesn’t change at all and the page still renders the same. This is exactly what we want.
Download the PHP wrapper for the Dribbble API
Thanks to Martin Bean for making this next step super easy. Martin created a ‘PHP wrapper for the Dribbble API’ which you can download at github. This allows us to access the Dribbble API with minimal code. Simply download the file from here and unzip it. Copy the ‘src’ folder inside the main folder and paste it in the same directory as our index.php. Your directory should now look like this:
Integrating Everything
Now it’s time to jump into some php code. First we want to add the following code to our header area right before the html doctype:
Lets briefly go over the code. We start off with an opening php tag. The next bit of code calls the ‘dribbble.php’ file which we placed in our directory and initiates its options for the Dribbble API. Directly under the ‘//Dribble User ID’ is where we specify which dribbble account we want to pull from. For example purposes I have used all of my credentials. My direct url to my dribbble account is http://www.dribbble.com/mathelme, so my player name is ‘mathelme’. Then below that is how many shots we want to display. I would recommend using ’12′. Lastly is the contact info. Again I have used my credentials for example purposes. Simply swap out my info with yours. Lastly we close the php tag.
Now that we have initiated all the php functions and variables lets swap out the data in our page. Our first step is swapping out our contact info. Simply highlight all the data between the ‘nav’ tags with:
All we are doing here is changing the ‘href’ ‘#’ link with the variables we set in the head of the page through a php echo statement.
Now we want to pull in the latest shots for our Dribbble user. Simply swap out the following code in between the id ‘container’ with:
This php code runs a loop and grabs the latest 12 shots from the Dribbble user and returns a linking title and image to Dribbble.
Your final index.php file should look something like this:
Congratulations you have successfully created a responsive one page Dribbble portfolio for Chrome, Firefox and Safari. As for Internet Explorer 8 and up we will need to add some additional code.
IE fixes
The fixes for IE aren’t going to be exact fixes but more or less simple solutions. Here is what we need to add directly below the main stylesheet in the head tag:
The html5.js file is to allow IE to support HTML5 elements. The respond.js file is used for media quires in IE, since they don’t support them. Lastly we use another style sheet specifically for IE since it doesn’t support CSS3 column-count or column-gap. Also we added CSS3pie to fix the rounded-corners.
Source Files
Role Those Credits:
Dribbble
jQuery
Fit Text
CSS3pie
HTML5.js
Respond.js
Treehouse