Giter Club home page Giter Club logo

jekyll-asset-path-plugin's Introduction

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.

jekyll-asset-path-plugin's People

Contributors

bryant1410 avatar edisonchee avatar eliottwiener avatar gtwiggs avatar oturpe avatar samrayner avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.