Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

PHP

Posted by Vaughan Slater
Vaughan Slater
Courses Plus Student 3,337 Points

Linking Treehouse Badges?

Hey guy's,

I'm working on my own little portfolio, and I'd love to include a little bit about Treehouse and my progress with it. Seem's like a cool little thing not many people are doing.

So basically, I'm wondering if firstly; it's allowed to grab the badges from my profile and display them on a page that isn't treehouse? I havent read like, the entire terms and conditions.

Secondly, how would I go about doing this? Not sure how much freedom there is to do with a php include or if that's the correct way.

You can sorta see what I mean if you visit: http://vaughanslater.me/projectflyingninja/ and scroll to the bottom, where the little dark boxes are.

Thanks guys! Vaughan

13 Answers

Christer Nordbø
Christer Nordbø
2,133 Points
Christer Nordbø
Christer Nordbø
2,133 Points

Hi there Vaughan.

I have no idea about the policy of it myself - but they do "advertise" that you can put the badges on your portfolio to show of your progress.

Anyway! i created this for you: http://codepen.io/anon/pen/eAFGx (script)

Result: http://codepen.io/anon/full/eAFGx (full-page)

if you want the badges on another profile just change the content of the 'URL' parameter.

Hope this helps you! images are a bit big - but you can rescale them as needed :)

Ben Millen
Ben Millen
751 Points
Ben Millen
Ben Millen
751 Points

i want to be able to get the badges for real so i can sew em to my jumper just like i did in Cubs (boy scouts)

:D

Vaughan Slater
PLUS
Vaughan Slater
Courses Plus Student 3,337 Points
Vaughan Slater
Vaughan Slater
Courses Plus Student 3,337 Points

Thanks guys, I'd also love real badges haha.

Thank you very much Christer & Alex, I'll have to try figure out how it works! :)

Vaughan Slater
PLUS
Vaughan Slater
Courses Plus Student 3,337 Points
Vaughan Slater
Vaughan Slater
Courses Plus Student 3,337 Points

Sorry, one question with your jsfiddle @Alex it doesn't seem to work with my username/profile name?

Christer Nordbø
Christer Nordbø
2,133 Points
Christer Nordbø
Christer Nordbø
2,133 Points

Vaughan, It did not work on mine either!

Have a look at this: http://codepen.io/anon/pen/eAFGx

Implemented the CSS from psyne! Looks like something you could use on your page without editing the code now.

Full page: http://codepen.io/anon/full/eAFGx

Vaughan Slater
PLUS
Vaughan Slater
Courses Plus Student 3,337 Points
Vaughan Slater
Vaughan Slater
Courses Plus Student 3,337 Points

@Christer Thank's that's sweet! I want it so it only display's a certain amount at first, so as to not bulk up the page a user can use a button to display a hidden div with the rest.

I've tried using nth-child() but to no success, any chance you know? I'm probably doing it wrong!

EDIT: You can see if you go the link in my first post. I'm using the nth-child but I cant seem to just apply it to that div..

Christer Nordbø
Christer Nordbø
2,133 Points
Christer Nordbø
Christer Nordbø
2,133 Points

Would this help you? defaults to 5 badges.

http://codepen.io/Cnordbo/pen/FHmoG (script) http://codepen.io/Cnordbo/full/FHmoG (page)

I also did this: http://codepen.io/anon/pen/kIixw (script) http://codepen.io/anon/full/kIixw (page)

Vaughan Slater
PLUS
Vaughan Slater
Courses Plus Student 3,337 Points
Vaughan Slater
Vaughan Slater
Courses Plus Student 3,337 Points

@Christer You're brilliant. :D Thank you very much!

Christer Nordbø
Christer Nordbø
2,133 Points
Christer Nordbø
Christer Nordbø
2,133 Points

Vaughan, updated with a button to toggle the visibility and inline view of all the images.

Vaughan Slater
PLUS
Vaughan Slater
Courses Plus Student 3,337 Points
Vaughan Slater
Vaughan Slater
Courses Plus Student 3,337 Points

@Christer Oh that's brilliant, was just about to start that haha! Work's perfectly, bit of div clipping with the footer but brilliant! Thank's very much.

Christer Nordbø
Christer Nordbø
2,133 Points
Christer Nordbø
Christer Nordbø
2,133 Points

Your page looks great! :) What frameworks are you using ? :)

Vaughan Slater
PLUS
Vaughan Slater
Courses Plus Student 3,337 Points
Vaughan Slater
Vaughan Slater
Courses Plus Student 3,337 Points

Thank you. Trying to add more to it! :) Im just using good old HTML5BP

Id love to add more awesome, interactive stuff!