paulrobertlloyd/jekyll-figure

A liquid tag for Jekyll that generates <figure> elements

Paul Robert Lloyd

👋 Hi, I’m Paul, an independent designer, writer and occasional speaker based in Brighton, England. I work with public sector organisations to help them design and deliver brilliant digital services.

Learn a little about me and how I like to work.

Personal projects

• Personal website, there are many like it, but this is mine.
• Indiekit, a Node.js server with all the parts needed to publish content to personal websites and share it on social networks.
• Bradshaw’s Guide, a digital revival of a Victorian favourite.
• Classnames, a source of inspiration for naming things.

Contributor

• Multipack, a community of web designers and developers in the West Midlands.
• X-GOV.UK, a collection of projects useful for those working in government, but not linked to GOV.UK in an official capacity.

jekyll-figure's Issues

Does not render on serve -w

Hi there,

I usually use bundle exec jekyll serve -low when I create new posts to see how it acutally looks like. The figure environment in the html is rendered great by the first rendering, but for any unknown reason the figure html tag is not there when changing something in the file, and jekyll renders it again.

What can i do here? I read your code, but cannot figure out whats wrong...

• Martin

Add support for images with reference-style URLs

Right now jekyll-figure strips <p> markup surrounding images with inline-style URLs:

![Image](/path/to/image.jpg)

It would be great to add support for images with reference-style URLs:

![Image][image-path]

[image-path]: /path/to/image.jpg

Cannot include jekyll-figure

Adding gems: [jekyll-figure] to _config.yml doesn't work, have to add gems: ["jekyll/figure"].

Escaped \" should lead to a " in a caption

Example liquid

{% figure caption:"Choose \"Trust Project\"" %}
...
{% endfigure %}

The figure caption currently is Choose \, but should be Choose "Trust Project".

Suggestion: It would be nice if one could refer to the figure before having drawn it

As in scientific text one would like to say;

"According to Figure X.."

drawn figure

I could not get that to work :)

Kind regards

cannot load such file -- jekyll-figure

Dependency Error: Yikes! It looks like you don't have jekyll-figure or one of its dependencies installed. In order to use Jekyll as currently configured, you'll need to install this gem. The full error message from Ruby is: 'cannot load such file -- jekyll-figure' If you run into trouble, you can find helpful resources at https://jekyllrb.com/help/!
I added gem to gemfile and did a bundle install ...Still got error message

Liquid Exception: undefined method `[]' for nil:NilClass

I installed the version 0.2.0 of jekyll-figure and got this error while trying to serve the site locally:

 Liquid Exception: undefined method `[]' for nil:NilClass in /home/<USER>/Documents/notes/_posts/2024-03-02-ecg.md
/mnt/secondary/cache/bundle/ruby/3.0.0/gems/jekyll-figure-0.2.0/lib/utils.rb:42:in `print_reference': undefined method `[]' for nil:NilClass (NoMethodError)

I have these plugins in my config.yml:

plugins:
  - jekyll-mermaid
  - jekyll-feed
  - jekyll/scholar
  - jekyll-figure

On the blog post that it references, I am trying to add figures like this:

{% figure caption:"Theoretical Schematic of an ECG circuit." label:"fig_schematic "%}
![Theoretical Schematic of the ECG circuit.]({{ site.baseurl }}/assets/images/2024/2024-03-02-ecg/ecg/ecg_simple.svg){: width="80%" }
{% endfigure %}

And call them with figref: {% figref fig_schematic %}

Any ideas how to fix this?

Liquid Exception: undefined method `cache_dir'

Running into exceptions on first use of plugin.

Spent a long time trying to get imagemagik installed before giving up and attempting to use the docker image, jekyll/jekyll.

Has anyone experience of this error?

bundle exec jekyll build --trace

  Liquid Exception: undefined method `cache_dir' for #<Jekyll::Site:0x0000556f88257d38> in /_layouts/collection.html
