Trying to add a plugin to my post


#1

Hello, I am trying to add this plugin to my blog post, but I am not sure how to get it working. I have put the plugin file in my ‘_includes’ directory, but step 3 says to put an hmtl snippet “at the bottom of my layout document”

What is my layout document? I searched around and found a “_layouts” directory that can be added for custom layouts, but right now I am just using the “post” layout (specified in my blog’s front matter).

Any direction for me would be awesome.

-Thanks!


#2

firstly, it is not a plugin; it is some jquery from what I can tell with just a quick look.

It sounds like you are using a gem based theme so you don’t have direct access to the layout?

Somehow you need to add this into a layout, ideally at the very bottom of each page - this loads jquery and then loads your inlcude which I assume is a bit of JS:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
{% include open-embed.html %}

what theme are you using?


#3

Continuing from where @rdyar stopped, I’ll provide a small walkthrough using Minima as the theme.
i.e Assume it is theme: minima in the config file.

To get the path to Minima’s files, run the following in your terminal and open the resulting path in your system’s file explorer:

bundle show minima
# example:
# /usr/local/lib/ruby/gems/2.5.0/gems/minima-2.4.1

The “post” layout document is simply the ~/minima-2.4.1/_layouts/post.html file.
Copy that file over to a _layouts folder in your project directory.

Now simply edit the file you just copy-pasted to add the “HTML snippet” to the end of your post layout.

Do note that since you added the snippet to just the post layout, only those documents that are using the post layout are able to render the media player.

Once you get comfortable with the above, you can experiment with adding the HTML snippet for all documents in your site and graduate to moving the snippet to the end of your default layout for perf improvements.


#4

I noticed recently you can even run bundle open minima :slight_smile:


#5

You nailed it! I am using minima and I was able to create a local post template and Jekyll was reading the local copy as you described. The open-embed plugin still didn’t work for me… But then I found a post of a guy explaining that markdown is just converted into html in the end and said I can just use basic html5 syntax right in my markdown file. I grabbed a super basic html audio embed code snippet and it is all up and running now:

<audio src="/assets/2018-03-21/name-of-song.mp3" controls loop> Unable to load song. </audio>

Thanks for the help everyone!

EDIT: I actually have been getting very inconsistent playback from the audio player. When going between two posts, the audio controller breaks… If I start the website up and go to only one of the two blogs, the song (unique to that blog) will play just fine. I can refresh the page, skip around in the song, and it all just works. The second I go to a different blog post, the audio controllers get messed up until I restart the server. The behavior is pretty consistent regardless of which blog post I start with.

Start on blog A, blog_song_A.mp3 works. Go to B, blog_song_B.mp3 works, but blog_song_A.mp3 is now broken until I restart the server.

–I go restart server–

Start on blog B, blog_song_B.mp3 works. Go to A, blog_song_A.mp3 works, but blog_song_B.mp3 is now broken until I restart the server.


#6

Thanks.
Yes, you can use HTML directly in your Markdown files. It makes sense if the snippet is going to be very different for each post. Otherwise, its just better (and easier) adding to a layout (therefore available to all documents using that layout.) and making per-page changes with Liquid variables.

For example, with the following in a layout,

<audio src="{{ page.audio_file | relative_url }}" controls loop></audio>

I can easily add audio to multiple posts by altering their Front Matter:

---
layout: post
title : Post One
audio_file : assets/2018-03-21/name-of-song-one.mp3
---
---
layout: post
title : Post Two
audio_file : assets/2018-03-21/name-of-song-two.mp3
---
---
layout: post
title : Post Three
audio_file : assets/2018-03-21/name-of-song-three.mp3
---

Whether they work as expected is beyond Jekyll’s scope (since the error is probably in the script / its related dependencies). You might have to inspect your Browser’s Console or Developer Tools to check for error messages.