Adding SoundCloud embed widget to Pelican using Jinja and Javascript

Another little project that took me a while to figure out was getting a SoundCloud widget on the page without loading right away. This is tricker than I hoped and I wish there was a way I could do this without Javascript. I am sure there is a way, but I have not found it yet. The secret may lie it a:target selector, but we'll see.

SoundCloud widget

There are three options to choose for the SoundCloud widget depending on your account type. I prefered the Smaller HTML5 one, compared to the one that loaded if I used the plugin liquid_tags for soundcloud. So I set off to make my own. I'm not ready to write a full fledged plugin yet so I opted for Jinja

How it works

• custom metadata field for content soundcloud
• Jinja template which embeds the proper html
• CSS to render things pretty

mypost.md

Title: My post
soundcloud: 0123456

listen to this cool song!

The soundcloud metadata variable should be simply the id of the song you want the widget to load.

fragments/soundcloud.html - Jinja template

{% if article.soundcloud is defined and article.soundcloud|length > 0 %}
<script>
  function loadSoundCloud() {
    document.getElementById('soundcloud').innerHTML = "<iframe name='soundcloud2' width='100%' height='122px' scrolling='no' frameborder='no' src='https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/
    {{ article.soundcloud }} &amp;color=ff5500&amp;auto_play=false&amp;hide_related=true&amp;show_comments=false&amp;show_user=false&amp;show_reposts=false'></iframe>"
  }
</script>
<div markdown id="soundcloud" onclick="loadSoundCloud()">
  <div class="soundcloud-loader"></div>
</div>
{% endif %}

Above you can see the first line ensures that there is at least some soundcloud variable in the metadata.

Next, I add some javascript that adds a function to create an iframe with the proper url

The function replaces the innerHTML of the outer <div> that holds the placeholder image.

The added div, when clicked on runs the javascript function.

soundcloud css

.soundcloud-loader {
  display:block;
  box-sizing: border-box;
  width:100%;
  height:122px;
  max-height: 122px;
  border: 1px solid black;
  border-radius: 4px;
  background-image: url('/images/soundcloud-loader.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
}
.soundcloud-loader:hover {
  border: 1px solid #ff7256;
}

You can see that I'm simply adding a background, a border, and making it a certain size. On hover, it highlights the border. In hindsight, I coudl have done this very differently, however I tried to start with a css only method, but upon failure, I opted for the easiest next solution.

Future updates

I plan to write a plugin that allows me to place custom tag inside my content to put the soundcloud widget where I please in the document. At the moment, it always appears in the same place: the end of the content.

I also hope to find a way to do with without js since, if it can be done, it should, to benefit users who have js turned off. However I don't know what would happen if you load the widget without js. So I'm merely speculating about its worth.