A liquid tag to output a relative URL for assets based on the Jekyll post or page
Ruby HTML
Latest commit 248991c Jan 18, 2017 @samrayner committed on GitHub Merge pull request #8 from oturpe/page-asset-path
Page asset path - thank you @oturpe!

README.md

Jekyll Asset Path Tag

Jekyll Asset Path Plugin

A liquid tag to output a relative URL for assets based on the post or page, allowing you to organise your assets into subdirectories.

Syntax:

{% asset_path filename post_id %}
{% asset_path "filename with whitespace" post_id %}

Installation

Copy asset_path_tag.rb into /_plugins (Jekyll) or /plugins (Octopress)

Examples

{% asset_path my-image.png %}

in post 2013-01-01-post-title would output:

/assets/posts/post-title/my-image.png

in page my-first-page would output:

/assets/my-first-page/my-image.png
{% asset_path document.pdf /2012/05/25/another-post-title %}

would output:

/assets/posts/another-post-title/document.pdf

Useful for images and links in Markdown or HTML:

[Download script]({% asset_path my-script.js %})
<img src="{% asset_path my-image.png %}" alt="My Image" />

Given file _data/image.csv contains:

file
image_one.png
image_two.png

and post 2015-03-21-another-post-title contains:

{% for image in site.data.images %}
  {% asset_path {{ image.file }} %}
{% endfor %}

then the tag will output:

/assets/posts/another-post-title/image_one.png
/assets/posts/another-post-title/image_two.png

When used with post_id parameter, the tag is useful for showing asset from each page. Given the site contains pages:

post-title
another-post-title

then

{% for post in site.posts %}{% asset_path cover.jpg {{post.id}} %}{% endfor %}

on index.html will output:

/assets/posts/post-title/cover.jpg
/assets/posts/another-post-title/cover.jpg

Testing

The plugin can be tested by using the Jekyll test site in test_site directory. Generate the site with

bundle exec jekyll serve

then check the test results by browsing to http://localhost:4000.