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
Related
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 would like to show content of my wordpress rest api however the wordpress html tag doesn't retrieve html.
It turns out like this
<p><b>content here blabalbalablabla</b></p> <p><span style="font-weight: 400;">
This is my code to call it :
<div class="marge" v-for="post in posts" :key="post.id">
<div class="blog-description"><p>{{ post.content.rendered }}</p></div
How do I retrieve it with html output not only tag. FYI I'm using vuejs and laravel on this project.
As I have gather what your are tryin to do is render raw html inside of a vue component. you can do that using v-html directive try following
<div class="marge" v-for="post in posts" :key="post.id">
<div class="blog-description">
<p><span v-html="post.content.rendered"></span></p>
</div>
</div>
for more information read the vue doc on template syntax
hope this helps!
I'm very confused here. I am very familiar with Wordpress, however, I cannot get the home page of my site to display the HTML and PHP etc that is currently in my home page template.
I have gone to settings - reading and set the home page to a static home page under 'Home', which as you can imagine has the page template for the HTML/PHP I want to display.
I was wondering if anyone knew of any other external factors that affect the home page and the templates being brought through on my other pages are actually working - it's very odd.
I have checked the DOM on the browser multiple times, using Chrome, however none of the divs etc are showing.
Here is the code for the front page so far:
<?php
/* Template Name: Home Page Template */
?>
<?php get_header(); ?>
<div class="header_banner">
<div class="image_content">
<div class="image">
<video playsinline="" autoplay="" muted="" loop="" poster="" onplaying="this.controls=false">
<source src="<?php echo get_stylesheet_directory_uri(); ?>/videos/video_background.mp4">
Your browser does not support the video element.
</video>
</div>
</div>
<div class="main_content center center_absolute">
<h1>I create and design websites.</h1>
<h2>I specialise in HTML, CSS, jQuery and Wordpress.</h2>
</div>
<div class="center_scroll">
<div class="scroll">
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
</div>
</div>
<?php get_footer();
One possibility is that the page you selected in the dropdown menu under Settings > reading does not have "Home Page Template" template selected under "Page Attributes" Meta Box.
You could rename the file to page-home.php since this template will only be used once on your site. Maybe this helps.
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?
I installed modx gallery and I want to link to the URL I type in when I upload new pictures on the backend. I tried to customize the template but can't find the URL-variable from the upload form:
http://rtfm.modx.com/display/ADDON/Gallery.Gallery.thumbTpl
How would I do this? Thank you.
The placeholder for the URL is [[+url]].
So, call
[[!Gallery &album=`1` &thumbTpl=`myThumbTplChunk`]]
and create chunk called "myThumbTplChunk" with this code:
<div class="[[+cls]]">
<a href="[[+url]]">
<img class="[[+imgCls]]" src="[[+thumbnail]]" alt="[[+name]]" />
</a>
</div>