Adding featured posts on custom home page

[Backspaze]

I need some help with figuring out how to add featured posts to a custom home page.

• I'm using the Mercury theme.
• I've created a page to be used as homepage for the site.
• I've enabled Set page as homepage under Site settings > Advanced options > SEO > Homepage and chosen the page from the previous step.
• I've created a custom page template.
  • The template is based on the default template. I've added the code in the <section>...</section> container as shown below.

  <div class="content__entry">
    {{{text}}}
    <section>
      {{#getPostsByTags "count=-1&allowed=featured"}}
        <li>
          <h2>{{ title }}</h2>
          <div>{{{ excerpt }}}</div>
        </li>
      {{/getPostsByTags}}
    </section>
  </div>

This works for listing the posts, but it only shows the header and excerpt, and no link or image. What I want is for the list to be shown as on the default homepage for the theme, as shown in the demo here, except I don't want the filter to be shown.

I figured I could just copy the code from index.hbs, but when I replace the <li>...</li> in my code with the code from index.hbs (shown below), I only get a spinning circle on that part of the page, as if it's stuck in an infinite loading loop. Can someone help me figure out what I'm doing wrong?

{{#checkIf @config.custom.cardsLayout '==' "compact" }}
   <div class="l-col l-col{{@config.custom.layoutFrontpage}}">
      {{#each posts}}
         <section
            class="c-card{{#isFeatured}} c-card--compact c-card--featured{{/isFeatured}}
               {{#checkIf @config.custom.filtersType '=='"maintag"}} 
                  {{#if mainTag}}{{ mainTag.slug }}{{/if}}
               {{else}}
                  {{#each tags}} {{slug}} {{/each}}
               {{/checkIf}}">
            <a href="{{url}}" class="c-card__link">
               {{#featuredImage}}     
                 {{#if url}}                 
                     <div class="c-card__header">
                        <img
                           src="{{url}}"
                           {{#if @config.site.responsiveImages}}
                              {{responsiveImageAttributes 'featuredImage' srcset.cards sizes.cards}}
                           {{/if}}
                           {{ lazyload "lazy" }}
                           height="{{height}}"
                           width="{{width}}"
                           alt="{{alt}}">
                     </div>   
                 {{/if}}                     
               {{/featuredImage}}
               <div class="c-card__body c-card__body--compact">
                  <div class="c-card__text c-card__text--compact">
                     <h2>
                        {{title}}
                     </h2>
                     {{#if @config.custom.cardsDate}}
                        <time datetime="{{date createdAt 'YYYY-MM-DDTHH:mm'}}">
                           {{#checkIf @config.custom.formatDate '!=' 'custom'}}
                              {{date createdAt @config.custom.formatDate}}
                           {{else}}
                              {{date createdAt @config.custom.formatDateCustom}}
                           {{/checkIf}}
                        </time>
                     {{/if}}
                  </div>
               </div>
            </a>
         </section>
      {{/each}}
   </div>
{{else}}
   <section class="l-col l-col{{@config.custom.layoutFrontpage}}">
      {{#each posts}}
         <article
            class="c-card{{#isFeatured}} c-card--featured{{/isFeatured}} 
               {{#checkIf @config.custom.filtersType '=='"maintag"}} 
                  {{#if mainTag}}{{ mainTag.slug }}{{/if}}
               {{else}}
                  {{#each tags}} {{slug}} {{/each}}
               {{/checkIf}}
            ">
            <a href="{{url}}" class="c-card__link">
               {{#featuredImage}}
                  {{#if url}} 
                     <div class="c-card__header">
                        <img
                           src="{{url}}"
                           {{#if @config.site.responsiveImages}}
                              {{responsiveImageAttributes 'featuredImage' srcset.cards sizes.cards}}
                           {{/if}}
                           {{ lazyload "lazy" }}
                           height="{{height}}"
                           width="{{width}}"
                           alt="{{alt}}">
                     </div> 
                  {{/if}} 
               {{/featuredImage}}
               <div class="c-card__body">
                  <div class="c-card__text">
                     <h2>
                        {{title}}
                     </h2>
                     {{#if @config.custom.cardsDate}}
                        <time datetime="{{date createdAt 'YYYY-MM-DDTHH:mm'}}">
                           {{#checkIf @config.custom.formatDate '!=' 'custom'}}
                              {{date createdAt @config.custom.formatDate}}
                           {{else}}
                              {{date createdAt @config.custom.formatDateCustom}}
                           {{/checkIf}}
                        </time>
                     {{/if}}
                  </div>
               </div>
            </a>
         </article>
      {{/each}}
   </section>
{{/checkIf}}

[gpsblues]

Hi, sorry Translate :)

To get links and display the featured image you need to use the {{url}} and {{featuredImage}} helpers.

In your case instead of a custom post/page I would override index.hbs. This is a path I have followed several times to show featured posts in home.

The new index.hbs will contain only the elements you are interested (eg. remove the filter and unused JS).
Instead of {{#each posts}} replace {{#getPostsByTags ... ... }} to display featured posts.

For a more scalable solution you can add theme options that allow the default view with filter or the featured post view without filter.

Unfortunately I don't know Mercury in detail and these are just general considerations.

The error you are getting could also be due to the JS that handles the filter, check your browser console logs to find out more.

[Backspaze]

Thanks for the tip @gpsblues! I tried editing index.hbs by replacing {{#each posts}} with {{#getPostsByTags ... ... }} and it worked fine, but I got a few reasons as to why I prefer to use a custom home page instead of editing index.hbs.

• Editing the text shown above the articles is done by editing the Hero text under Theme > Custom settings > Layout, which is more limited than the options you have in the WYSIWYG editor.
• The Hero text is formatted according to it's CSS class, which is not what I want, mainly because the font for a regular text paragraph in the hero text is some heavily customized font, which does not appeal to me.
• In the site navigation, I have a link to every separate tag/category on the site, and also a link to show all posts/articles. That link is using the newly added Posts index link, which just points to the default index.hbs. I want that page to display only a header saying All articles which is done by adding a H1 header in the Hero text, and it should show all articles, with the filter for sorting, which the default index.hbs does if you set the posts per page options to -1.

When someone first comes to the site, they should be greeted with the custom home page, with a custom welcome message, and the featured articles. They can then navigate to the different tags/categories or go to the all posts/articles page. So, I basically have two options:

• Create a custom home page and keep the default index.hbs for the all articles view.
• Edit the default index.hbs and create a custom page for the all articles view.

To me, it seems easier to create a custom home page. After some more digging and editing, I'm almost where I want it to be, but I'm unable to get rid of the spinning circle, which is still shown in the middle behind the cards as shown in the GIF below.

Using the browser dev tools, I can see that the spinning circle is part of the <section class="l-col l-col--4"> tag, more precisely it's the ::before CSS pseudo element for that tag.

When using the dev tools on the demo page for the theme, I don't see the ::before element in the dev tools. My best guess is that I'm seeing it on my site is because of a JS error which fails to remove the element when the site is loaded. I only see one error in the console though - Error: ⛔ Core error code: InvalidTabOrUrl which refers to injected.js:40:15385 - which is just JS related to 1Password. The spinning circle has nothing to do with 1Password though, because it also shows up in other browsers where I'm not using 1Password.

If anyone is up for some testing, you can find the code for my custom home page HBS file in the spoiler tag below. Just follow the steps in my first post to replicate the issue.

Custom homepage HBS

{{> head}}
{{> navbar}}
<main>
  {{#if @customHTML.beforePage}}
    <div class="banner banner--before-content">
      {{{@customHTML.beforePage }}}
    </div>
  {{/if}}
  {{#page}}
    <section>
      <header class="hero">
        {{#checkIfAny @config.page.displayAuthor @config.page.displayDate}}
          <p class="content__meta">
            {{#if @config.page.displayAuthor}}
              {{#author}}
                {{ translate 'post.publishedBy' }}
                <a href="{{url}}" rel="author" title="{{name}}">{{name}}</a>
              {{/author}}
            {{/if}}
            {{#if @config.page.displayDate}}
              {{ translate 'post.publishedOn' }}
              <time datetime="{{date createdAt 'YYYY-MM-DDTHH:mm'}}">
                {{#checkIf @config.custom.formatDate '!=' 'custom'}}
                  {{date createdAt @config.custom.formatDate}}
            {{else}}
              {{date createdAt @config.custom.formatDateCustom}}
                {{/checkIf}}
              </time>
            {{/if}}
          </p>
        {{/checkIfAny}}
        <h1 class="content__title">{{title}}</h1>
      </header>
      {{#featuredImage}}
        {{#if url}}
          <figure class="content__featured-image {{@config.page.featuredImageWidth}}">
            <img src="{{url}}" {{#if @config.site.responsiveImages}} {{responsiveImageAttributes 'featuredImage' srcset.post sizes.post}} {{/if}} {{ lazyload "eager" }} height="{{height}}" width="{{width}}" alt="{{alt}}">
            {{#checkIfAny caption credits}}
              <figcaption>
                {{caption}}
                {{credits}}
              </figcaption>
            {{/checkIfAny}}
          </figure>
        {{/if}}
      {{/featuredImage}}
      <div>
        {{{text}}} {{#checkIf @config.custom.cardsLayout '==' "compact" }}
          <div class="l-col l-col{{@config.custom.layoutFrontpage}}">
            {{#getPostsByTags "count=-1&allowed=featured"}}
              <section class="c-card{{#isFeatured}} c-card--compact c-card--featured{{/isFeatured}}
                     {{#checkIf @config.custom.filtersType '=='"maintag"}} 
                        {{#if mainTag}}{{ mainTag.slug }}{{/if}}
                     {{else}}
                        {{#each tags}} {{slug}} {{/each}}
                     {{/checkIf}}">
                <a href="{{url}}" class="c-card__link">
                  {{#featuredImage}}
                    {{#if url}}
                      <div class="c-card__header">
                        <img src="{{url}}" {{#if @config.site.responsiveImages}} {{responsiveImageAttributes 'featuredImage' srcset.cards sizes.cards}} {{/if}} {{ lazyload "lazy" }} height="{{height}}" width="{{width}}" alt="{{alt}}">
                      </div>
                    {{/if}}
                  {{/featuredImage}}
                  <div class="c-card__body c-card__body--compact">
                    <div class="c-card__text c-card__text--compact">
                      <h2>
                        {{title}}
                      </h2>
                      {{#if @config.custom.cardsDate}}
                        <time datetime="{{date createdAt 'YYYY-MM-DDTHH:mm'}}">
                          {{#checkIf @config.custom.formatDate '!=' 'custom'}}
                            {{date createdAt @config.custom.formatDate}}
                      {{else}}
                        {{date createdAt @config.custom.formatDateCustom}}
                          {{/checkIf}}
                        </time>
                      {{/if}}
                    </div>
                  </div>
                </a>
              </section>
            {{/getPostsByTags}}
          </div>
          {{else}}
            <section class="l-col l-col{{@config.custom.layoutFrontpage}}">
              {{#getPostsByTags "count=-1&allowed=featured"}}
                <article class="c-card{{#isFeatured}} c-card--featured{{/isFeatured}} 
                     {{#checkIf @config.custom.filtersType '=='"maintag"}} 
                        {{#if mainTag}}{{ mainTag.slug }}{{/if}}
                     {{else}}
                        {{#each tags}} {{slug}} {{/each}}
                     {{/checkIf}}
                  ">
                  <a href="{{url}}" class="c-card__link">
                    {{#featuredImage}}
                      {{#if url}}
                        <div class="c-card__header">
                          <img src="{{url}}" {{#if @config.site.responsiveImages}} {{responsiveImageAttributes 'featuredImage' srcset.cards sizes.cards}} {{/if}} {{ lazyload "lazy" }} height="{{height}}" width="{{width}}" alt="{{alt}}">
                        </div>
                      {{/if}}
                    {{/featuredImage}}
                    <div class="c-card__body">
                      <div class="c-card__text">
                        <h2>
                          {{title}}
                        </h2>
                        {{#if @config.custom.cardsDate}}
                          <time datetime="{{date createdAt 'YYYY-MM-DDTHH:mm'}}">
                            {{#checkIf @config.custom.formatDate '!=' 'custom'}}
                              {{date createdAt @config.custom.formatDate}}
                        {{else}}
                          {{date createdAt @config.custom.formatDateCustom}}
                            {{/checkIf}}
                          </time>
                        {{/if}}
                      </div>
                    </div>
                  </a>
                </article>
              {{/getPostsByTags}}
            </section>
        {{/checkIf}}
      </div>
      {{#checkIfAny @config.page.displayLastUpdatedDate @config.page.displayshareButtons @config.page.displayAuthorBio}}
        <footer class="content__footer">
          {{#if @config.page.displayLastUpdatedDate}}
            {{#if modifiedAt}}
              <div class="content__last-updated">
                {{ translate 'post.lastUpdatedDate' }}
                {{#checkIf @config.custom.formatDate '!=' 'custom'}}
                  {{date modifiedAt @config.custom.formatDate}}
            {{else}}
              {{date modifiedAt @config.custom.formatDateCustom}}
                {{/checkIf}}
              </div>
            {{/if}}
          {{/if}}
          {{#if @config.page.displayShareButtons}}
            <div class="content__footer__col">
              {{#checkIfAll @plugins.socialSharing @plugins.socialSharing.state}}
                <div class="content__share">
                  {{{@customSocialSharing}}}
                </div>
          {{else}}
            <div class="content__share">
              {{> share-buttons}}
            </div>
              {{/checkIfAll}}
            </div>
          {{/if}}
          {{#if @config.page.displayAuthorBio}}
            {{#author}}
              <div class="content__bio">
                {{#if avatar}}
                  <img src="{{avatarImage.url}}" {{ lazyload "eager" }} height="{{avatarImage.height}}" width="{{avatarImage.width}}" alt="{{avatarImage.alt}}">
                {{/if}}
                <div>
                  {{#if name}}
                    <h3>
                      <a href="{{url}}" class="invert" title="{{name}}">{{name}}</a>
                    </h3>
                  {{/if}}
                  {{{description}}}
                </div>
              </div>
            {{/author}}
          {{/if}}
        </footer>
      {{/checkIfAny}}
    </section>
    {{#if @config.page.displayChildPages}}
      {{#if subpages}}
        <div class="subpages">
          <div class="wrapper">
            <h2 class="h6 subpages__title">{{ translate 'page.childPages' }}</h2>
            <ul class="subpages__list">
              {{> subpages-list}}
            </ul>
          </div>
        </div>
      {{/if}}
    {{/if}}
    {{#if @config.page.displayComments}}
      <div class="comments-area wrapper">
        {{{@commentsCustomCode}}}
      </div>
    {{/if}}
    {{#if @customHTML.afterPage}}
      <div class="banner banner--after-content">
        {{{@customHTML.afterPage}}}
      </div>
    {{/if}}
  {{/page}}
</main>
{{> footer}}

[Backspaze]

For testing purposes, I created a new page template which is an exact copy of index.hbs, and while the default index site loads the articles just fine, the page does not. It just shows the spinning loading circle.

Is this expected behavior or have I found an issue here? If this is expected behavior, could someone elaborate on what I'm doing wrong or missing? As you can see in the conversation above, all attempts at loading the posts/articles in a grid on a page results in the spinning icon appearing and never going away. Maybe @bobmitro or @dziudek can chime in regarding this?

Steps to reproduce

• Create a site.
• Install the Mercury theme.
• Make a copy of index.hbs and rename the copy to something like page-all-articles.hbs.
• Add that page template to config.json by either editing to original or use theme overrides.
• Create a page in Publii and select the template for all articles. Give the page a title and then click on Save and close.
• Add a menu link to the page and call it something like All articles (page).
• Add a menu link to all posts/articles and call it something like All articles (posts index).
• Assign the menu as Main menu.
• Preview the page.
• Click on the All articles (page) link, the spinning loading circle pops up and never goes away.
• Click on the All articles (posts index) link or the site title, the spinning circle disappears and the site loads just fine.

[gpsblues]

Hi,

Your problem made me curious...

Your "Custom homepage HBS" code works perfectly. If I apply it to a page template and set that page as home I see the featured posts correctly:

This is because you are using {{getPostsByTags}} instead of {{each posts}}.

The problem with index.hbs code not working on page-home.hbs is that {{each posts}} is not reachable from the page structure.
If you replace {{each posts}} with {{#each website.contentStructure.posts}} you should see everything correctly.
https://getpublii.com/dev/website-global-variable/

[Backspaze]

Thanks again @gpsblues for spending time on this issue. However, I can not replicate your results.

On your test site, you have a three column view. Are you 100% certain that the spinning circle is not hidden behind the middle image? Does the ::before pseudo element show up in the dev tools? If you change the layout to a four column view (like in the GIF in my previous reply), do you see the spinning circle then? I'm asking since on my site, if I change to a three column view, the middle image obfuscates the spinning circle, but it's still there and shows up in the dev tools.

It really feels like I've found a bug, and I might create an issue of my previous comment, but I'll hold off on that until someone can confirm that they can replicate it on another device.

In my test site, which is configured from scratch according to the steps to reproduce in my previous reply, I edited page-all-articles.hbs and replaced {{each posts}} with {{#each website.contentStructure.posts}}, but it's still just showing a spinning circle, while the index or posts index site loads without showing the spinning circle.

If I add a page template for featured articles and use my Custom homepage HBS from the previous reply, I get the same issue as with the other site - the post list is loaded, but that spinning circle is still there to ruin the day.

[gpsblues]

Hi,
I'm away at the moment and can't check.

The screenshot I attached was made with your code in a page template set as home.

The global variable to use is @website.contentStructure.posts
I forgot @, sorry

[gpsblues]

Hi,

I'm attaching two versions of the post-home.hbs file: one shows the full list of posts, and the other displays only the featured posts. Both versions work well on my Mercury test site, and I've set them as home pages successfully.

However, the preloader issue still occurs because the Isotope library isn't loaded in the footer. You'll notice that the tag filter doesn’t work on this page. The footer for the full post list isn't being recognized as an "index" for some reason.

To fix this in the footer.hbs file, you’ll need to update this line:

{{#is "index,tag,tags,author"}}
      <script defer src="{{js "isotope.pkgd.min.js"}}"></script>
      ...
{{/is}}

to:

{{#is "index,tag,tags,author,page"}}
      <script defer src="{{js "isotope.pkgd.min.js"}}"></script>
      ...
{{/is}}

This will load Isotope on all pages, even those that don’t need it, which isn't ideal. It might be a bug, but it would be better to handle this with more advanced customization in index.hbs.

I had never used page templates as a home page before, so your issue made me curious :)

page-home (featured posts).zip
page-home (all posts).zip

[Backspaze]

Thank you very much @gpsblues for finding the culprit behind the preloader (and for giving it a better name than "spinning circle"). I never would've guessed that the solution would be to customize the footer.hbs. After adding page to the list according your instructions, the preloader is now gone from all of my test sites.

Regarding if loading the Isotope on all pages is ideal, I don't know how much it affects the performance of the site, but I expect the impact is negligible on most modern platforms.