Teddy Hyde is the mobile GitHub editor for Android. Especially suitable for authoring your Jekyll blog: upload images, write draft posts, and preview Markdown with a quick swipe. Download it on Google Play.
20 October 2018

This post details how you can take a Jekyll blog post and make it so that the post or page requires payment when the content is new. But, once a date you provide has passed, automatically make it free for everyone. Making information private until a certain date has passed helps motivate your readers who want to be the first to know

(As a prerequisite, you should enable your Jekyll posts to have the micro-contribution widget which is you can do on the admin.teddyhyde.com site)

Summary

Things we will be doing in this post:

  • Add YFML (Yaml Front Matter) to your post which specifies a date. Until that date, the content requires payment.
  • Modify the iFrame code to add the “pay until this date” parameter.
  • Extract the code into a new file. You have to use this trick because otherwise you cannot parameterize things on a file-by-file basis with Jekyll and Liquid Tags.

Ok, ready? Let’s go!

Add YAML Front Matter

Add this to your YAML Front Matter (YFM) for the post.

free_after: '2018/10/10'

That indicates that Teddy Hyde should request payment until that date.

Modify the Post Layout File.

You need to modify your _layout/post.html file to change the iFrame URL slightly.

Where you originally had the iframe right inside the post.html page you now need to include an outside page as an include. This is because layout files cannot access post variables (variables defined in the YFM, as we did with free_after), but you can push them into include files, as we will do here.

Create the iframe include file.

Change the iframe tags to look like this:


{% include iframe.html free_after=page.free_after %}

That pulls the free_after variable out and sets it to a variable that will be available to iframe.html.

Create the iframe.html file inside the _includes directory (NOT the _layout directory).

The iframe.html page looks like this:


{% if page.free_after %}
<div style="color: red; font-size: 0.8em">
This content will be free after {{page.free_after}}. Until then, please make a contribution
</div>
{% endif %}

<iframe
  height="150px"
  width="100%"
  frameborder="0"
  id="th"
  src="https://tx.teddyhyde.com/contribution/xrd.teddyhyde.io{% if page.free_after %}?free_after={{ page.free_after }}{% endif %}">
  </iframe>

This provides a message to the user if the date has not yet arrived, and then loads a page which will reveal the content if the date has passed and otherwise display the button asking for contribution.



blog comments powered by Disqus