I want to show featured posts on sidebar, and I code like this:
{{#foreach posts}}
{{#if featured}}
<!-- do something -->
{{/if}}
{{/foreach}}
This works well for me on homepage, but when I turn to single post page it's broken.
Seeming that I can't use {{#posts}} on single post page?
Related
I'm looking to get the URL of a post accessed using a {{#foreach posts}}{{/foreach}} helper. The structure I am using right now is :
<div class="pfdflxbx">
{{#get "posts" limit="3" include="tags, authors" filter="featured:true"}}
{{#foreach posts limit="3"}}
{{title}}
{{/foreach}}
{{/get}}
</div>
When I insert a {{url}} helper between {{title}} and {{/foreach}}, the URL that gets returned to me is the url of the site's home page.
If I use the following structure:
<div class="pfdflxbx">
{{#get "posts" limit="3" include="tags, authors" filter="featured:true"}}
{{#foreach posts limit="3"}}
{{#post}}
{{title}}
{{/post}}
{{/foreach}}
{{/get}}
</div>
Nothing renders to the DOM, as in, no posts populate.
Could someone help shed some light on the correct practice here?
The first solution I posted was correct. There is a bug in the back end version I am working with which causes the URL of the blog posts to redirect to the welcome page.
I am creating a Ghost Theme and I want to have my index.hbs show the featured post as the page. I have tried a range of things but nothing seems to work:
index.hbs
{{!< default}}
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}
{{!-- The main content area --}}
<main>
{{#foreach posts}}
{{#has featured="true"}}
{{post}}
{{/has}}
{{/foreach}}
</main>
I think the best way to achieve having a featured post as the main page would be to use Dynamic Routing and route / to the post or page with featured flag. Alternatively, you could fetch and display the featured post using the {{get}} query described here.
I'm a Ghost beginner, and I know I can get the list of pages doing like below.
{{#get "pages"}}
{{#foreach pages}}
{{{html}}}
{{/foreach}}
{{/get}}
But am I able to fetch a specific page? Let's assume that I have an "about" page that I'd like to fetch in order to show its contents into the blog's sidebar, for example, this is what I tried, but it's not working.
{{#get "pages/slug/about" as page}}
{{page}} // prints undefined
{{/get}}
Any help would be much appreciated.
The first parameter passed to the #get helper specifies the name of the resource you want to query. It should be either posts, tags or authors. In your use case it should be posts.
{{#get "posts" slug="pages/slug/about" as |post|}}
{{#post}}
<h1>{{title}}</h1>
<div class="post-content"> {{content}} </div>
{{/post}}
{{/get}}
I'm working on a blog for a friend of mine who wants to put a meme picture at the bottom of the index page.
So the simplest way is to edit the template and reference it from there.
The problem is, it's not user friendly to keep editing and uploading a new template.
So I had this idea that I could create a static page and place it on that page and reference it from the template. But I see that when you upload an image to ghost.io it generates a name based on the date path. That's not going to work for a fixed URL in the template.
Another option might be to use the tags. As tags allows you to put a picture and has a URL. But I tried that it also has similar problems.
How can I make this work nicely?
Don't reference image URL in your theme. Reference page slug and load its content, which would be just an image.
Example with Ghost Handlebars API:
{{!-- If a static page "meme" exists - its content will be loaded here --}}
{{#get "posts" slug="meme" }}
{{#foreach posts}}
<div>
{{content}}
</div>
{{/foreach}}
{{/get}}
I am trying to show featured image thumbnails in my jQuery Mobile App using Handlebars.js
I successfully retrieved the json feed from the wordpress site and each post shows up in a listview inside a handlebar template in my html file.
Here's the template source:
<script id="" type="text/x-handlebars-template">
{{#each posts}}
<li data-postid="{{ID}}">
<a data-transition="slide" href="#single">
<img src="{{{featured_image}}}"/>
<p>{{{title}}}</p>
<small class="archive-date">{{timeAgo date}}</small>
</a>
</li>
{{/each}}
</script>
Problem is some posts don't have a featured image so no image thumbnail shows up in my jQuery mobile listview for those posts. Please how can I write a conditional statement in handlebars template to show a featured image thumbnail if it exist but if not, it should just display a default image from my project's images folder
Try this:
{{#if featured_image}}
<img src="{{{featured_image}}}"/>
{{else}}
<img src="/images/default_image.jpg" />
{{/if}}
See this fiddle