Show off your records on your website

View the Project on GitHub papatoob/disCo

Welcome to the disCo

disCo is a jQuery plugin that enables you to display your (or anyone else's) record collection hosted on Discogs. If you haven't heard of Discogs, own a lot of music, and are at least a little nerdy you should seriously consider going there and putting your stuff together. The process of this is super comfortable, so it won't take too long (depending on the size of your collection). Once you're done you'll most definately feel the urge to let anyone know what you possess. And yes - size does matter.

If you own a website and want to show off your collection or at least your latest purchases (because you're that super famous DJ getting tons of new material every week), you can use disCo exactly for that.


It's a jQuery plugin, so simply using it is pretty basic stuff: get the plugin and put it some place reasonable within your site structure. After that, reference the resource like this:

<script src='/path/to/jquery.toob.disCo.js'></script>

There have been discussions where exactly to put this line of code for long time. I'm not an expert and don't want to judge or even argue, so I decided to put it at the end of my page (so loading it won't block anything, I guess).

Two steps left. First, create a <div class="myRecords"> element. You can put as much content in there as you like, for example:

<div class="myRecords" data-user="papatoob">
    <h3>My latest records</h3>
    <p>Here's what I recently added to my collection.</p>

You will realize the additional attribute data-user="papatoob" in there. This attribute tells the plugin whose collection to display. By specifying this for each element directly and not hard coding it within the plugin settings you're able to apply the plugin to multiple elements for different users with just one call. If you want or need to, you can use a different data- attribute; there's an option for this within the plugin's settings.

The resulting table will always be inserted at the end of the root element (the div you just created). And now finally call the plugin to work:

    $(document).ready(function () {
        $('.myRecords').disCo({results: 5});

And here is what you get (on my site with some styling): Screenshot of generated records table


You can also show off your wantlist data now (this might come in handy the closer you get to your next birthday). Just use another data attribute on your container element for this: data-collection="wantlist". As with the data-user attribute above you can change the name of the attribute within the settings.


There's a couple of settings available that have some effect on the output of the plugin's work, here they are including their default values:

What's next

I do have some ideas regarding additional features, but usually - after having achieved what I initially wanted to - I do not get back to those. But I'd of course be very happy about any contributions!