eleventy: Dynamic Title from Partial to Layout not working

Describe the bug I am using 11ty for my static blog site and trying to set up tag pages. Everything else seems to work except the page title

Layout

<title>{{ title or (renderData and renderData.title) }}</title>

tags.html

---
layout: layouts/page.html
eleventyExcludeFromCollections: true
pagination:
  data: collections
  size: 1
  alias: tag
  filter:
    - post
permalink: /tags/{{ tag | slug }}/
renderData:
  title: {{ tag }}
---

Also have tried

---
layout: layouts/page.html
eleventyExcludeFromCollections: true
title: {{ tag }}
pagination:
  data: collections
  size: 1
  alias: tag
  filter:
    - post
permalink: /tags/{{ tag | slug }}/
---

In both cases, my title is set to [object Object], after adding one filter I console log the data and got { '[object Object]': null }

Am I doing anything wrong here?

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 17 (11 by maintainers)

Most upvoted comments

For anyone running into this issue, I noticed that setting the title directly to {{ tag }} results in {"object Object":null} being injected into the content. The fix is to add single quotes around the tag, like this:

eleventyComputed:
  title: '{{ tag }}'

The below will not work:

eleventyComputed:
  title: {{ tag }}

My feeling is this is a yaml parsing issue where this is not picked up as a string. 😕

ben-eb on Dec 21, 2020

Ah, I didn’t quite read every comment here but from what I could glean this is a duplicate of something from the computed data project, right? renderData was fixed for 0.11.0 but is deprecated in favor of the new eleventyComputed feature. Please use that instead.

https://www.11ty.dev/docs/data-computed/

zachleat on Feb 24, 2020

I think you definitely need to use renderData approach for dynamic titles. But curious if you need to put quotes around the permalink: "/tags/{{ tag | slug }}/" and possibly:
renderData:
  title: "{{ tag }}"

Putting tag "{{ tag }}" gives {{ tag }} in the output. Not the actual tag 😦

title: "{{ tag }}"
pagination:
  data: collections
  size: 1
  alias: tag
  filter:
    - post
permalink: "/tags/{{ tag | slug }}/"

avishwakarma on Feb 21, 2020

I got it working w/ Liquid, but I don’t like my hacky solution: https://github.com/pdehaan/11ty-collection-tag-archive

{%- assign $title = title -%}
{%- if renderData.title -%}
  {%- assign $title = renderData.title -%}
{%- endif -%}

— /src/_includes/layouts/base.html#L2-L5

Not sure why my or operators weren’t working, but I was suspecting that it’s treating the empty title as an empty string, and then not counting that as falsy. I even tried a few things using the liquidjs default filter, but that didn’t seem to work either. I’d need to dig into raw liquidjs and see if I can reproduce it, or try shimming the old version of liquidjs (6.x in eleventy@0.10.0 with the newer liquidjs 9.x and see if that makes any difference).

pdehaan on Feb 21, 2020

I think you definitely need to use renderData approach for dynamic titles. But curious if you need to put quotes around the permalink: "/tags/{{ tag | slug }}/" and possibly:

renderData:
  title: "{{ tag }}"

pdehaan on Feb 20, 2020