If you’ve came across Bandcamp pages which have menu and social media links in the header, you might have wondered how you can do that too. Well, I’m going to show you how you can with an image map in this guide.
Bandcamp gives you two options to control how the header banner uses links. That’s with either a single link or an image map. A single link is simple enough, people normally set this as the root link of their bandcamp page. An image map however, is a little more complex and requires some HTML. It works by assigning coordinates to define areas which allows you to include all sorts of different items such as menu items, social media and email links.
I’ll dive in now and show you a really easy method of creating an image map for your bandcamp page. This without the need of any HTML knowledge.
Preparing the Image
If we take a look at my Bandcamp page for Wired to Follow, you’ll notice that my header image is just set to link to the root of the page, wiredtofollow.bandcamp.com. Before we go and set it to be an image map, we need to go and edit the image to add the places where our links will be. I’m going to save the image and open it up in photoshop.
If you don’t have a header image for your Bandcamp page, this would be a good time to create one. Take note of the image size guide which is currently 975 pixels wide and 40-180 pixels tall. It can be jpg, gif or png file, and a maximum file size of 2mb.
Adding Link Ready Images
For this example all I want to do is add some social links to my header image. For your own header, you can of course add your own link ready images such as menu text items that would link off to other pages on your website (for example). You can see here, I’ve just added my social icons.
Creating an Image Map
Before we go and set that image to our Bandcamp page, we have to go and create the image map markup that will set those icons to links. Instead of creating this from scratch, I’m going to use an image map creator. Let’s use this one at https://www.image-map.net/
What we’re basically going to do is upload our image and define areas we can set as links. We’ll then get the image map markup code we can use for our bandcamp page. So let’s go ahead and hit that ‘Select Image from My PC’ button and upload our image.
Define Areas for our Links
Our image is loaded at the top and we’re now able to define some of our links. For our first link (YouTube in my example), click just outside of the icon to create a plot point and again to highlight its height. You can now click and drag this point over the icon to define an area.
Now we can set the link associated with this area as well as it’s title attribute. The title refers to what bit of text pops up when somebody hovers over the link so it’s best to be descriptive as possible. I also recommend setting the Target to “_blank” as this means when clicked, another tab is opened rather than being taken straight there – always good if they’re listening to the music!
Go through and add all of your links and don’t forget to add one for the rest of the header. Set that to the root page but don’t set the Target to “_blank” otherwise it’ll open a new tab each time it’s clicked.
Once done hit that ‘Show Me the Code!’ button and copy the code. We can now move back over to our Bandcamp page.
Setting the New Header and Image Map
The first thing we need to do is add our new header image. If you have an existing one click on the ‘x’ to remove it, otherwise click on ‘Upload Custom Header’.
Once the new header is added, go into the profile settings and scroll down to ‘Custom Header’. Choose ‘Uses an image map’ and then paste in your image map code into the text area. You may want to remove the mention of the creator at the top but it might be worth leaving in if you want to remember where you created it later on. I’d certainly remove the image source link as that’s not needed.
Once done, hit ‘Save’ and ‘OK’. You can now test out your new header. In retrospect I’ve probably made these icons a little too big and will most likely go back and shrink them down a bit. I’ll leave it up there as is for the moment in case anybody wants to check it out.
That’s it! Let me know your thoughts on this or if you’ve run into any issues. This is obviously a really simple execution but there are tonnes of ways you can use this really creatively.