Trying to duplicate featured section on Edition homepage

Themes
1

I’m trying to modify the Edition theme in a local Ghost instance for eventual use on my live site. I’d like to duplicate the home page’s “Featured Posts” section, and convert it to show posts of a particular tag. But first, I’ve just tried to directly duplicate the featured posts section. I’ve changed the relevant lines in “default.hbs” thusly:

    {{#is "home"}}
        {{> "cover"}}
        {{#if @custom.show_featured_posts}}
            {{> "featured-posts"}}
            {{> "featured-posts"}}
        {{/if}}
    {{/is}}

On the homepage, it shows the first featured post section just fine, and it shows the title of the next featured posts section, but the section itself is just a huge blank space before the “latest posts” feed starts. Regions of the blank space link to my featured posts when clicked; it seems like the post cards aren’t rendering right in the second section, but I can’t find where in the CSS anything would change.

2

Can you post in the start of that partial? :)

3

This is the whole partial, which is straight from the Edition theme

{{#get "posts" filter="featured:true" limit="all" as |featured|}}
{{#if featured}}
    <div class="gh-outer">
    <section class="featured-wrapper gh-inner">

        {{#if @custom.featured_title}}
            <h2 class="featured-title">{{@custom.featured_title}}</h2>
        {{/if}}

        <div class="featured-feed">
            {{#foreach featured}}
            <article class="{{post_class}}">
                <div class="u-placeholder horizontal">
                    {{#if feature_image}}
                        <img
                            class="u-object-fit"
                            srcset="{{> "srcset"}}"
                            sizes="(min-width: 1256px) calc((1130px - 60px) / 3), (min-width: 992px) calc((90vw - 60px) / 3), (min-width: 768px) calc((90vw - 30px) / 2), 90vw"
                            src="{{img_url feature_image size="m"}}"
                            alt="{{title}}"
                            loading="lazy"
                        >
                    {{/if}}
                </div>
                <h3 class="post-title">{{title}}</h3>
                <a class="u-permalink" href={{url}} aria-label="{{title}}"></a>
            </article>
            {{/foreach}}
        </div>

    </section>
    </div>
{{/if}}
{{/get}}
4

Interesting. I’m suspecting that the hbs parser is getting confused by having |featured| twice, and thinks it’s already looped over all the posts (although I’m surprised that the #get in the second instance of the partial doesn’t reset it). You could test that by copying the featured-posts partial file and changing the |featured| out for something else (be sure to adjust the foreach also).

Depending on how you load in the new partial file, you may need to restart Ghost to get changes to go into effect.

5

I made a modified version of featured-posts.hbs called newsletter-posts.hbs (code below) and I renamed the |featured| element there and that’s when I first encountered the rendering problem. Even just inserting newsletter-posts.hbs by itself works fine. It’s just when both get added that the second one renders wrong.

{{#get "posts" filter="tags:[a-running-commentary]" limit="all" as |newsletter|}}
{{#if newsletter}}
    <style>
        .featured-wrapper .u-placeholder {width:340px;height:440px;}
    </style>
    <div class="gh-outer">
    <section class="featured-wrapper gh-inner">

        {{#if @custom.featured_title}}
            <h2 class="featured-title">A Running Commentary</h2>
        {{/if}}

        <div class="featured-feed">
            {{#foreach newsletter}}
            <article class="{{post_class}}">
                <div class="u-placeholder horizontal">
                    {{#if feature_image}}
                        <img
                            class="u-object-fit"
                            srcset="{{> "srcset"}}"
                            sizes="(min-width: 1256px) calc((1130px - 60px) / 3), (min-width: 992px) calc((90vw - 60px) / 3), (min-width: 768px) calc((90vw - 30px) / 2), 90vw"
                            src="{{img_url feature_image size="m"}}"
                            alt="{{title}}"
                            loading="lazy"
                        >
                    {{/if}}
                </div>
                <h3 class="post-title">{{title}}</h3>
                {{#if excerpt}}
                    <div class="feed-excerpt">{{excerpt words="40"}}</div>
                {{/if}}
                <a class="u-permalink" href={{url}} aria-label="{{title}}"></a>
            </article>
            {{/foreach}}
        </div>

    </section>
    </div>
{{/if}}
{{/get}}
6

That’s sounds more and more like some sneaky css issue. Is the site online somewhere viewable? I’m happy to take a peek.

Other trouble-shooting ideas:

  • Check your page’s html source (ctrl-U or f12) in the browser. Are the items that you expect to render in the loop present but just not visible on the screen? That would definitely seem to implicate the CSS, if so.

  • Check your site’s logs. They’re in your-ghost-folder/content/logs folder, probably. Any errors in the log file when you load the page? If it’s handlebars goofing in some way, you might get a clue there.

  • Add some random words between the {{#get}} and {{#if}} and after {{#if}} - is the partial getting parsed at all? Is the {{#if newsletter}} getting parsed as true?