How to Convert Array from Jekyll YAML Front Matter?

Support
1

Hi folks,

I’m testing out converting from an old Jekyll site to Zola. I’m trying to understand how I could add a custom array to the [extra] section.

Here’s the yaml front matter:

---
layout: "post"
title: "Multiple Galleries"
subtitle: "A post with multiple galleries arranged with ISOTOPE"
active: "journal"
image:
  feature: "pc007.jpg"
date: "2016-02-01"
header-img: "img/postcover/pc007.jpg"
comments: "true"
gallery1: 
  - image_path: /img/galleries/g01/bg1.jpg
    image-caption: IMAGE TITLE
    image-copyright: © photorama
  - image_path: /img/galleries/g01/bg2.jpg
    image-caption: IMAGE TITLE
    image-copyright: © photorama
  - image_path: /img/galleries/g01/bg3.jpg
    image-caption: IMAGE TITLE
    image-copyright: © photorama 
gallery2: 
  - image_path: /img/galleries/g02/bg1.jpg
    image-caption: IMAGE TITLE
    image-copyright: © photorama
  - image_path: /img/galleries/g02/bg2.jpg
    image-caption: IMAGE TITLE
    image-copyright: © photorama
  - image_path: /img/galleries/g02/bg3.jpg
    image-caption: IMAGE TITLE
    image-copyright: © photorama 
---

I’ve converted it to this toml front matter:

+++
title = "Multiple Galleries"
description = "A post with multiple galleries arranged with ISOTOPE"
date = 2016-02-01
template = "gal.html"

[extra]
active = "journal"
header-images = "images/postcover/pc007.jpg"
comments = "true"
[image]
feature = "pc007.jpg"
[[gallery1]]
image_path = "images/galleries/g01/bg1.jpg"
image-caption = "IMAGE TITLE"
image-copyright = "© photorama"
[[gallery1]]
image_path = "images/galleries/g01/bg2.jpg"
image-caption = "IMAGE TITLE"
image-copyright = "© photorama"
[[gallery1]]
image_path = "images/galleries/g01/bg3.jpg"
image-caption = "IMAGE TITLE"
image-copyright = "© photorama"
[[gallery2]]
image_path = "images/galleries/g02/bg1.jpg"
image-caption = "IMAGE TITLE"
image-copyright = "© photorama"
[[gallery2]]
image_path = "images/galleries/g02/bg2.jpg"
image-caption = "IMAGE TITLE"
image-copyright = "© photorama"
[[gallery2]]
image_path = "images/galleries/g02/bg3.jpg"
image-caption = "IMAGE TITLE"
image-copyright = "© photorama"
+++

