Featured posts on front page - handlebars.js

How can display featured posts at the top of the front page?
Followed by the remaining posts.
Currently they display at the top of each page of the pagination.
Here's my loop.hbs:
{{! Previous/next page links - only displayed on page 2+ }}
<div class="extra-pagination inner">
{{pagination}}
</div>
{{! This is the post loop - each post will be output using this markup }}
{{#foreach posts}}
{{#if featured}}
<article class="{{post_class}} featured">
<header class="post-header">
<h2 class="post-title">{{{title}}}</h2>
</header>
<section class="post-excerpt">
<p>{{excerpt words="26"}} <a class="read-more" href="{{url}}">»</a></p>
</section>
<footer class="post-meta">
{{#if author.image}}<img class="author-thumb" src="{{author.image}}" alt=" {{author.name}}" nopin="nopin" />{{/if}}
{{author}}
{{tags prefix="on"}}
<time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time>
</footer>
</article>
{{/if}}
{{/foreach}}
{{! This is the post loop - each post will be output using this markup }}
{{#foreach posts}}
{{#unless featured}}
<article class="{{post_class}}">
<header class="post-header">
<h2 class="post-title">{{{title}}}</h2>
</header>
<section class="post-excerpt">
<p>{{excerpt words="26"}} <a class="read-more" href="{{url}}">»</a></p>
</section>
<footer class="post-meta">
{{#if author.image}}<img class="author-thumb" src="{{author.image}}" alt=" {{author.name}}" nopin="nopin" />{{/if}}
{{author}}
{{tags prefix="on"}}
<time clas s="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time>
</footer>
</article>
{{/unless}}
{{/foreach}}
{{! Previous/next page links - displayed on every page }}
{{pagination}}
Here's my blog: http://netsca.pe/
The only featured post currently is How to Install Ghost on AWS | Amazon EC2 for free - the Complete Guide.
As you can see, it is displayed at the top of the third page of posts, as opposed to at the top of the front page.
I had a read of Stack Overflow: newest post with specific tag on the front page but still can't figure this out.
Also had a read through this: The Ghost Blogging Support Forum: Show Featured post first on index page
but still nowhere.

variations of {{get}} were not successful for me on the latest version of Ghost. What did work was:
<section id="main">
{{#foreach posts}}
{{#if featured}}
html for featured posts
{{/if}}
{{/foreach}}
<div>
{{#foreach posts}}
{{^if featured limit="2"}}
html for regular post loop
{{/if}}
{{/foreach}}
</div>
</section>
This displayed the featured posts on top while another separately styled loop of posts were displayed below.

Firstly credit to #subic from ghost.slack.com who kindly tested my theme and pointed me in the right direction.
After having a read of the lengthy discussion GitHub Ghost Issue: Query (get) helper #4439 recently closed, great news - helpers and filters are being added to Public API v1!
The {{#get}} helper #5619 has just been merged to master (still unstable), so the solution:
{{#get "posts" featured="true" as |featured|}}
{{#foreach featured}}
...
{{/foreach}}
{{/get}}

Related

Ghost page template load more posts button not showing

I am new to ghost and tried to include posts on a own page:slug.hbs template with the following code. The posts are shown but the gh-loadmore button is removed in the produced output. How can I use the load more function to display the rest of the posts on this page.
<main id="gh-main" class="gh-main gh-outer">
<div class="gh-inner">
<div class="gh-wrapper">
<section class="gh-section">
<div class="gh-feed">
{{#get "posts" filter="tags:mytag"}}
{{#foreach posts limit="8"}}
{{> loop}}
{{/foreach}}
{{/get}}
</div>
<button class="gh-loadmore gh-btn">Load more</button>
</section>
</div>
</div>
</main>

Filter Ghost Homepage with specific tags

I use Ghost 3.0.2
I would like to limit first page (index.hbs) to display only posts with some tags.
I tryed without luck:
{{#foreach posts}}
{{#has tag="es"}}
{{> post}}
{{/has}}
{{/foreach}}
Current code is:
<!-- start content area -->
<div class="main-content-area">
<div class="container post-listing">
{{> loop}}
</div>
</div>

How to list pages in Ghost CMS?

I'm trying to show pages on my homepage.
In my home.hbs I have
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}
{{#is "home"}}
{{#if #site.description}}
<header class="page-head">
<h2 class="page-head-title">{{#site.description}}</h2>
</header>
{{/if}}
{{/is}}
{{#get "posts" filter="page:true"}}
{{#foreach posts}}
{{title}}
<p>{{excerpt words="33"}}</p>
{{/foreach}}
{{/get}}
Nothing is listed on my homepage. This works for posts but not pages for some reason.
I have the article featured, and it has "Category" tag - is it possible to display these on the homepage?
You're almost there, try this:
{{#is "home"}}
{{#if #site.description}}
<header class="page-head">
<h2 class="page-head-title">{{#site.description}}</h2>
</header>
{{/if}}
{{/is}}
{{#get "pages" limit="all"}}
{{#foreach pages}}
{{title}}
<p>{{excerpt words="33"}}</p>
{{/foreach}}
{{/get}}
Hope this helps :)

How to chain #has functional helper for {{else has}}

I am trying to achieve {{else has}} same like "else if" in handlebars theme of ghost.io but I am facing an issue but it works as expected.
{{#primary_tag}}
{{#has slug="first-slug"}}
<h1>in slug 1</h1>
{{else has slug="slug-2"}}
<h2>In Slug 2</h2>
{{else}}
{{!-- TTC Modal - otherwise this --}}
<h3>In other slug</h3>
{{/has}}
{{/primary_tag}}
I am following the https://docs.ghost.org/api/handlebars-themes/helpers/has/ but there is no proper for {{else has}}

Woocommerce's Cart page is being overwritten by my Page.php page in Wordpress

I'm having a little bit of a problem. My page.php seems to be overriding WooCommerce's cart page. The page is already created (generated by WooCommerce with the shortcode intact) named Cart.
I know that my page.php is overriding it, but I don't know how to stop that. Here is the code for my page.php page:
<?php
get_header();
if ( have_posts() ) {
//Work with us page
$workwithuspage = "work with us";
$pitch = "pitch an idea";
$cart = "cart";
if($workwithuspage == strtolower(get_the_title()))
{
//Page stuff here!
$image = wpse_get_images();
?>
</div>
<div class="hero">
<div class="container heroImage" style="background-image:url('<?php echo $image->guid;?>');">
<div class="col-md-7"></div>
<div class="col-md-5">
<div class="pageText">
Work with Us
</div>
<div class="subText">
<?php echo $image->post_content; ?>
</div>
</div>
</div>
</div>
<div class="bodyBg">
<div class="container">
<div class="col-md-6">
<div class="box-style">
<div class="box-header">
Got a comic idea and want it published?
</div>
<div class="box-text">
Tell us your desires, so we can slap it on a comic book and sell it for millions. Ya dig?
</div>
<div class="box-button-container">
<?php
$pitch = get_page_by_title('pitch an idea');
?>
<div class="button large">Pitch an Idea</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="box-style">
<div class="box-header">
Want to work on one of our great titles?
</div>
<div class="box-text">
Tell us your desires, so we can slap it on a comic book and sell it for millions. Ya dig?
</div>
<div class="box-button-container">
<div class="button large">Find Jobs</div>
</div>
</div>
</div>
</div>
</div>
<div id="ourstandards">
<div class="coloroverlay">
<div class="container">
<div class="col-md-6">
<div class="pageHeaderText">
Our Standards
</div>
<div class="bodyTxt">
<p>
At On Target Network, we strive to promote consistency,
communication and passion in all areas of work and we expect the same of our artists.
</p>
<p>
We understand the nature of creators and seek to raise ourselves to higher and higher standards. To do that, we vet and
review series pitches with a carefully selected panel of writers and artists.
</p>
<br /><br />
<p>
Got questions? We'll be happy to help.
</p>
<div id="sendUsQ" class="secondaryBtn">
Send us your questions
</div>
</div>
</div>
<div class="col-md-6"></div>
</div>
</div>
</div>
<div class="container">
<?php
}
else if($pitch == strtolower(get_the_title()))
{
?>
</div>
<div id="pitchImg" class="hero">
<div class="container">
<div class="col-md-7"></div>
<div class="col-md-5">
<div class="pageText">
Pitch an Idea
</div>
<div class="subText">
<?php echo $image->post_content; ?>
</div>
</div>
</div>
</div>
<div class="bodyBg">
<div class="container">
<div class="col-md-12">
<div class="pageHeaderText dark">
Start your pitch here
</div>
</div>
<div class="col-md-9">
<?php
if ( isset($si_contact_form) ) {
echo $si_contact_form->si_contact_form_short_code( array( 'form' => '1' ) );
}
?>
</div>
</div>
</div>
<?php
}
}
get_footer();
?>
I have conditional ifs for pages I wanted to customize, but I fear in doing that, it has overridden (somehow) the cart page.
WooCommerce adds the cart using shortcodes; shortcodes get displayed as part of the page content. WP uses the the_content() function to display the content for a particular page or post. You've removed the_content() from your page template, therefore the cart doesn't display.
Looking at your page template, you've removed the_content() and inlined all your content directly into the template rather than fetching it from the database. This is atypical of a WP site in general, but I understand that sometimes a site starts off static and you just want to get it 'into' WP.
You're also using a bunch conditionals to display different chunks of content, which runs against the idea of using templates. My suggestion would be to create separate page templates for your 'pitch' and 'work with us' pages, and make page.php just a default page template that has the_content(). This way you have a generic template you can use for any page, including the cart page.
Check the codex for more info on creating custom page templates, but in a nutshell, you add a comment to the top of the file:
<?php
/*
Template Name: My Custom Page
*/
Then save your file in your theme folder. Common practice is to name it along the line of page-pitch.php so you can easily identify it. Then in the admin area you can assign the template to any page you want simply by selecting it from the drop down menu.
Splitting your different content into separate templates has a couple of benefits; namely you no longer have to use conditionals for checking the page titles (which can vary from install to install) and makes it much easier for you to debug things.

Resources