I know my question seems weird but since I'm new when using ghost with handlebars language, I'm quite confused as to where I can find some of this data bind such as title, #site.logo, etc. I try to find it inside casper template but I still not find it, this is the example of the code image inside casper theme
if you ask why I try to find it, I want to try add some of the content inside it or at least I want to take a look what kind of data bind that casper have or provided.
for example in this post.hbs you can see that there is a lot of data bind in here, but I just can't find what else the data bind they provided,
{{!< default}}
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}
<header class="site-header">
{{> site-header}}
</header>
{{!-- Everything inside the #post tags pulls data from the post --}}
{{#post}}
<main id="site-main" class="site-main outer">
<div class="inner">
<article class="post-full {{post_class}} {{#unless feature_image}}no-image{{/unless}}">
<header class="post-full-header">
{{#if primary_tag}}
<section class="post-full-tags">
{{#primary_tag}}
{{name}}
{{/primary_tag}}
</section>
{{/if}}
<h1 class="post-full-title">{{title}}</h1>
{{#if custom_excerpt}}
<p class="post-full-custom-excerpt">{{custom_excerpt}}</p>
{{/if}}
<div class="post-full-byline">
<section class="post-full-byline-content">
<ul class="author-list">
{{#foreach authors}}
<li class="author-list-item">
<div class="author-card">
{{#if profile_image}}
<img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
{{else}}
<div class="author-profile-image">{{> "icons/avatar"}}</div>
{{/if}}
<div class="author-info">
{{#if bio}}
<div class="bio">
<h2>{{name}}</h2>
<p>{{bio}}</p>
<p>More posts by {{name}}.</p>
</div>
{{else}}
<h2>{{name}}</h2>
<p>Read more posts by this author.</p>
{{/if}}
</div>
</div>
{{#if profile_image}}
<a href="{{url}}" class="author-avatar">
<img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
</a>
{{else}}
{{> "icons/avatar"}}
{{/if}}
</li>
{{/foreach}}
</ul>
<section class="post-full-byline-meta">
<h4 class="author-name">{{authors}}</h4>
<div class="byline-meta-content">
<time class="byline-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time>
<span class="byline-reading-time"><span class="bull">•</span> {{reading_time}}</span>
</div>
</section>
</section>
</div>
</header>
{{#if feature_image}}
<figure class="post-full-image">
{{!-- This is a responsive image, it loads different sizes depending on device
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
<img
srcset="{{img_url feature_image size="s"}} 300w,
{{img_url feature_image size="m"}} 600w,
{{img_url feature_image size="l"}} 1000w,
{{img_url feature_image size="xl"}} 2000w"
sizes="(max-width: 800px) 400px,
(max-width: 1170px) 1170px,
2000px"
src="{{img_url feature_image size="xl"}}"
alt="{{title}}"
/>
</figure>
{{/if}}
<section class="post-full-content">
<div class="post-content">
{{content}}
</div>
</section>
{{!-- Email subscribe form at the bottom of the page --}}
{{#if #labs.members}}
{{> subscribe-form}}
{{/if}}
{{!--
<section class="post-full-comments">
If you want to embed comments, this is a good place to do it!
</section>
--}}
</article>
</div>
</main>
{{!-- Links to Previous/Next posts --}}
<aside class="read-next outer">
<div class="inner">
<div class="read-next-feed">
{{#if primary_tag}}
{{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
{{#if related_posts}}
<article class="read-next-card">
<header class="read-next-card-header">
{{#../primary_tag}}
<h3><span>More in</span> {{name}}</h3>
{{/../primary_tag}}
</header>
<div class="read-next-card-content">
<ul>
{{#foreach related_posts}}
<li>
<h4>{{title}}</h4>
<div class="read-next-card-meta">
<p><time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time> –
{{reading_time}}</p>
</div>
</li>
{{/foreach}}
</ul>
</div>
<footer class="read-next-card-footer">
<a href="{{#../primary_tag}}{{url}}{{/../primary_tag}}">{{plural meta.pagination.total empty='No posts' singular='% post' plural='See all % posts'}}
→</a>
</footer>
</article>
{{/if}}
{{/get}}
{{/if}}
{{!-- If there's a next post, display it using the same markup included from - partials/post-card.hbs --}}
{{#next_post}}
{{> "post-card"}}
{{/next_post}}
{{!-- If there's a previous post, display it using the same markup included from - partials/post-card.hbs --}}
{{#prev_post}}
{{> "post-card"}}
{{/prev_post}}
</div>
</div>
</aside>
{{/post}}
{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
{{#contentFor "scripts"}}
<script>
$(document).ready(function () {
// FitVids - start
var $postContent = $(".post-full-content");
$postContent.fitVids();
// FitVids - end
// Replace nav with title on scroll - start
Casper.stickyNavTitle({
navSelector: '.site-nav-main',
titleSelector: '.post-full-title',
activeClass: 'nav-post-title-active'
});
// Replace nav with title on scroll - end
// Hover on avatar
var hoverTimeout;
$('.author-list-item').hover(function () {
var $this = $(this);
clearTimeout(hoverTimeout);
$('.author-card').removeClass('hovered');
$(this).children('.author-card').addClass('hovered');
}, function () {
var $this = $(this);
hoverTimeout = setTimeout(function () {
$this.children('.author-card').removeClass('hovered');
}, 800);
});
});
</script>
{{/contentFor}}
can someone help me to point it out where I can find a list of data bind they provided? I'm quite confused to understand it
they call that Helpers and you can find the full list here:
Themes documentation
There is several categories: Functionnal, Data, Utility, Extra... And you find several inside with a description for each.
Regards
Are you looking for a particular piece of data that you've put into Ghost admin? {{#site.logo}} and {{#site.title}} is how you out put those data values 😊
Related
One of the web pages is showing products using databind:foreach
Here is the piece of code
<div class="product-list">
<ul data-bind="foreach: products">
<li>
<div class="product-summary">
<div class="photo">
<a data-bind="attr:{href: Link}">
<img data-bind="attr:{src: SummaryImageUrl, title: DisplayName}" alt="product image" />
</a>
</div>
<div class="product-info">
<h4 class="product-title" data-bind="attr:{title: DisplayName}">
<a data-bind="attr:{href: Link}, text: DisplayName"></a>
</h4>
<!-- ko if: Brand-->
<div data-bind="html: Brand" class="product-brand"></div>
<!-- /ko-->
<!-- ko ifnot: Brand-->
<div class="product-brand"> </div>
<!-- /ko -->
I want to show a message if there is no product.Hence, added a line as below:
<div data-bind="visible:products().length==0">
No product(s) found.
</div>
<div class="product-list">
<ul data-bind="foreach: products">
<li>
Now when page is loading, it shows No products found and then hides it and renders whole products
Could you please help?
The problem is when the data for the products is loaded compared to when it gets rendered on to the screen. I imagine what is happening is that there is a process to retrieve the products from the server, while that is happening the screen is rendered and bound to the view model, resulting in the No Products Found being displayed. then at some unspecified time later the products get loaded and the screen gets updated with the new data. I think what you probably need is a flag to indicate when a search is being performed, and when its finished. this will allow you to show and hide the rendering of the results when the results are known.
<div data-bind="visible: showResults">
<div data-bind="visible:products().length==0">
No product(s) found.
</div>
<div class="product-list">
<ul data-bind="foreach: products">
<li></li>
</ul>
</div>
</div>
I would created an observable flag to notify if data is loaded and then wrap your html in ko virtual binding as shown in following code snippet.
function viewModel() {
var self = this;
self.products = ko.observableArray([]);
self.isDataLoaded = ko.observable(false);
self.loadData = function(){
setTimeout(function(){
self.products.push({name:"A"});
self.products.push({name:"B"});
self.products.push({name:"C"});
self.products.push({name:"D"});
self.isDataLoaded(true);
}, 2000);
}
}
var vm = new viewModel();
vm.loadData();
ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--ko if:isDataLoaded-->
<div class="product-list">
<ul data-bind="foreach: products">
<li data-bind="text:name"></li>
</ul>
</div>
<div data-bind="visible:products().length==0">
No product(s) found.
</div>
<!-- /ko -->
I am unable to display list of available tags in a sidebar, in ghost blog.
I am tag.hbs file with the below code.
<header class="main-header tag-head {{#if tag.image}}" style="background-image: url({{tag.image}}){{else}}{{#if #blog.cover}}" style="background-image: url({{#blog.cover}}){{else}}no-cover{{/if}}{{/if}}">
<nav class="main-nav overlay clearfix">
<a class="back-button icon-arrow-left" href="{{#blog.url}}">Home</a>
</nav>
<div class="vertical">
<div class="main-header-content inner">
<h1 class="page-title">{{tag.name}}</h1>
<h2 class="page-description">
{{#if tag.description}}
{{tag.description}}
{{else}}
A {{pagination.total}}-post collection
{{/if}}
</h2>
</div>
</div>
</header>
{{! The main content area on the homepage }}
<main class="content" role="main">
<div class="container">
<div class="row-fluid">
<div class="col-md-12">
{{! The tag below includes the post loop - partials/loop.hbs }}
{{> "loop"}}
</div>
</div>
</div>
</main>
{{> myfooter colour='ec-teal' inverse='true'}}
And this is how I am including it in my post.hbs file
<div class="col-md-4">
<div class="row tags-row">
<h3> TAGS </h3>
{{#tag}}{{/tag}}
</div>
</div>
make sure you have activated the option api you can use this helper for example:
if you get tags use
{{#get "tags"}}
{{#foreach tags}}
//Add html for each tag here
{{/foreach}}
{{/get}}
if you get al tags use this:
{{#get "tags" limit="all"}}
{{#foreach tags}}
//Add html for each tag here
{{/foreach}}
{{/get}}
if you get tags with count post
{{#get "tags" include="count.posts"}}
{{#foreach tags}}
//Add html for each tag here
{{/foreach}}
{{/get}}
i hope that some this examples respond your question
tasks is from an api call. The list is showing up but no dragging is happening. The tasks are all showing up as one block div#object.sortable.target when i hover using javascript console.
<div class="col-md-4">
<div class="list-pair col-sm-12">
{{#each tasks}}
<div class="sortable target" id="object">
{{#sortable items=tasks animation="100" ghostClass="sortable-ghost" }}
<!--<div class="list-group-item"> -->
{{title}}
{{/sortable}}
</div>
<!-- </div> -->
{{else}}
<p>List is empty.</p>
{{/each}}
</div></div>
server code:
Sortable.collections = ['tasks'];
I think you should not use {{#each}} when you use {{#sortable}}
Is there a way to call a template on other template, but excluding it from the CSS selectors and all?
This does not work, the {{> map_template}} looks weird:
<template name="main">
<div class="containerMain">
<div id="bl-main" class="bl-main">
<section>
<div class="bl-box">
<img src="images/logo.png">
</div>
<div class="bl-content">
<h2>Pa' Donde Menu</h2>
{{#each mostrarEvento}}
{{> Evento}}
{{/each}}
{{> map_template}}
</div>
<span class="bl-icon bl-icon-close"></span>
</section>
</div>
</div>
</template>
This works:
<template name="main">
{{> map_template}}
<div class="containerMain">
<div id="bl-main" class="bl-main">
<section>
<div class="bl-box">
<img src="images/logo.png">
</div>
<div class="bl-content">
<h2>Pa' Donde Menu</h2>
{{#each mostrarEvento}}
{{> Evento}}
{{/each}}
</div>
<span class="bl-icon bl-icon-close"></span>
</section>
</div>
</div>
</template>
So is there a way to use {{> map_Template}} inside the <div class="containerMain">, but without applying the CSS and all that stuff?
I'm not a web whiz, but off the top of my head, you need to create a new template for the {{> map_template}}. Make sure to name the class inside map_template and then create a css template inside your style.css or wherever you are getting your CSS from.
Your CSS should end up something like:
.map-template{
//style stuff
}
Where {map-template} matches your class name.
I used this question to try to piece together a solution: How to prevent child element from inheriting CSS styles
Sorry if that isn't quite what you are looking for.
I am trying to set the first picture as the "item active" i an Bootstrap Carousel. So, is there a way to make the first element from an collection to be presented different from the rest?
{{#each pictures}}
{{#if #first}}
<div class="item active">
<img src="/pictures/{{fileName}}" alt="" />
</div>
{{else}}
<div class="item">
<img src="/pictures/{{fileName}}" alt="" />
</div>
{{/if}}
{{/each}}
The rendered page only display the content in the {{else}} statement.
Have tried using {{if #first}}, but it does not work for me.
This is pretty similar to the problem of needing an index in your template. You need to map over pictures and mark the one you need treated differently. For example:
Template.myPictures.helpers({
pictures: function() {
return Pictures.find().map(function(picture, index) {
if (index === 0)
picture.isFirst = true;
return picture;
});
}
});
You can then use isFirst in your template like this:
{{#each pictures}}
{{#if isFirst}}
<div class="item active">
<img src="/pictures/{{fileName}}" alt="" />
</div>
{{else}}
<div class="item">
<img src="/pictures/{{fileName}}" alt="" />
</div>
{{/if}}
{{/each}}
Note that CoffeeScript's # doesn't work in templates. To learn more about template contexts see this.
It's not exactly what you were asking but you could make the first item active using jQuery in the rendered callback.
Template.myPictures.rendered = function () {
this.$('.item').first().addClass('active');
};