Bandcamp (and Faircamp) Embeds via Shortcodes in Grav

Testing out custom shortcodes for embedding media.

Preamble (Why)

I wanted to do something similar to what Ed Zitron will sometimes do at the start of his articles, and link to thing(s) I was listening to while writing these posts. I then thought: “I’ve seen Bandcamp have cute little embedded players around the place - I wonder if doing that is relatively easy”.

Turns out it’s actually super easy, because they have a whole embed customiser for every album! Easy, and very awesome.

That said, I’m not a huge fan of iframe embed syntax.

<iframe style="border: 0; width: 100%; height: 42px;" src="https://bandcamp.com/EmbeddedPlayer/album=1422080532/size=small/bgcol=ffffff/linkcol=0687f5/transparent=true/" seamless><a href="https://soundvision.bandcamp.com/album/superstructures">Superstructures by Jeremy Blake</a></iframe>

Sure, it’s fine, but… Shortcode syntax is just nicer, you know?

[bandcamp width=100% height=42 album=1422080532 size=small bgcol=ffffff linkcol=0687f5]

Since Bandcamp already provides a Wordpress-friendly shortcode snippet, I figured… Why not make a custom Grav Shortcode to mimic their existing format?

Technically speaking, you could survive with only the album ID (so simply bandcamp album=1422080532 if you wanted Absolute Minimalism), but it is a lot easier to just copy and paste from the customiser.

So. To examples!

Bandcamp

My Likely Go-to

What can I say, I like having the pretty pictures and the most-least amount of information all together. Standard.

slim

[bandcamp width=100% height=42 album=1422080532 size=small bgcol=ffffff linkcol=333333 artwork=none]

slim, w/ artwork

[bandcamp width=100% height=42 album=1422080532 size=small bgcol=ffffff linkcol=333333]

"artwork only"

[bandcamp width=350 height=350 album=1422080532 size=large bgcol=ffffff linkcol=333333 minimal=true]

standard

[bandcamp width=100% height=120 album=1422080532 size=large bgcol=ffffff linkcol=0687f5 tracklist=false artwork=small]

standard, big artwork

[bandcamp width=350 height=470 album=1422080532 size=large bgcol=ffffff linkcol=0687f5 tracklist=false]

standard, w/ tracklist

[bandcamp width=400 height=472 album=1422080532 size=large bgcol=ffffff linkcol=0687f5 artwork=small]

standard, big artwork, w/ tracklist

[bandcamp width=350 height=786 album=1422080532 size=large bgcol=ffffff linkcol=0687f5]

standard, tracklist only

[bandcamp width=100% height=472 album=1422080532 size=large bgcol=ffffff linkcol=0687f5 artwork=none]

Faircamp

After successfully getting the Bandcamp shortcodes working, I wondered if Faircamp offered embed support too.

It does! Only one option for this; the URL to the page belonging to the album (or track) you want to embed:

[faircamp url=theurlofthesite.com/albums/the-album-name]

The default and only option

Faircamp embeds are, it seems, based solely on their owner’s site.

[faircamp url=https://shop.basspistol.com/bpist-ep002/]

Future Development

I’d like to turn this into a fully-fledged plugin, so that I can set custom defaults in the admin panel rather than as hard-coded values. I think that’d also give me the opportunity to use Grav’s Edit Pro’s Shortcodes setup, which could be cool. Potentially leading to previewable displays in the editor window, without needing to save and refresh the page!

For now…

Custom Shortcodes Code

You need to have Grav’s Shortcode Core plugin installed, and to set the Custom Shortcodes option to the place where you’re going to store the shortcodes file. I store it in /user/custom/shortcodes.

Then, make a new catspawShortcodes.php file and paste the code in there:

<?php
namespace Grav\Plugin\Shortcodes;

use Thunder\Shortcode\Shortcode\ShortcodeInterface;

class catspawShortcodes extends Shortcode {
    public function init() {

        $this->shortcode->getHandlers()->add('bandcamp', function(ShortcodeInterface $sc) {
            $classes = "";
            $classes = $sc->getParameter("classes");

            $width = "100%";
            $width = $sc->getParameter("width");
            $width = (strpos($width, "%") === false)? $width."px": $width;

            $height = "120";
            $height = $sc->getParameter("height");
            $height = (strpos($height, "%") === false)? $height."px": $height;

            $album = "1422080532";
            $album = $sc->getParameter("album");

            $size = "small";
            $size = $sc->getParameter("size");

            $bgcol = "ffffff";
            $bgcol = $sc->getParameter("bgcol");

            $linkcol = "0687f5";
            $linkcol = $sc->getParameter("linkcol");

            $tracklist = "false";
            $tracklist = $sc->getParameter("tracklist");

            $artwork = "small";
            $artwork = $sc->getParameter("artwork");

            if(empty(trim($album))) return "";

            return '
            <div class="embed-bandcamp '.$classes.'">
                <iframe
                    style="border: 0; width: '.$width.'; height: '.$height.';"
                    src="https://bandcamp.com/EmbeddedPlayer/album='.$album.'/size='.$size.'/bgcol='.$bgcol.'/linkcol='.$linkcol.'/tracklist='.$tracklist.'/artwork='.$artwork.'/transparent=true/"
                    seamless
                ></iframe>
            </div>
            ';
        });

        $this->shortcode->getHandlers()->add('faircamp', function(ShortcodeInterface $sc) {
            $classes = "";
            $classes = $sc->getParameter("classes");

            $url = "";
            $url = $sc->getParameter("url");
            $url = rtrim($url, "/");

            if(empty(trim($url))) return "";

            return '
            <div class="embed-faircamp '.$classes.'">
                <iframe loading="lazy" src="'.$url.'/embed/all/" style="border: none; height: 49.6px; min-width: 480px;" title="Audio player widget"></iframe>
            </div>
            ';
        });
    }
}