Two of each post on homepage - modified theme error?

Themes
1

Hi! I really like the was the edge theme’s front page looks, with an image representing each post. I just didn’t want it on the front page. I made a new all.hbs and custom route to it. Everything is great /except/ I’m getting two copies of each blog post.

My routes.yaml:

routes:

collections:
  /:
     permalink: /{slug}/
     template: index
  /all/:
     template: all
     permalink: /all/

taxonomies:
  tag: /tag/{slug}/

My all.hbs:

{{!< default}}

<div class="content-area">
    <main class="site-main container">
        <div class="post-feed">
            <div class="grid-item grid-sizer"></div>
            {{#get "posts"}}
            {{#foreach posts}}
                {{> "loop"}}
            {{/foreach}}
                {{/get}}
        </div>
        {{pagination}}
    </main>
</div>

My loop.hbs (I think unchanged except for styling?):

<div class="grid-item">
    <figure class="{{post_class}}">
        <a class="post-link" href="{{url}}">
            <img class="post-image lazyload" data-srcset="{{> srcset}}"
                data-sizes="auto" src="{{img_url feature_image size="s"}}"
                alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}">
        </a>
        <a class="post-lightbox" href="{{img_url feature_image}}">
            <i class="icon icon-arrow-expand"></i>
        </a>
        <figcaption class="post-caption">
            <h2 class="post-caption-title">{{title}}</h2>
            <div class="post-caption-meta">
                {{#primary_tag}}
                    <span class="post-caption-meta-item post-caption-meta-tag">
                        <a href="{{url}}">{{name}}</a>
                    </span>
                {{/primary_tag}}
                <span class="post-caption-meta-item post-caption-meta-date">
                    <time
                        datetime="{{date format="YYYY-MM-DD"}}">{{date published_at}}</time>
                </span>
                <span class="post-caption-meta-item post-caption-meta-link">
                    <a href="{{url}}">View project</a>
                </span>
            </div>
        </figcaption>
    </figure>
</div>

The setup above gives me two copies of each post. Reverting to vanilla edge does not do that on the front page, so I’m pretty confident this isn’t a database problem or something.

I tried removing the {{#get “posts”}} and {{/get}} thinking maybe it was getting set already by some other code, but then I got NO posts. I’d like all the posts (so no filter or tag) to show up on the /all/ page, but only once.

Help, please? I’m enough of a Ghost and Handlebars newbie that I’m about at the limits of what I can troubleshoot.

Edit to add: It’s a little hard to tell with the masonry packing wizardry, but I’d say I’m getting one whole set of posts, then a second whole copy of those posts. So it’s like 1-2-3-4-1-2-3-4, not 1-1-2-2-3-3-4-4. Not sure if that’s a clue or not. :slight_smile:

2

You got pretty far with theme development, so kudos :clap: to you!

This is a tricky one because there’s a bit going on behind the scenes :magic_wand:

I think you want to customize your homepage to not use the images, is that right?

First, your current routes file is going to cause trouble because collections are exclusive. Right now, there won’t be any posts left over for /all/.

What I would do is delete the custom route and use a home.hbs page. This will automatically be your custom homepage. Then, everything else should work with this key: remove the gh-feed class from the custom homepage. Then, you shouldn’t get any duplicate posts. You also won’t need the {{get}} helper.

3

Thanks for the quick reply, @RyanF.

To clarify, my / page is entirely different, with a custom page at index.hbs. (Do you need to see it? I can certainly include it if needed, but basically, it pulls featured posts and some content from a specific page.) And then /all/ is supposed to get all the posts.

So if I understand right, I should put the custom page setup at home.hbs, and delete the / section of routes.yaml, because I don’t need it? And keep /all/, because I do need it? Or does just having an all.hbs file take care of things?

Sorry, I think I’m still confused!

4

I’m re-reading this. Thanks for the clarification on collections being exclusive. I’m not sure I’d understood that distinction between routes and collections. So that should mean no posts available to /all/ in my current structure, in the absence of a {{#get}}, which is exactly what I see. But when I use a {{get}} (see my all.hbs above), I get all the posts twice.

Hang on a second. It occurs to me that there’s a LOT of javascript on this page (which is why I wanted to use it - Edge implements a cool lightbox/photoswiper feature I didn’t want to build from scratch). When I inspect the SOURCE CODE for the page in my browser, there’s only one copy of each post. So this is not a #get gremlin, and although the thing I did with routes is weird, it isn’t actually the problem either. It’s some of the javascript running on the page. This is maybe some interaction between the javascript that does the masonry packing and the javascript that does the photoswiper, and it’s 100% my fault, because I changed a few styles (client wanted a dark page, not a light page), and I must have removed something important. ARGH. I guess today I’m comparing a working edge install with my duplicates-causing mod-edge.

5

Not sure if you figured everything out, but it seems like you were making progress.

Nevertheless, you’re right that there’s a lot of JS going on that is likely causing the issue. The masonry plugin is hooking into the gh-feed class. Removing it should alleviate the issues with the double posts.

If you have additional questions, don’t hesitate to shout :smile: