Missing helper: "foreach" after adding custom tag page

Hello!

I am trying to add a custom tags page to Ghost blog using this instruction: https://blog.many-monkeys.com/adding-a-tags-page-to-ghost-blog/

After adding page-tags.hbs, tag-card.hbs and restarting Ghost I’ve got only message in browser:

# Oops, seems there is an error in the error template.

Encountered the error:

[error.hbs] Missing helper: "foreach"

whilst trying to render an error page for the error:

undefined

[error.hbs] Missing helper: "foreach"
  • What’s your URL?
    https://vmadm.in/

  • What version of Ghost are you using?
    Ghost-CLI version: 1.14.1
    Ghost version: 3.38.3

  • How was Ghost installed and configured?
    Installed via docker on Ubuntu 18.04.

  • What Node version, database, OS & browser are you using?
    Node.js v12.19.1, Embedded in Docker image, Windows 10, Chrome 87.0.4280.66

  • What errors or information do you see in the console?

[2020-11-25 09:03:36] ERROR

NAME: ThemeValidationError
MESSAGE: The currently active theme "Alto-master" is invalid.

level: normal

ERROR DETAILS:
    {"checkedVersion":"3.x","name":"alto","path":"/var/www/ghost/content/themes/Alto-master","version":"1.0.0","errors":[{"fatal":true,"level":"error","rule":"Templates must contain valid Handlebars","details":"Oops! You seemed to have used invalid Handlebars syntax. This mostly happens, when you use a helper that is not supported.<br>See the full list of available helpers <a href=\"https://ghost.org/docs/api/handlebars-themes/\" target=_blank>here</a>.","failures":[{"ref":"page-tags.hbs","message":"The partial site-nav could not be found"}],"code":"GS005-TPL-ERR"}]}

ThemeValidationError: The currently active theme "Alto-master" is invalid.
    at ThemeValidationError.GhostError (/var/www/ghost/versions/3.38.3/node_modules/@tryghost/errors/lib/errors.js:10:26)
    at new ThemeValidationError (/var/www/ghost/versions/3.38.3/node_modules/@tryghost/errors/lib/errors.js:40:20)
    at validationSuccess (/var/www/ghost/versions/3.38.3/core/frontend/services/themes/index.js:39:48)
- What steps could someone else take to reproduce the issue you're having? 

[2020-11-25 09:03:37] INFO Ghost is running in production...
[2020-11-25 09:03:37] INFO Your site is now available on https://vmadm.in/
[2020-11-25 09:03:37] INFO Ctrl+C to shut down
[2020-11-25 09:03:37] INFO Ghost boot 3.934s
[2020-11-25 09:03:37] INFO Bootstrap client was closed.
[2020-11-25 09:03:39] ERROR "GET /" 500 32ms

MESSAGE: [error.hbs] Missing helper: "foreach"

Error: [error.hbs] Missing helper: "foreach"
    at Object.<anonymous> (/var/www/ghost/versions/3.38.3/node_modules/handlebars/dist/cjs/handlebars/helpers/helper-missing.js:19:13)
    at Object.wrapper (/var/www/ghost/versions/3.38.3/node_modules/handlebars/dist/cjs/handlebars/internal/wrapHelper.js:15:19)
    at eval (eval at createFunctionContext (/var/www/ghost/versions/3.38.3/node_modules/handlebars/dist/cjs/handlebars/compiler/javascript-compiler.js:262:23), <anonymous>:9:131)
    at Object.prog [as fn] (/var/www/ghost/versions/3.38.3/node_modules/handlebars/dist/cjs/handlebars/runtime.js:268:12)
    at Object.<anonymous> (/var/www/ghost/versions/3.38.3/node_modules/handlebars/dist/cjs/handlebars/helpers/if.js:29:22)
    at Object.wrapper (/var/www/ghost/versions/3.38.3/node_modules/handlebars/dist/cjs/handlebars/internal/wrapHelper.js:15:19)
    at Object.eval [as main] (eval at createFunctionContext (/var/www/ghost/versions/3.38.3/node_modules/handlebars/dist/cjs/handlebars/compiler/javascript-compiler.js:262:23), <anonymous>:21:47)
    at main (/var/www/ghost/versions/3.38.3/node_modules/handlebars/dist/cjs/handlebars/runtime.js:208:32)
    at ret (/var/www/ghost/versions/3.38.3/node_modules/handlebars/dist/cjs/handlebars/runtime.js:212:12)
    at ret (/var/www/ghost/versions/3.38.3/node_modules/handlebars/dist/cjs/handlebars/compiler/compiler.js:519:21)
    at renderTemplate (/var/www/ghost/versions/3.38.3/node_modules/express-hbs/lib/hbs.js:490:13)
    at render (/var/www/ghost/versions/3.38.3/node_modules/express-hbs/lib/hbs.js:526:5)
    at renderIt (/var/www/ghost/versions/3.38.3/node_modules/express-hbs/lib/hbs.js:588:18)
    at /var/www/ghost/versions/3.38.3/node_modules/express-hbs/lib/hbs.js:611:11
    at parseLayout (/var/www/ghost/versions/3.38.3/node_modules/express-hbs/lib/hbs.js:471:7)
    at /var/www/ghost/versions/3.38.3/node_modules/express-hbs/lib/hbs.js:577:7

