2

I have a theme and for a post page, I'm showing the image value if there is one.

I also have a plugin that renders a YouTube video and usage is like this: {% youtube id_12345 %}.

In my template file, would it be possible to reference the video value from the front-matter of a post and render it with the same plugin that I can use in my content?

Something like:

{% if post.video %}
  {% youtube {{post.video}} %}    # <-- this does not work
{% elsif post.image %}
  <img src="{{ post.image }}" class="post-image" alt="{{ post.title }}">
{% endif %}

Thanks!

Vallieres
  • 859
  • 7
  • 19

2 Answers2

1

Since variables are not compatible with {% %} calls, I ended up reproducing much of the plugin's functionality in this one line. I started with the BetterTube and modified it for my needs.

{% if post.video %}
  {% capture video_id %}{{ post.video | 
        replace: 'https://www.youtube.com/watch?v=','' | 
        replace: 'https://youtu.be/', '' }}{% endcapture %}
  <figure class='BetterTube' data-youtube-id='{{video_id}}' data-player-width='' 
  data-player-height='' id='{{video_id}}' style='padding-bottom: 56.25%'>
  <a class='BetterTubePlayer' href='http://www.youtube.com/watch?v={{video_id}}' 
  style='background: url(http://img.youtube.com/vi/{{video_id}}/hqdefault.jpg) 50% 
  50% no-repeat rgb(0, 0, 0);'></a><div class='BetterTube-playBtn'></div>&nbsp;
  </figure>
{% elsif post.image %}
  <img src="{{ post.image }}" class="post-image" alt="{{ post.title }}">
{% endif %}

I wished I could simply call the plugin, but sadly I don't think it's possible.

Vallieres
  • 859
  • 7
  • 19
0

I take it that you're using this plugin. I don't know much about writing plugins, but it seems to me like you can't use variables in it.

Maybe try this one instead? It seems like it supports variables.

That being said, I don't even think you need to go through the hassle of running a plugin for that. The following code should do the work just fine:

{% if post.video %}
  <iframe width="560" height="420" src="http://www.youtube.com/embed/{{ post.video }}?color=white&theme=light"></iframe>
{% elsif post.image %}
  <img src="{{ post.image }}" class="post-image" alt="{{ post.title }}">
{% endif %}
Maxime Kjaer
  • 762
  • 7
  • 13
  • Yes and no. :) I used a similar plugin but I modified it to display a figure and when clicking on the placeholder, it loads the video (much faster page loads like this). – Vallieres Nov 24 '15 at 13:26