If you didn't know, Casey was very kind and put together coding so you can include progress bars on your blog/webpage/etc. It uses a clever combination of javascript, CSS, and calls to the Ravelry API to pull information together.
Hey! Time for a Tech post that is a little more fun and just a tad more rewarding for non-Mac Admins. If you're like me and you're a Mac Admin and also happen to be a knitter, it'll be double the fun!
Lately I've been trying to consolidate the information I share from services I love, like Spotify (now I just do a Music Monday post), Pinterest (the lovely widget where you mouse-over and see the Pinterest image and can click through), Instagram (rotating slideshow of recent Instagram pics), etc. I've been trying to get Ravelry into the sidebar for a while, but the progress bar showing a bunch of stuff was just too busy for my tastes.
If you didn't know, Casey was very kind and put together coding so you can include progress bars on your blog/webpage/etc. It uses a clever combination of javascript, CSS, and calls to the Ravelry API to pull information together. You can grab a default copy, customized for your API key, from Ravelry.
There are three sections of code: the CSS (stylesheet… this is where the progress bar learns what fonts, colors, and sizes to use), the JavaScript and Dug.js template (a template that forms the layout of the progress bar by calling information from Dug.js), and then the script which is placed wherever you want the progress bar to display.
If you're a Blogspot user like I am, you actually just throw all of this code into an HTML widget. Add it to your sidebar or wherever you'd like it to appear.
That's really all you need to do to get the code working, which is great! But if you're like me, you want things to look integrated into your blog's template/aesthetic, so I went a few steps further to make it fit into my blog more seamlessly.
The first thing I wanted was to only display one project, the most recent one, in my sidebar. Not everyone will want to display only one project at a time, but if you do, it's useful to know that the most recent commit of dug.js includes a limit function. In git you can even see an example of dug.js using the limit function so you can see how it works.
As of the time I'm writing this article, the version of dug.js does not feature the limit function which was added to the most recent commit. You can grab the most recent version here and host it somewhere you can access it. I just threw mine on Dropbox.
So while the CSS makes things pretty, the dugjs-template is where you really control how everything is structured. Here is the default dugjs-template provided by Casey at Ravelry:
And here is how you add the limit function to control how many returned results display in the widget:
As you can see, there is just one tiny thing added, which is to make #projects into #projects|dug.limit:1. You can replace the 1 with whatever number you want.
To change the sizing of the widget itself, you have to adjust the CSS. Below is the original CSS provided by Casey at Ravelry. You'll notice that rav_project has a width of 77px, and that rav_photo_img has a width and height of 75px. You'll want to adjust these numbers to fit your sidebar.
The sidebar of my current template is 210px, so I made the rav_project width 210px. Since we want the image to be slightly smaller to fit inside the widget, I made the width and height of the rav_photo_img 208px. I added some additional lines to adjust the font and color of the text, because I wanted it to fit more with the fonts used throughout my site's template. Making those fine-tunings is up to you.
As you can see over to the right, I have a lovely little widget showing my most recent project. I haven't quite sorted out the image quality yet, and this is partially due to what image types are available through the API. You can change:
which is helpful when you upload your own images, but that image size is 75x75. I haven't found the right call to a bigger image yet. Hopefully that will be sorted out too, so the image quality is better.
Hopefully some more photo URLs will be added to the Ravelry API so the image quality will improve. In the meantime, this is a totally doable setup.
You can see the entire widget script on Git. Make sure you adjust the username and API key to fit what is provided on Ravelry. The CSS is based on my blogger template, so you'll probably want to adjust the CSS to match yours. I also added a line to the dugjs-template to center the project title name; you can remove that if you don't want it to display that way.
I can't provide a whole lot of support on how to use Ravelry's API, but you can check out the We <3 Progress Bars and Ravelry API groups on Ravelry for more help.
Lately I've been trying to consolidate the information I share from services I love, like Spotify (now I just do a Music Monday post), Pinterest (the lovely widget where you mouse-over and see the Pinterest image and can click through), Instagram (rotating slideshow of recent Instagram pics), etc. I've been trying to get Ravelry into the sidebar for a while, but the progress bar showing a bunch of stuff was just too busy for my tastes.
If you didn't know, Casey was very kind and put together coding so you can include progress bars on your blog/webpage/etc. It uses a clever combination of javascript, CSS, and calls to the Ravelry API to pull information together. You can grab a default copy, customized for your API key, from Ravelry.
There are three sections of code: the CSS (stylesheet… this is where the progress bar learns what fonts, colors, and sizes to use), the JavaScript and Dug.js template (a template that forms the layout of the progress bar by calling information from Dug.js), and then the script which is placed wherever you want the progress bar to display.
If you're a Blogspot user like I am, you actually just throw all of this code into an HTML widget. Add it to your sidebar or wherever you'd like it to appear.
That's really all you need to do to get the code working, which is great! But if you're like me, you want things to look integrated into your blog's template/aesthetic, so I went a few steps further to make it fit into my blog more seamlessly.
The first thing I wanted was to only display one project, the most recent one, in my sidebar. Not everyone will want to display only one project at a time, but if you do, it's useful to know that the most recent commit of dug.js includes a limit function. In git you can even see an example of dug.js using the limit function so you can see how it works.
As of the time I'm writing this article, the version of dug.js does not feature the limit function which was added to the most recent commit. You can grab the most recent version here and host it somewhere you can access it. I just threw mine on Dropbox.
So while the CSS makes things pretty, the dugjs-template is where you really control how everything is structured. Here is the default dugjs-template provided by Casey at Ravelry:
<script type="text/javascript" src="//js.ravelry.com/javascripts/dug.js"></script><!-- you can customize this template -->
<script id="dugjs-template" type="text/x-dug-template">
{{#projects}}
<div class="rav_project">
<a class="rav_title" href="{{url}}">{{name}}</a>
<a class="rav_photo rav_photo_count_{{photoCount}}" href="#"><img src="{{thumbnail.src}}"></a>
<div class="rav_bar_wrapper rav_bar">
<div class="rav_bar_fill rav_bar" style="width:{{progress}}%;"></div>
<div class="rav_bar_text rav_bar">{{progress}}%</div>
</div>
</div>
{{/projects}}
</script>
And here is how you add the limit function to control how many returned results display in the widget:
<script type="text/javascript" src="//path.to/js/dug.js"></script>
<!-- you can customize this template -->
<script id="dugjs-template" type="text/x-dug-template">
{{#projects|dug.limit:1}}
<div class="rav_project">
<div style="text-align:center !important;"><a class="rav_title" href="{{url}}">{{name}}</a></div>
<a class="rav_photo rav_photo_count_{{photoCount}}" href="#"><img src="{{thumbnail.src}}"></a>
<div class="rav_bar_wrapper rav_bar">
<div class="rav_bar_fill rav_bar" style="width:{{progress}}%;"></div>
<div class="rav_bar_text rav_bar">{{progress}}%</div>
</div>
</div>
{{/projects|dug.limit:1}}
</script>
As you can see, there is just one tiny thing added, which is to make #projects into #projects|dug.limit:1. You can replace the 1 with whatever number you want.
To change the sizing of the widget itself, you have to adjust the CSS. Below is the original CSS provided by Casey at Ravelry. You'll notice that rav_project has a width of 77px, and that rav_photo_img has a width and height of 75px. You'll want to adjust these numbers to fit your sidebar.
<style type="text/css" media="screen">
/* You can customize the CSS below if you like*/
.rav_project {
margin-bottom: 5px;
width: 77px;
overflow: hidden;
}
.rav_title {
font-size: .9em;
}
.rav_bar {
line-height: 1.3em;
height: 1.3em;
text-align: center;
}
.rav_bar_wrapper {
position: relative;
background-color: #eee;
border: 1px solid #aaa;
}
.rav_bar_text {
text-align: center;
font-size: 11px;
position: relative;
}
.rav_bar_fill {
position: absolute;
background-color: rgb(144, 238, 144);
}
.rav_photo {
display: block;
margin-top: 5px;
border: 1px solid #aaa;
border-bottom: none
}
.rav_photo, .rav_photo img {
width: 75px;
height: 75px;
}
.rav_photo_count_, .rav_photo_count_0 {
display: none;
}
</style>
The sidebar of my current template is 210px, so I made the rav_project width 210px. Since we want the image to be slightly smaller to fit inside the widget, I made the width and height of the rav_photo_img 208px. I added some additional lines to adjust the font and color of the text, because I wanted it to fit more with the fonts used throughout my site's template. Making those fine-tunings is up to you.
As you can see over to the right, I have a lovely little widget showing my most recent project. I haven't quite sorted out the image quality yet, and this is partially due to what image types are available through the API. You can change:
<a class="rav_photo rav_photo_count_{{photoCount}}" href="#">
<a class="rav_photo_square rav_photo_count_{{photoCount}}" href="#">
which is helpful when you upload your own images, but that image size is 75x75. I haven't found the right call to a bigger image yet. Hopefully that will be sorted out too, so the image quality is better.
Hopefully some more photo URLs will be added to the Ravelry API so the image quality will improve. In the meantime, this is a totally doable setup.
You can see the entire widget script on Git. Make sure you adjust the username and API key to fit what is provided on Ravelry. The CSS is based on my blogger template, so you'll probably want to adjust the CSS to match yours. I also added a line to the dugjs-template to center the project title name; you can remove that if you don't want it to display that way.
I can't provide a whole lot of support on how to use Ravelry's API, but you can check out the We <3 Progress Bars and Ravelry API groups on Ravelry for more help.
Write a comment
Post a Comment