bundler: failed to load command: jekyll (/usr/gem/bin/jekyll)
NoMethodError: undefined method `cache_dir' for #<Jekyll::Site:0x0000556f88257d38>
  /usr/gem/gems/jekyll_picture_tag-1.12.0/lib/jekyll_picture_tag/cache/base.rb:43:in `base_directory'
  /usr/gem/gems/jekyll_picture_tag-1.12.0/lib/jekyll_picture_tag/cache/base.rb:55:in `filename'
  /usr/gem/gems/jekyll_picture_tag-1.12.0/lib/jekyll_picture_tag/cache/base.rb:33:in `data'
  /usr/gem/gems/jekyll_picture_tag-1.12.0/lib/jekyll_picture_tag/cache/base.rb:12:in `[]'
  /usr/gem/gems/jekyll_picture_tag-1.12.0/lib/jekyll_picture_tag/source_image.rb:71:in `check_cache'
  /usr/gem/gems/jekyll_picture_tag-1.12.0/lib/jekyll_picture_tag/source_image.rb:17:in `initialize'
  /usr/gem/gems/jekyll_picture_tag-1.12.0/lib/jekyll_picture_tag/instructions/set.rb:63:in `new'
  /usr/gem/gems/jekyll_picture_tag-1.12.0/lib/jekyll_picture_tag/instructions/set.rb:63:in `build_source_images'
  /usr/gem/gems/jekyll_picture_tag-1.12.0/lib/jekyll_picture_tag/instructions/set.rb:34:in `source_images'
  /usr/gem/gems/jekyll_picture_tag-1.12.0/lib/jekyll_picture_tag/router.rb:48:in `source_images'
  /usr/gem/gems/jekyll_picture_tag-1.12.0/lib/jekyll_picture_tag/utils.rb:51:in `count_srcsets'
  /usr/gem/gems/jekyll_picture_tag-1.12.0/lib/jekyll_picture_tag/output_formats/auto.rb:7:in `new'
  /usr/gem/gems/jekyll_picture_tag-1.12.0/lib/jekyll_picture_tag.rb:68:in `render'
  /usr/gem/gems/liquid-4.0.3/lib/liquid/block_body.rb:103:in `render_node_to_output'
  /usr/gem/gems/liquid-4.0.3/lib/liquid/block_body.rb:91:in `render'
  /usr/gem/gems/liquid-4.0.3/lib/liquid/tags/for.rb:160:in `block (2 levels) in render_segment'
  /usr/gem/gems/liquid-4.0.3/lib/liquid/tags/for.rb:158:in `each'
  /usr/gem/gems/liquid-4.0.3/lib/liquid/tags/for.rb:158:in `block in render_segment'
  /usr/gem/gems/liquid-4.0.3/lib/liquid/context.rb:123:in `stack'
  /usr/gem/gems/liquid-4.0.3/lib/liquid/tags/for.rb:150:in `render_segment'
  /usr/gem/gems/liquid-4.0.3/lib/liquid/tags/for.rb:79:in `render'
  /usr/gem/gems/liquid-4.0.3/lib/liquid/block_body.rb:103:in `render_node_to_output'
  /usr/gem/gems/liquid-4.0.3/lib/liquid/block_body.rb:82:in `render'
  /usr/gem/gems/liquid-4.0.3/lib/liquid/template.rb:208:in `block in render'
  /usr/gem/gems/liquid-4.0.3/lib/liquid/template.rb:242:in `with_profiling'
  /usr/gem/gems/liquid-4.0.3/lib/liquid/template.rb:207:in `render'
  /usr/gem/gems/liquid-4.0.3/lib/liquid/template.rb:220:in `render!'
  /usr/gem/gems/jekyll-3.8.7/lib/jekyll/liquid_renderer/file.rb:30:in `block (2 levels) in render!'
  /usr/gem/gems/jekyll-3.8.7/lib/jekyll/liquid_renderer/file.rb:42:in `measure_bytes'
  /usr/gem/gems/jekyll-3.8.7/lib/jekyll/liquid_renderer/file.rb:29:in `block in render!'
  /usr/gem/gems/jekyll-3.8.7/lib/jekyll/liquid_renderer/file.rb:49:in `measure_time'
  /usr/gem/gems/jekyll-3.8.7/lib/jekyll/liquid_renderer/file.rb:28:in `render!'
  /usr/gem/gems/jekyll-3.8.7/lib/jekyll/tags/include.rb:140:in `block in render'
  /usr/gem/gems/liquid-4.0.3/lib/liquid/context.rb:123:in `stack'
  /usr/gem/gems/jekyll-3.8.7/lib/jekyll/tags/include.rb:137:in `render'
  /usr/gem/gems/liquid-4.0.3/lib/liquid/block_body.rb:103:in `render_node_to_output'
  /usr/gem/gems/liquid-4.0.3/lib/liquid/block_body.rb:91:in `render'
  /usr/gem/gems/liquid-4.0.3/lib/liquid/template.rb:208:in `block in render'
  /usr/gem/gems/liquid-4.0.3/lib/liquid/template.rb:242:in `with_profiling'
  /usr/gem/gems/liquid-4.0.3/lib/liquid/template.rb:207:in `render'
  /usr/gem/gems/liquid-4.0.3/lib/liquid/template.rb:220:in `render!'
  /usr/gem/gems/jekyll-3.8.7/lib/jekyll/liquid_renderer/file.rb:30:in `block (2 levels) in render!'
  /usr/gem/gems/jekyll-3.8.7/lib/jekyll/liquid_renderer/file.rb:42:in `measure_bytes'
  /usr/gem/gems/jekyll-3.8.7/lib/jekyll/liquid_renderer/file.rb:29:in `block in render!'
  /usr/gem/gems/jekyll-3.8.7/lib/jekyll/liquid_renderer/file.rb:49:in `measure_time'
  /usr/gem/gems/jekyll-3.8.7/lib/jekyll/liquid_renderer/file.rb:28:in `render!'
  /usr/gem/gems/jekyll-3.8.7/lib/jekyll/renderer.rb:126:in `render_liquid'
  /usr/gem/gems/jekyll-3.8.7/lib/jekyll/renderer.rb:195:in `render_layout'
  /usr/gem/gems/jekyll-3.8.7/lib/jekyll/renderer.rb:158:in `place_in_layouts'
  /usr/gem/gems/jekyll-3.8.7/lib/jekyll/renderer.rb:88:in `render_document'
  /usr/gem/gems/jekyll-3.8.7/lib/jekyll/renderer.rb:62:in `run'
  /usr/gem/gems/jekyll-3.8.7/lib/jekyll/site.rb:479:in `render_regenerated'
  /usr/gem/gems/jekyll-3.8.7/lib/jekyll/site.rb:464:in `block (2 levels) in render_docs'
  /usr/gem/gems/jekyll-3.8.7/lib/jekyll/site.rb:463:in `each'
  /usr/gem/gems/jekyll-3.8.7/lib/jekyll/site.rb:463:in `block in render_docs'
  /usr/gem/gems/jekyll-3.8.7/lib/jekyll/site.rb:462:in `each_value'
  /usr/gem/gems/jekyll-3.8.7/lib/jekyll/site.rb:462:in `render_docs'
  /usr/gem/gems/jekyll-3.8.7/lib/jekyll/site.rb:191:in `render'
  /usr/gem/gems/jekyll-3.8.7/lib/jekyll/site.rb:71:in `process'
  /usr/gem/gems/jekyll-3.8.7/lib/jekyll/command.rb:28:in `process_site'
  /usr/gem/gems/jekyll-3.8.7/lib/jekyll/commands/build.rb:65:in `build'
  /usr/gem/gems/jekyll-3.8.7/lib/jekyll/commands/build.rb:36:in `process'
  /usr/gem/gems/jekyll-3.8.7/lib/jekyll/commands/build.rb:18:in `block (2 levels) in init_with_program'
  /usr/gem/gems/mercenary-0.3.6/lib/mercenary/command.rb:220:in `block in execute'
  /usr/gem/gems/mercenary-0.3.6/lib/mercenary/command.rb:220:in `each'
  /usr/gem/gems/mercenary-0.3.6/lib/mercenary/command.rb:220:in `execute'
  /usr/gem/gems/mercenary-0.3.6/lib/mercenary/program.rb:42:in `go'
  /usr/gem/gems/mercenary-0.3.6/lib/mercenary.rb:19:in `program'
  /usr/gem/gems/jekyll-3.8.7/exe/jekyll:15:in `<top (required)>'
  /usr/gem/bin/jekyll:23:in `load'
  /usr/gem/bin/jekyll:23:in `<top (required)>'

Figure numbering?

Hi there,

is there an easy way to automatically add "Figure X" to the caption, where X is an incrementing number? So it works fine if we add more figures to have the numbers right?

And can I link to that figure number with a reference?

Thanks,
Martin

Using in ordered list leads to wrong rendering

When I put following markdown

---
layout: null
---
# Test

{% figure caption:"First Figure" %}
Content of first figure
{% endfigure %}

1. First step
2. Second step with figure

   {% figure caption:"Second Figure" %}
   Content of second figure
   {% endfigure %}

3. Third step

I would expect the second figure being nested in the second item - and that the third item is rendered as third item.

The result, however, is different:

<h1 id="test">Test</h1>

<figure>
Content of first figure
  <figcaption>First Figure</figcaption>
</figure>

<ol>
  <li>First step</li>
  <li>
    <p>Second step with figure</p>

    <figure>
Content of second figure

</figure>
  </li>
</ol>
<figcaption>Second Figure</figcaption>
<p>&lt;/figure&gt;</p>

<ol>
  <li>Third step</li>
</ol>

CC @grauschnabel