Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/paulrobertlloyd/jekyll-figure
A liquid tag for Jekyll that generates <figure> elements
https://github.com/paulrobertlloyd/jekyll-figure
jekyll-plugin
Last synced: 13 days ago
JSON representation
A liquid tag for Jekyll that generates <figure> elements
- Host: GitHub
- URL: https://github.com/paulrobertlloyd/jekyll-figure
- Owner: paulrobertlloyd
- License: mit
- Created: 2015-11-14T20:27:20.000Z (almost 9 years ago)
- Default Branch: main
- Last Pushed: 2024-06-24T09:59:15.000Z (5 months ago)
- Last Synced: 2024-10-23T09:47:47.048Z (20 days ago)
- Topics: jekyll-plugin
- Language: Ruby
- Homepage:
- Size: 19.5 KB
- Stars: 52
- Watchers: 2
- Forks: 7
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-jekyll-plugins - **Figure Tag** - figure](https://rubygems.org/gems/jekyll-figure)) -- A liquid tag for Jekyll that generates `<figure>` elements. (Figures & Captions)
README
# jekyll-figure
A liquid tag for Jekyll that generates `` elements.
[](https://rubygems.org/gems/jekyll-figure)
[](https://github.com/paulrobertlloyd/jekyll-figure/actions)
## Installation
1. Add `gem 'jekyll-figure'` to your site’s Gemfile and run `bundle`
2. Add the following to your site’s `_config.yml`:
```yaml
plugins:
- jekyll-figure
```
Note: If you are using a Jekyll version less than 3.5.0, use the `gems` key instead of `plugins`.
## Usage
This plugin provides a liquid tag that enables you to generate a `` element. It takes optional `caption` and `class` parameters.
```liquid
{% figure [caption:"Caption (markdown)"] [class:"class1 class2"] %}
Figure content (markdown)
{% endfigure %}
```
### Examples
In simplest usage:
```liquid
{% figure %}
Content
{% endfigure %}
```
```html
Content
```
You can provide a caption, for which any markdown will be rendered:
```liquid
{% figure caption:"*Markdown* caption" %}
Content
{% endfigure %}
```
```html
Content
Markdown caption
```
You can also provide a class name(s) for CSS styling:
```liquid
{% figure caption:"A caption" class:"classname" %}
Content
{% endfigure %}
```
```html
Content
A caption
```
The `caption` parameter also accepts liquid markup:
```liquid
{% figure caption:"{{ page.title }}" %}
Content
{% endfigure %}
```
```html
Content
The title of my page
```
You can also add labels and reference them:
```liquid
{% figure caption:"A caption." label:example %}
An example figure that can be referenced later.
{% endfigure %}
You can see an example in {% figref example %}.
```
```html
An example figure that can be referenced later.
Figure 1: A caption.
You can see an example in figure 1
```
The word ‘Figure’ in the figcaption is translated according to the `lang` you set in the yaml header of your post. If your language is not supported simple set `figure` to the yaml header of your post to the value you want to use instead of ‘Figure’.
## Configuration
Any markdown provided within the `{% figure %}` block is rendered using Jekyll’s Markdown parser, [Kramdown](https://kramdown.gettalong.org). However, this means images and other content will be wrapped within `
` tags, like so:
```html
```
To disable this behaviour, in your Jekyll configuration set the `paragraphs` value for this plugin to `false`:
```yaml
plugins:
- jekyll-figure
jekyll-figure:
paragraphs: false
```
Note however that this will remove *all* paragraph tags, even those nested within other elements.
## Testing
1. `bundle install`
2. `bundle exec rake spec`
## Contributing
1. Fork the project
2. Create a descriptively named feature branch
3. Add your feature
4. Submit a pull request