Bandcamp Tips: Custom Header & Image Maps

Thought I’d write a quick post after spending a couple of hours this afternoon faffing about trying to customise the custom header on my Bandcamp page with the addition of an image map.

It’s actually much easier than at first it may seem and with just a few simple steps you can have your Bandcamp page integrating with your main website in a far more effective form. The addition of a custom url for your Bandcamp page means you can use the site as a shop-window for your music which forms part of your main website as a sub-domain. This is what many artists are doing now to promote their music, using their own site as a hub and using external sites such as Bandcamp for additional functionality.

This is how I created the image map…

First you need the actual image for the custom header. I did a screen grab (command-shift-4) from the home page on my main website. Here is the crucial piece of information (which cost me two failed attempts): Bandcamp custom headers are required to be between 975 pixels wide and 40-180 pixels tall. What I should have done was check the dimensions when I did the screen grab. Third time lucky…

Here is what my custom header looks like. I included the menu at the top so I could superimpose the image map later…

I then went to the excellent Image Maps site and uploaded the image. I shan’t bother to fully explain how to use the site as it is incredibly easy to figure out and simple to use. Basically once the image is uploaded you can create boxes around whichever blocks you want to add links to and away you go. Starts looking a little like this:

Once you’ve finished marking up the image, just click the Get Your Code button and copy the generated HTML code to your clipboard.

Then you hop over to Bandcamp and upload your custom header image on the main page. The final step is to go to your Profile page and paste the HTML into the Use an image map box in the Custom Header section.

Then you’re laughing.

Hope that was useful to somebody. This post could’ve saved me a good hour this lunchtime 🙂

Tags: , , , , , , , , ,

This entry was posted on Friday, April 1st, 2011 at 3:07 pmand is filed under . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

13 Responses to “Bandcamp Tips: Custom Header & Image Maps”

Leave a Reply