Creating custom block for recents post or related post

Developer help
1

Can someone help me? i almost finished my custom ghost theme. im trying to display related post or recents post in the bottom of my post. the problem is im trying to fetch just one of them at a time. so if there’s no related post available i want to display recents post and vice versa. but i dont want display both at a time. this what i did :slight_smile:

 {{#if post.tags}}--> im not sure what this one do but it almost works
               {{#get "posts" limit="1" filter="tags:[{{post.tags}}]+id:-{{post.id}}" include="tags" as |related|}}
                  {{#if related}}
                <section class="related-post-footer">
                    {{#foreach related}}
                    <h3>Related topic</h3>
                    <a href="{{url}}"><H2>{{title}}</H2></a>
                    <p>
                        {{#if meta-description}}
                          {{meta-description}}
                        {{else}}
                          {{excerpt words= "12"}}
                        {{/if}}
                    </p>
                    <a href="{{url}}">
                      <button type="button" class="btn">Read more →</button>
                    </a>
                    {{/foreach}}
                </section> 
                {{/if}}
                {{/get}} 
              {{else}}
                {{#get "posts" limit="1" filter="id:-{{post.id}}" as |recents|}}
                {{#if recents}}
                <section class="related-post-footer">
                    {{#foreach recents}}
                       <h3>Recent post</h3>
                    <a href="{{url}}"><H2>{{title}}</H2></a>
                    <p>
                        {{#if meta-description}}
                          {{meta-description}}
                        {{else}}
                          {{excerpt words= "12"}}
                        {{/if}}
                    </p>
                    <a href="{{url}}">
                      <button type="button" class="btn">Read more →</button>
                    </a>
                    {{/foreach}}
                </section>
                {{/if}}
                {{/get}} 
               {{/if}}

i’ve read this already Tutorials

i’ve tried to put get helper nested but its not working… with above code im able to display related and recents, but when i have new post with new tag it doesnt pull anything.

the other problem is when i click the related post or recents its just go back and forth. i want them to loop to my other related or recents post.
Thanks !

2

I have this same question. I haven’t yet come up with a way to do this.

1 Like
3

Nested get queries aren’t supported at the moment, although we hope to make it work at some point.

Still, nested queries are a potential performance issue - if you nest queries, then Ghost doesn’t even know if it needs to make the second query til the first one is finished.

Given that all this happens before the page can render, you’re talking about adding significant delays to page load speeds - and therefore having a detrimental impact on your SEO.

There are other approaches easily available:

  1. client side: you can add these dynamic blocks using Ghost’s API and AJAX - that way all this extra information you’re putting on the page doesn’t impact your page load.

  2. server side: use CSS to choose what is displayed. Have your two {{#get}} helper blocks one-after-another, use classes to mark empty blocks and CSS sibling selectors to only show recents if related posts are empty. In this case you run one extra query sometimes, but at least the queries will run in parallel.

1 Like
4

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.