Show featured image(if it exist) from Wordpress JSON feed using Handlebars.js

1
votes

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

1
wordpresshandlebars.js

1 Answers

2
votes

Try this:

{{#if featured_image}}
   <img src="{{{featured_image}}}"/>
{{else}}
   <img src="/images/default_image.jpg" />
{{/if}}

See this fiddle