Shape 1 Shape 2 Shape 3

Post Audio

Kajabi has the ability to add downloads to a post to add to the students learning experience. If a download is an audio format Kajabi themes take that file and create an audio player so that the file can be listed to in the browser.

This is done by adding a combination of Liquid and Javascript code to check against the file type and then build out the audio player.

First in liquid we check against the downloads and create a count of the number of files are audio format.

{% for download in post.downloads %} {% if download.extension == '.mp3' %} <div style="display:none;">{% increment audio_count %}</div> {% endif %} {% endfor %}

We then check against the number of audio files and if we find that it is greater then 0 we render the markup for our audio player.

{% if audio_count > 0 %} <div class="audio"> <audio preload="auto"></audio> <ol> {% for download in post.downloads %} {% if download.extension == '.mp3' %} <li><a href="#" data-src="{{ download.url }}">{{ download.display_name }}</a></li> {% endif %} {% endfor %} </ol> </div> {% endif %}

Now that we have the markup rendered on the page we need to do some javascript magic to make the player look like a usable piece of UI. To do this we include two javascript files: audio.js and audio_player.js. These files can be found in the Cornerstone Starter theme:

https://kajabi-products-development.s3.amazonaws.com/free_themes/cornerstone-product.zip

Here on the UX Team, we are so grateful for your time and we look forward to making the process of developing Kajabi themes simpler than ever before!

If you have any questions, feel free to reach out to us at themes@kajabi.com

Join Feedback Community

Enter your email below so that we can give you access to the Theme Developer Feedback Community.