SFCMiguel
(Sérgio)
January 30, 2017, 1:01pm
1
Hi guys,
I’m new in this webflow world, I’m trying to understand if exists any way to feed a webflow portfolio from a dribbble account.
I’m using this template and were you see the Recent Works I would like to have my last dribbble uploads
Dribbble API Docs:
http://developer.dribbble.com/
From what I’ve seen I didn’t find any what to do it, anyone here knows how to do it?
Thank in advance
jorn
(Jörn)
January 30, 2017, 1:21pm
2
I don’t about the API but have a look at Zapier. You can fill a cms collection on Webflow via Zapier and different services.
1 Like
SFCMiguel
(Sérgio)
January 30, 2017, 8:59pm
3
Thanks Jorn,
I tried, but I had and error in the last step, I need to look at it with more time.
Although, how can I do that in the Webflow Collections? When I create a collection I didn’t any options that allows me to use any external service.
I was thinking the same thing, but I don’t think you can have images over API as of yet
samliew
(webflowexpert.com)
January 31, 2017, 2:09am
5
I’m using https://lab.tylergaw.com/jribbble/ for Fixx
/* ===== Load projects from dribbble ===== */
$.jribbble.setToken('tokenKeyGoesHere');
$.jribbble.teams('fixxdigital').shots().then(function(shots) {
var html = [];
for(i=0; i<shots.length; i++) {
var shot = shots[i];
// Select a tag
var selTag = '';
for(j=0; j<shot.tags.length; j++) {
var tag = shot.tags[j];
if( tag == 'web' ||
tag == 'website' ||
tag == 'ios' ||
tag == 'mobile' ||
tag == 'ui' ||
tag == 'ux') {
selTag = tag;
break;
}
}
// Skip project if not tagged properly
if(selTag == '') continue;
// Format the tag
selTag = selTag.replace('-', ' ');
selTag = capitalizeEachWord(selTag);
selTag = selTag.replace(/web$/i, 'Website');
selTag = selTag.replace(/mobile$/i, 'Mobile App');
selTag = selTag.replace(/ios/i, 'iOS');
selTag = selTag.replace(/ui/i, 'UI');
selTag = selTag.replace(/ux/i, 'UX');
selTag = '<div class="btn-tag" href="#">' + selTag + ' Design</div>';
html.push('<div class="project-slide"><a class="cage" href="'+shot.html_url+'" target="_blank"><div class="photo" style="background-image:url('+shot.images.normal+');"></div><div class="project-title" title="'+shot.title+'">'+shot.title+'</div><div class="name"><div class="face"><div class="face-img"></div><div class="personname">Fixx Digital</div></div></div>'+selTag+'</a></div>');
}
// blanks required for slideshow
html.push('<div class="project-slide"></div>');
html.push('<div class="project-slide"></div>');
html.push('<div class="project-slide"></div>');
$('.projects-slideshow').html(html.join(''));
initProjectsSlider();
});
3 Likes
jorn
(Jörn)
January 31, 2017, 6:38am
6
Looks like Samuel nailed it and I guess you gonna try that
Regarding Zapier and Webflow. You don’t see any options on the Webflow side because you granted Zapier access to your Webflow account. Zapier fills your collection for you with what you told the zap to do.
Hope you get this to work.
SFCMiguel
(Sérgio)
January 31, 2017, 11:53am
7
Every time I tried I have this error
1 Like
jorn
(Jörn)
January 31, 2017, 12:54pm
8
I’m not sure about that. Don’t have a Dribble account so I can’t try it. I did try Shopify with Zapier and I didn’t manage to pull an image either. I could fetch a img url, maybe with a embedded img code and a add field to that would work?
If you could fetch the img url try this. Make url field in you collection and get the img url from Dribbble via Zapier. Then embed custom code to your collection template and add a img tag. Then for the img url you add that field from your collection.
Makes sense?
system
(system)
Closed
April 1, 2017, 10:01am
9
This topic was automatically closed after 60 days. New replies are no longer allowed.