A New Year, A New Responsive Dribbble Portfolio – Part 2 of 2

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:

Your file directory should 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:

 
<?php
 
require 'src/dribbble.php';
 
$dribbble = new Dribbble();
 
//////////////////////////////////////////////////////////////////////
 
//Dribbble User ID
$playername='mathelme';
//How many 'shots' would you like to display per page?
$perpage='12';
 
//Contact Info
$email='mat.helme@gmail.com';
$twitter='twitter.com/#/mathelme';
$facebook='facebook.com/mat.helme';
$linkedin='http://www.linkedin.com/pub/mat-helme/28/7b5/710';
 
 
/////////////////////////////////////////////////////////////////////
 
?>
 
<!DOCTYPE html>

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:

 
<ul class="menu">
 
     <li><a href="mailto:<?php echo $email ?>" class="email"></a></li>
     <li><a href="http://www.dribbble.com/<?php echo $playername ?>" class="dribbble"></a></li>
     <li><a href="<?php echo $twitter ?>" class="twitter"></a></li>
     <li><a href="<?php echo $facebook ?>" class="facebook"></a></li>
     <li><a href="<?php echo $linkedin ?>" class="linkd"></a></li>
 
</ul>

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:

 
<?php
 
                    $my_shots = $dribbble->get_player_shots($playername, 1, $perpage);
 
                    foreach ($my_shots->shots as $shot) 
                    {
                        echo '<a class="box" href="' . $shot->url . '"><h3>' . $shot->title. '</h3><img src="'. $shot->image_url . '" alt="' . $shot->title. '" class="pic" />' . '</a>';
                    }
 
?>

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:

 
<?php
 
require 'src/dribbble.php';
 
$dribbble = new Dribbble();
 
//////////////////////////////////////////////////////////////////////
 
//Dribbble User ID
$playername='mathelme';
//How many 'shots' would you like to display per page?
$perpage='12';
 
//Contact Info
$email='mat.helme@gmail.com';
$twitter='twitter.com/#/mathelme';
$facebook='facebook.com/mat.helme';
$linkedin='http://www.linkedin.com/pub/mat-helme/28/7b5/710';
 
 
/////////////////////////////////////////////////////////////////////
 
?>
 
<!DOCTYPE html>
 
<html>
 
<head>
 
	<!--Viewport-->
	<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
 
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
	<title>Dribbble Portfolio</title>
 
    <!--Google fonts-->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>
 
    <!--Main Stylesheet-->
    <link rel="stylesheet" type="text/css" href="css/style.css" />
 
</head>
 
<body>
 
	<header>
 
    	<h1 id="logo"><a href="#"><img src="images/logo.png" alt="My Logo" /></a></h1>
 
        <nav>
 
        	<ul class="menu">
 
                 <li><a href="mailto:<?php echo $email ?>" class="email"></a></li>
                 <li><a href="http://www.dribbble.com/<?php echo $playername ?>" class="dribbble"></a></li>
                 <li><a href="<?php echo $twitter ?>" class="twitter"></a></li>
                 <li><a href="<?php echo $facebook ?>" class="facebook"></a></li>
                 <li><a href="<?php echo $linkedin ?>" class="linkd"></a></li>
 
            </ul>
 
        </nav>
 
    </header>
    <!--end header-->
 
    <section class="half">
 
            <img src="images/me.jpg" class="main-image" alt="This is Me" />
 
    </section>
    <!--end main image-->
 
    <section class="half">
 
    	<h2 class="tagline">Check Out My Super Radical One Page Responsive Portfolio Which Pulls My Dribble 'Shots'. Get Gnarly!</h2>
 
    </section>
    <!--end tagline-->
 
    <div class="clear"></div>
 
    <section>
 
			<h1>Latest Work</h1>
 
 
			<div id="container">
 
 
                    <?php
 
                    $my_shots = $dribbble->get_player_shots($playername, 1, $perpage);
 
                    foreach ($my_shots->shots as $shot) 
                    {
                        echo '<a class="box" href="' . $shot->url . '"><h3>' . $shot->title. '</h3><img src="'. $shot->image_url . '" alt="' . $shot->title. '" class="pic" />' . '</a>';
                    }
 
                    ?>
 
 
			</div>
 
	</section>
    <!--end dribble content-->
 
    <div class="clear"></div>
 
    <footer>All RIghts Reserved <a href="#">www.website.com</a></footer>
    <!--end footer-->
 
    <!--js files-->
    <script src="scripts/jquery.js"></script>
    <script src="scripts/fitText.js"></script>
 
    <!--initiate fitText-->
    <script>
 
		$(document).ready(function() {
 
			/*FitText*/
			$(".tagline").fitText(1.1, { minFontSize: '20px', maxFontSize: '200px' });
 
		});
 
    </script>
 
</body>
 
</html>

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:

 
<!-- IE fixes -->
    <script src="scripts/html5.js"></script>
    <script src="scripts/respond.min.js"></script>
 
    <!--[if IE]>
      <link rel="stylesheet" type="text/css" href="css/ie.css" />
    <![endif]-->

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:

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from HTML, CSS or WordPress.

Start Learning

Treehouse

Our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world.

Comments

5 comments on “A New Year, A New Responsive Dribbble Portfolio – Part 2 of 2