Show X most recent posts on homepage

Using Ghost
1

Hello,

I’ve seen a few posts on the forum related to this, but haven’t been able to wrap my mind around it. I have content organized by tags into news and research. All of the tagged content shows up on the homepage.

Is there a way I can modify the home page to only show the say the 3 latest articles from news and the 3 latest articles from research?

Thanks!

2

Hey,

You can do this by using the get helper to request the posts. Then use a filter expression to filter specific posts by tag.

  {{#get "posts" include="tags" filter="tag:home-features" as |feature|}}
      {{#foreach feature}}
          {{> "post-card"}}
      {{/foreach}}
  {{/get}}

@brightthemes has an excellent post that explains filter expressions well:

2 Likes
3

Thank you! As a question:

  1. would I need to download the YAML file for this, or is it possible via code injection?
  2. Also can I put in two get commands since I would want 3 from each?
  3. Will it automatically pull the most recent posts for the tag, or will I manually have to create some sort of date variable?

Best,
Piroune

4
  1. You will have to edit your theme code directly with a text editor to do this.
  2. Yes, you can use several get functions in a template but the more you use, the slower your page speed will become.
  3. I do believe it is the most recent.
1 Like
5

Thank you! Can I ask another dumb question? I think I have to put the get command in the index.hbs file right? And if so (see below) - where in that should I put it? Any skeleton code you could provide would be massive.

Also really appreciate the help so far - you’re a legend!

index.hbs

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

<div class="site-header-content outer{{#match @custom.header_style "Left aligned"}} left-aligned{{/match}}{{#unless @custom.show_publication_cover}}{{#match @custom.header_style "Hidden"}} no-content{{/match}}{{/unless}}">

    {{#if @custom.show_publication_cover}}
        {{#if @site.cover_image}}
            {{!-- This is a responsive image, it loads different sizes depending on device
            https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
            <img class="site-header-cover"
                srcset="{{img_url @site.cover_image size="s"}} 300w,
                        {{img_url @site.cover_image size="m"}} 600w,
                        {{img_url @site.cover_image size="l"}} 1000w,
                        {{img_url @site.cover_image size="xl"}} 2000w"
                sizes="100vw"
                src="{{img_url @site.cover_image size="xl"}}"
                alt="{{@site.title}}"
            />
        {{/if}}
    {{/if}}

    {{#match @custom.header_style "!=" "Hidden"}}
        <div class="site-header-inner inner">
            {{#unless @custom.show_logo_in_navigation}}
                {{#if @site.logo}}
                    <img class="site-logo" src="{{@site.logo}}" alt="{{@site.title}}">
                {{else}}
                    <h1 class="site-title">{{@site.title}}</h1>
                {{/if}}
            {{/unless}}
            {{#if @site.description}}
                <p class="site-description">{{@site.description}}</p>
            {{/if}}
        </div>
    {{/match}}

</div>

{{!-- The main content area --}}
<main id="site-main" class="site-main outer">
<div class="inner posts">

    <div class="post-feed">
        {{#foreach posts}}
            {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
            {{> "post-card"}}
        {{/foreach}}
    </div>

</div>
</main>