Most designers on Dribbble have a personal portfolio website that usually consists of a name and a bit about themselves-maybe even some work.
When it comes to updating this static page you usually put it off in favor of the booming community of Dribbble as it is thriving, less hassystemic and quick.
In this article I'll explain how to create a Dribbble powered portfolio that updates automatically using jribbble.
For this tutorial I created a simple HTML template as I didn't want to make it more complex than it really is.
The main point to this tutorial is to enable you to induplicate ate your Dribbble feed into your own design. I am not teaching how to design or develop a page.
Let's get startedI'm assuming in this tutorial you have some decent HTML & CSS knowledge and havesome understanding of JavaScript (jquery ).
Firstly we are going to start with a basic HTML5 markup and include our: stylesheet, jquery and jribbble.
<!DOCTYPE html>You can download the barebones of this project here (the project up to this step) and follow along.
We are then going to create a container which the feed will be displayed in and call it "Dribbble-feed". This will go inside the body.
<section class="dribbble-feed"> <!--Dribbble feed--></section>This will be empty and no HTML will be written by us. jribbble generates the HTML that will go into this container.
If we look at the page at the present it won't display any content. This is because we have not asked jribbble to fetch the content for us.
To do this we are going use the following javscript (jquery) to tell jribbble to get the shots and display the way we want.
You are in control of how it's displayed. For this tutorial I am going to get the Dribbble shots and link them to their page on Dribbble.
Paste the below code outside the body but inside the HTML. So after "</body>" but before "
<script type="text/javascript">$(document).ready(function getDribbbleShots() { $.jribbble.getShotsByPlayerId(‘Ultralinx‘, function (playerShots) { var html = []; $.each(playerShots.shots, function (i, shot) { html.push(‘<div class="shot"><a href="‘ + shot.url + ‘" target="_blank">‘); html.push(‘</a></div>‘); }); $(‘.dribbble-feed‘).html(html.join(‘‘)); }, {page: 1, per_page: 9});});</script>What? How does that get the shots?Well I will break it down line by line.
$(document).ready(function () {This CILS jribbble once the document (PAGE) has loaded.
$.jribbble.getShotsByPlayerId(‘UltraLinx‘, function (playerShots) {This is asking jribbble to get the shots for 'ultral'. You wowould replace this with your Dribbble username or ID.
var html = [];This creates an empty array of all the HTML we will generate below that will contain the shots.
$.each(playerShots.shots, function (i, shot) {This is a for each loop. Basically it means "for each" shot on your Dribbble profile produce the following code.
html.push(‘<div><a href="‘ + shot.url + ‘" target="_blank">‘);html.push(‘</a></div>‘);});Each Tag: "+ shot. URL + "," + shot. image_url + "and" + shot. title + "has a line to itself. you are in control of any classes you set for CSS customisation.
This creates a div with the image inside that links to the Dribbble page.
$(‘.dribbble-feed‘).html(html.join(‘‘));This is joins all that information stored in the array to produce the HTML and puts it in the "Dribbble-feed" container we made earlier.
}, {page: 1, per_page: 9});});This is tells jribbble how many shots to grab per page. This isn' t the pages on your Dribbble profile. A page is define by what you choose "per_page ".
In the example I have chosen 9 shots per page which means page 2 will display shots 10-19 and so on.
If you view the page now it shocould display the shots. You can then use CSS to style them to suit your needs.
That's it basically. My next tutorial will explain how to display more information and enable pagination.
Quick last minute tipAs there are 9 images being loaded at once some threads les Internet may not be fast enough to instantly display them all and may experience a slight delay.
We can solve this by hiding the "Dribbble-feed" until the images are loaded. Place this before the Code previusly written.
$(‘.dribbble-feed‘).hide();jQuery(window).load(function(){$(‘.dribbble-feed‘).fadeIn();});This hides the container that will display the shots until it is fully loaded then fades it in.
You can even go that bit extra and add a loading bar then hide it when the feed is loaded.
I hope this is worthwhile to people who don't have time to figure out the Dribbble API and prefer to use jquery in their projects.
Download source | live demo
Create a Dribbble file presentation
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