How can I fix this issue ? Thanks!

Hi,
I hope I can help you. Can you show me your page-tags.hbs code so I can check the code.

It may have some coding mistakes. Let me check.

Thanks

Hello Enamul,
I’m using alto theme from Ghost repo.
Here is page-tags.hbs:

{{!< default}}
{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}

{{!-- The big featured header, it uses blog cover image as a BG if available --}}
{{#post}}
<header class="site-header outer {{#if feature_image}}" style="background-image: url({{feature_image}}){{else}}no-cover{{/if}}">
    <div class="inner">
        {{> "site-nav"}}
        <div class="site-header-content">
            <h1 class="site-title">{{title}}</h1>
        </div>
    </div>
</header>

{{!-- The main content area --}}
<main id="site-main" class="site-main outer">
    <style scoped>
    .inner-page-tags {
        margin-top: inherit;
    }

    @media (min-width: 900px) {
      .inner-page-tags {
        margin-top: -8vw;
      }
    }
    </style>
    <div class="inner inner-page-tags">
        <div class="post-feed">
            {{#get 'tags' limit='all' include='count.posts' order='count.posts desc'}}
            {{#foreach tags}}
                {{!-- The tag below includes the markup for each tag - partials/tag-card.hbs --}}
                {{> "tag-card"}}
            {{/foreach}}
            {{/get}}
        </div>
    </div>
</main>
{{/post}}

This is the error that matters, it’s the first one shown in the logs:

Do you have the file partials/site-nav.hbs in your theme?

No, there is no site-nav.hbs in theme. There is only files in folder partilas in theme alto:
root@vmadmin:/var/www/ghost/content/themes/Alto-master/partials$ ls
author.hbs featured.hbs header.hbs loop.hbs pagination.hbs post-header.hbs post-navigation.hbs share.hbs
comment.hbs footer.hbs logo.hbs navigation.hbs post-footer.hbs post-media.hbs related.hbs

I will try to replace site-nav to navigation and restart Ghost. Will provide feedback after that.

Changed, the site started, but Tags pages have a strange view:


Will try to make some experiments with settings in page-tags.hbs …

Hello!

I’ve made some changes on site and moved to scheme with custom-tags.hbs :

{{!< default}}

<div class="content-area">
    <main class="site-main">
        {{#get 'tags' limit='all' include='count.posts' order='count.posts desc'}}
            {{#foreach tags}}
                {{!-- The tag below includes the markup for each tag - partials/tag-card.hbs --}}
                {{> "tag-card"}}
            {{/foreach}}
        {{/get}}
    </main>
</div>

tag-card.hbs contains:

<article class="post-card {{post_class}}{{#unless feature_image}} no-image{{/unless}}">
    {{#if feature_image}}
        <a class="post-card-image-link" href="{{url}}">
            <div class="post-card-image" style="background-image: url({{feature_image}})"></div>
        </a>
    {{/if}}

<div class="post-card-content">
    <a class="post-card-content-link" href="{{url}}">
            <header class="post-card-header">
                <h2 class="post-card-title">{{name}}</h2>
            </header>
            <section class="post-card-excerpt">
                <p>{{description}}</p>
                <p>A collection of {{plural count.posts empty='posts' singular='% post' plural='% posts'}}</p>
            </section>
    </a>
</div>

Now page is showing, but there is no images in card of tag:

Maybe someone can tell me what I’m missing?

I found that the issue was related to the ‘site-nav’ (partial?)

Removing the whole header block (below) worked fine for my theme

<header class="site-header">
  <div class="outer site-nav-main">
    <div class="inner">
      {{> "site-nav"}}
    </div>
  </div>
</header>