content-strategy-forum / csf-glossary

A collaborative content glossary for the UX professions.
https://content-strategy-forum.github.io/csf-glossary/
3 stars 0 forks source link

[dev] Figure front matter via liquid include #69

Closed wion closed 7 years ago

wion commented 7 years ago

This is a similar problem to the one explained in issue #68 , but in this case for handling conditional figures. Anyone with YAML and Liquid experience is encouraged to speak up. You're name will be included to the front of the glossary.

Context…

Some definition files will need a figure and some won’t — an if (conditional) situation. But this is not a collaborator responsibility. They don’t add image data. So I wanted to serialize this markup out as front matter so it’s not something writers have to focus on or mess with.

The associated front matter looks like this:

figure:
  fig_slug: placeholder 
  fig_alt: "A placeholder. Huzza!"
  fig_caption: "A belle figure of mysterious nature."

And the markup in the include file, figure.html:

<figure>
  <img alt="{{ include.figure_info[fig_alt] }}" src="{{ site.github.url }}/assets/images/{{ include.figure_info[fig_slug] }}.png">
  <figcaption>{{ include.figure_info[fig_caption] }}</figcaption>
</figure>

And the Liquid include tags that call the file in the definition page:

{% if ref="{{ page.figure }}" %}
{% include figure.html figure_info=page.figure site_info=site.github %}
{% endif %}

But, again, I don’t seem to have it correct. The site will build but nothing outputs. What should the include tag syntax look like? What should the liquid look like in the include markup?

wion commented 7 years ago

This one has been figured out. 👍

The relevant YAML:

figure:
  fig_slug:  
  fig_alt: 
  fig_caption:

The related include markup:

<figure>
  <img alt="{{page.figure.fig_alt}}" src="http://content-strategy-forum.github.io/csf-glossary/assets/images/{{page.figure.fig_slug}}.png">
  <figcaption>{{page.figure.fig_caption}}</figcaption>
</figure>

And the include tag to call the markup:

{% include figure.html %}