Regarding generation of multiple files from a single content template

[studiolastco]

Hello. I'm using Eleventy for the first time to build a new version of my website for my art practice. It's essentially a portfolio website of my artwork. I'm using Nunjucks templating. I'm also using Forestry.io as a CMS, though I also hand-code much of the work.

(1) Each artwork has an individual template in the src/works directory. In the file tree below, I've included some tags defined in the front matter of each .md file which I will mention in point (2). Also noted is the layout used in the front matter for all templates in /works.

src
├── works (layout: layouts/works/artwork)
│   ├── artwork-001.md (tags: abstract, collage, photography)
│   ├── artwork-002.md (tags: collage, photography)
│   ├── artwork-003.md (tags: abstract, collage)
│   ├── ...
└── works-abstract.md

(2) In my previous framework-based website, I used the following url scheme (via routing) to arrange artworks into "portfolios". Artworks could appear in one or more portfolios. Each artwork also had a page which was not bound to any particular portfolio:

https://calhounsmith.com/works/artwork-001/ <-- no portfolio context
https://calhounsmith.com/works/artwork-001/abstract/
https://calhounsmith.com/works/artwork-001/collage/
https://calhounsmith.com/works/artwork-001/photography/

I'm making use of Eleventy's tags (auto-collections) capability to create what are essentially portfolios. I would like to keep the established url structure I had with my previous framework-based website.

Using the following pagination template I get the following generated file tree. Note that this pagination template also uses the same layouts/works/artwork layout used in (1).

src/works-abstract.md
---
layout: layouts/works/artwork
tag: abstract
pagination:
  data: collections.abstract
  size: 1
  alias: artwork
permalink: "/works/{{artwork.fileSlug}}/{{tag}}/"
---

_site
└── works
    ├── artwork-001
    │   ├── index.html
    │   └── abstract
    │   │   └── index.html
    │   └── collage
    │   │   └── index.html
    │   └── photography
    │   │   └── index.html

The generated pages are essentially fine. But I have the following questions:

(3)

In _site/works/artwork-001/index.html
// artwork title property, for instance, is accessed using {{title}}

In _site/works/artwork-001/abstract/index.html
// artwork title has to be accessed via {{artwork.data.title}}

Question: Is there some way to make the first map to {{artwork.data.title}} or the second map to just {{title}}? I'm trying to avoid duplicating a layout used by two different page generation sources.

(4)

In _site/works/artwork-001/index.html
// artwork content in the .md file is accessed using {{content}}

In _site/works/artwork-001/abstract/index.html
// {{artwork.data.content}} returns the markup for the entire template! Why is that?

For those still with me 😱😅 : the reason I'm trying to do this is to maintain the portfolio context when viewing an artwork. For instance, when the portfolio context is abstract, the previous and next buttons on the page should go to the next artwork in collections.abstract. When there is no portfolio context, the more global collections.works should be the portfolio context.

Thanks very much for your time.

[pdehaan]

Question: Is there some way to make the first map to {{artwork.data.title}} or the second map to just {{title}}? I'm trying to avoid duplicating a layout used by two different page generation sources.

I think there might be 2 solutions:

1. Use LiquidJS's default filter (assuming you're using the default engine for .md files and didn't replace it w/ Nunjucks; in which case you'd have to write your own default filter):

<title>{{ title | default: artwork.data.title }}</title>

This should use title if available, and fall back to artwork.data.title if title was falsy.

2. Use eleventyComputed in your paginated pages to set local variables.

---
# ./works-abstract.md
layout: layouts/works/artwork
tag: abstract
pagination:
  data: collections.abstract
  size: 1
  alias: artwork
permalink: "/works/{{ artwork.fileSlug | slug }}/{{ tag | slug }}/"
eleventyComputed:
  title: "{{ artwork.data.title }}"
---

I think this is probably my preferred solution, but should set the current paginated item's artwork.data.title value and set it locally as title for each page. Now in your layout file, you should be able to just use {{ title }} everywhere.

---

In _site/works/artwork-001/index.html
# artwork content in the .md file is accessed using {{content}}

In _site/works/artwork-001/abstract/index.html
# {{artwork.data.content}} returns the markup for the entire template! Why is that?

That's just how pagination works usually (needing to access via {alias}.data.{property} to get certain frontmatter-ish values). Interestingly, I wasn't able to reproduce this locally since my fake repo was able to just use {{ content }} universally for individual pages and pagination, but maybe your exact setup is different:

<main>
  <article>{{ content | strip }}</article>
</main>

[studiolastco]

Thanks very much Peter for your ideas and suggestions. I’ve used the eleventyComputed solution and that works fine with front matter values that are essentially string values in and of themselves. I’m now working with how the plot thickens with other computed values that are, for instance, series or arrays in the original .md file front matter. In any case, you got me on the right road. I appreciate it much.