(I used this site to help me convert: https://www.convertsimple.com/convert-yaml-to-toml/)

I find I can access the straightforward key = "value" items directly following the [extra] section, however the table ([image]) values and the table of arrays ([[gallery1]]) values do not show up as being available at all.

(I’m adding the {{ _tera_context }} special variable in the page to help me debug.)

How can I pass those custom variables in a way that is accessible? Likely there is a better way than what I’m trying here…

For reference, this is what is returned by the {{ __tera_context }} variable:

{
  "config": {
    "base_url": "http://127.0.0.1:1111",
    "theme": "zola-clean-blog",
    "title": "Woohoo!",
    "description": "What a theme!",
    "default_language": "en",
    "languages": [],
    "translations": {},
    "highlight_code": false,
    "highlight_theme": "base16-ocean-dark",
    "generate_feed": false,
    "feed_limit": null,
    "feed_filename": "atom.xml",
    "hard_link_static": false,
    "taxonomies": [
      {
        "name": "categories",
        "paginate_by": 5,
        "paginate_path": null,
        "feed": false,
        "lang": "en"
      },
      {
        "name": "tags",
        "paginate_by": 5,
        "paginate_path": null,
        "feed": false,
        "lang": "en"
      }
    ],
    "compile_sass": true,
    "minify_html": false,
    "build_search_index": true,
    "ignored_content": [],
    "extra_syntaxes": [],
    "output_dir": "public",
    "link_checker": {
      "skip_prefixes": [],
      "skip_anchor_prefixes": []
    },
    "slugify": {
      "paths": "on",
      "taxonomies": "on",
      "anchors": "on"
    },
    "search": {
      "include_title": true,
      "include_content": true,
      "truncate_content_length": null,
      "include_description": false
    },
    "markdown": {
      "highlight_code": true,
      "highlight_theme": "base16-ocean-dark",
      "render_emoji": false,
      "external_links_target_blank": false,
      "external_links_no_follow": false,
      "external_links_no_referrer": false,
      "smart_punctuation": false,
      "extra_syntaxes": []
    },
    "extra": {
      "author": "Jason",
      "clean_blog_menu": [
        {
          "name": "Home",
          "url": "$BASE_URL"
        },
        {
          "name": "Gallery",
          "url": "$BASE_URL/gallery"
        },
        {
          "name": "About",
          "url": "$BASE_URL/about"
        },
        {
          "name": "Contact",
          "url": "$BASE_URL/contact"
        }
      ],
      "clean_blog_social": [
        {
          "icon": "fab fa-twitter",
          "url": "https://twitter.com"
        },
        {
          "icon": "fas fa-rss",
          "url": "$BASE_URL/rss.xml"
        }
      ]
    }
  },
  "current_path": "/multiple-galleries/",
  "current_url": "http://127.0.0.1:1111/multiple-galleries/",
  "lang": "en",
  "page": {
    "relative_path": "2016-02-01-multiple-galleries.md",
    "content": "",
    "permalink": "http://127.0.0.1:1111/multiple-galleries/",
    "slug": "multiple-galleries",
    "ancestors": [
      "_index.md"
    ],
    "title": "Multiple Galleries",
    "description": "A post with multiple galleries arranged with ISOTOPE",
    "updated": null,
    "date": "2016-02-01",
    "year": 2016,
    "month": 2,
    "day": 1,
    "taxonomies": {},
    "extra": {
      "active": "journal",
      "header-images": "images/postcover/pc007.jpg",
      "comments": "true"
    },
    "path": "/multiple-galleries/",
    "components": [
      "multiple-galleries"
    ],
    "summary": null,
    "toc": [],
    "word_count": 0,
    "reading_time": 0,
    "assets": [],
    "draft": false,
    "lang": "en",
    "lighter": null,
    "heavier": null,
    "earlier": null,
    "later": {
      "relative_path": "first-post.md",
      "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\nincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis\nnostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\nDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore\neu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt\nin culpa qui officia deserunt mollit anim id est laborum.</p>\n<span id=\"continue-reading\"></span>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\nincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis\nnostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\nDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore\neu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt\nin culpa qui officia deserunt mollit anim id est laborum.</p>\n",
      "permalink": "http://127.0.0.1:1111/first-post/",
      "slug": "first-post",
      "ancestors": [
        "_index.md"
      ],
      "title": "First post",
      "description": null,
      "updated": null,
      "date": "2019-01-01",
      "year": 2019,
      "month": 1,
      "day": 1,
      "taxonomies": {
        "tags": [
          "placeholder posts",
          "tag1"
        ],
        "categories": [
          "Odd"
        ]
      },
      "extra": {},
      "path": "/first-post/",
      "components": [
        "first-post"
      ],
      "summary": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\nincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis\nnostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\nDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore\neu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt\nin culpa qui officia deserunt mollit anim id est laborum.</p>\n",
      "toc": [],
      "word_count": 139,
      "reading_time": 1,
      "assets": [],
      "draft": false,
      "lang": "en",
      "lighter": null,
      "heavier": null,
      "earlier": null,
      "later": null,
      "translations": []
    },
    "translations": []
  }

This is the jekyll theme I’m trying to work from, but build a much cleaner version of: https://github.com/sunbliss/photorama

TIA for any assistance!

2

Welcome to TOML :frowning:

title = "Multiple Galleries"
description = "A post with multiple galleries arranged with ISOTOPE"
date = 2016-02-01
template = "gal.html"

[extra]
active = "journal"
header-images = "images/postcover/pc007.jpg"
comments = "true"
[extra.image]
feature = "pc007.jpg"
[[extra.image.gallery1]]
image_path = "images/galleries/g01/bg1.jpg"
image-caption = "IMAGE TITLE"
image-copyright = "© photorama"
[[extra.image.gallery1]]
image_path = "images/galleries/g01/bg2.jpg"
image-caption = "IMAGE TITLE"
image-copyright = "© photorama"
[[extra.image.gallery1]]
image_path = "images/galleries/g01/bg3.jpg"
image-caption = "IMAGE TITLE"
image-copyright = "© photorama"
[[extra.image.gallery2]]
image_path = "images/galleries/g02/bg1.jpg"
image-caption = "IMAGE TITLE"
image-copyright = "© photorama"
[[extra.image.gallery2]]
image_path = "images/galleries/g02/bg2.jpg"
image-caption = "IMAGE TITLE"
image-copyright = "© photorama"
[[extra.image.gallery2]]
image_path = "images/galleries/g02/bg3.jpg"
image-caption = "IMAGE TITLE"
image-copyright = "© photoram"

This should work

1 Like
3

Hi @keats! Thanks you so much for the input!

I had found a hacky way by using nested arrays, but then I lost the key/value pairs. However, it wasn’t too difficult to parse them and pull out what was needed.

gallery1 = [ 
  [ "gallery/gl01/bg1.jpg",
  "IMAGE TITLE",
  "© Me" 
  ],
  [ "gallery/gl01/bg2.jpg",
  "IMAGE TITLE",
  "© Me" 
  ],
  [ "gallery/gl01/bg3.jpg",
  "IMAGE TITLE",
  "© Me" 
  ]
]

  {% for imgnfo in page.extra.gallery1 %}
    {% set image = imgnfo[0] %}
    {% set title = imgnfo[1] %}
    {% set credit = imgnfo[2] %}
    {% if image is matching("[.](jpg|png)$") %}
    <figure class="figure gallery-item">
      <header class='gallery-icon'>
      <a href="{{ get_url(path=image) }}" class="popup" title="{{ title }}" data-caption="{{ credit }}">
        <img src="{{ resize_image(path=image, width=320, height=240, op="fill") }}" class="figure-img img-fluid rounded">
      </a>
      </header>
    <figcaption class='figure-caption gallery-caption'>
      <div class="entry-summary" id="{{ title }}">
        <h3>{{ title }}</h3>
      </div>
    </figcaption>
    </figure>
    &ensp;
    {% endif %}
  {% endfor %}

That said, I’m happy to have this clarification, I think it’ll give me easier more generic references to parse. I’ll give it a try!

I had been thinking it was related to some reference that I saw that the front matter is already a table, hence the additional table references wouldn’t work. It looks like your format is extending the [extra] table, is that right?

[Edit] Found the reference I was thinking of:

Because TOML is explicitly intended as a configuration file format, parsing it is easy, but it is not intended for serializing arbitrary data structures. TOML always has a hash table at the top level of the file, which can easily have data nested inside its keys, but it doesn’t permit top-level arrays or floats, so it cannot directly serialize some data.

https://github.com/toml-lang/toml/blob/master/README.md