Inserting handlebars in an inline style - handlebars.js

Question

So I am trying to add a partial {{> img-bg}} inside an inline style (just to keep things tidy). It works but something isn't quite right as when I try and match up the divs they don't match up.
Maybe this isn't the best way - ultimately what i want to do is have a background image and insert that image from a yml {{#each work.case-study-pk}} file along with other various bits of info.
Any ideas?
{{#each work.case-study-pk}}
<div class="grid-x">
<div class="cell small-12 medium-8 img-double-height foo" style="background-image: url({{img}});
{{> img-bg}}">
<div class="top-left down">
<h3 class="left-align mb-zero text-shadow">{{title}}</h3>
<h5 class="left-align upper-case text-shadow">{{sub-title}}</h5>
</div>
</div>
{{/each}}
<div class="cell small-12 medium-4">
<div class="grid-y tile-y-bg-double-height">
{{#each work.case-study-brixtar}}
<div class="cell small-6 medium-6 large-6 tile2 aligner-left foo" style="background-image: url({{img}});
{{> img-bg}}">
<div class="align-self-bottom down tile-padding ">
<h3 class="left-align mb-zero text-shadow">{{title}}</h3>
<h5 class="left-align upper-case text-shadow">{{sub-title}}</h5>
</div>
</div>
{{/each}} {{#each work.case-study-memontus}}
<div class="cell small-6 medium-6 large-6 tile2 aligner-left foo" style="background-image: url({{img}});
{{> img-bg}}">
<div class="align-self-bottom down tile-padding ">
<h3 class="left-align mb-zero text-shadow">{{title}}</h3>
<h5 class="left-align upper-case text-shadow">{{sub-title}}</h5>
</div>
</div>
{{/each}}
</div>
</div>
</div>
<div class="grid-container full">
<div class="grid-x align-center-middle text-center">
<div class="cell small-12 medium-4">
{{#each work.case-study-umeax}}
<div class="grid-y tile-y-bg-single-height">
<div class="cell small-12 medium-12 large-12 tile4 aligner-left foo" style="background-image: url({{img}});
{{> img-bg}}">
<div class="align-self-bottom down tile-padding">
<h3 class="left-align mb-zero text-shadow">{{title}}</h3>
<h5 class="left-align upper-case text-shadow">{{sub-title}}</h5>
</div>
</div>
{{/each}}
</div>
</div>
<div class="cell small-12 medium-8 img-single-height aligner cell-text-padder">
<h3 class="medium p-white ">Floe is the world’s greatest design agency, apart from a few others. But the few others eat million dollar budgets for breakfast – we eat porridge!</h3>
</div>
</div>
</div>
<div class="grid-x">
{{#each work.case-study-racefox}}
<div class="cell small-12 medium-6 img-double-height foo" style="background-image: url({{img}});
{{> img-bg}}">
<div class="top-left down">
<h3 class="left-align mb-zero text-shadow">{{title}}</h3>
<h5 class="left-align upper-case text-shadow">{{sub-title}}</h5>
</div>
</div>
{{/each}} {{#each work.case-study-interflora}}
<div class="cell small-12 medium-6 img-double-height foo" style="background-image: url({{img}});
{{> img-bg}}">
<div class="top-left down">
<h3 class="left-align mb-zero text-shadow">{{title}}</h3>
<h5 class="left-align upper-case text-shadow">{{sub-title}}</h5>
</div>
</div>
{{/each}}
</div>
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-position: center;
background-repeat: no-repeat;
case-study-pk:
-
img: ../assets/img/case8.jpg
bg-img: ../assets/img/case8.jpg
title: Personalkollen
sub-title: Brandning and webdesign
link: brixtar.html
CTA: Read more
case-study-brixtar:
-
img: ../assets/img/brix-1.jpg
title: Brixtar
sub-title: Brandning app design
link: brixtar.html
CTA: Read more
case-study-memontus:
-
img: ../assets/img/case7.jpg
title: Memontus
sub-title: Brandning app design
link: brixtar.html
CTA: Read more
case-study-umeax:
-
img: ../assets/img/umeax-1.jpg
title: Umeå X
sub-title: Brandning and webdesign
link: brixtar.html
CTA: Read more
case-study-racefox:
-
img: ../assets/img/racefox-1.jpg
title: Racefox Run
sub-title: Brandning app design
link: brixtar.html
CTA: Read more
case-study-interflora:
-
img: ../assets/img/caseIF.jpg
title: Interflora
sub-title: Webdesign
link: brixtar.html
CTA: Read more

Answer 1

I think that you have a design problem with your data because on your template you iterate with {{each}} on single items (that don't seems to be in an array). Maybe my example below will help you to understand what I mean.
However I managed to have an example working and I modified as few as possible your template and your data (as I said there is a confusion in data and templating). Take a look at the snippet below and feel free to ask questions if something is unclear.
$(document).ready(function () {
var context = {
"case-study-pk": [{
"img": "../assets/img/case8.jpg",
"bg-img": "../assets/img/case8.jpg",
"title": "Personalkollen",
"sub-title": "Brandning and webdesign",
"link": "brixtar.html",
"CTA:":"Read more"}],
"case-study-brixtar":[{
"img": "../assets/img/brix-1.jpg",
"title": "Brixtar",
"sub-title": "Brandning app design",
"link": "brixtar.html",
"CTA": "Read more"}],
"case-study-memontus":[{
"img": "../assets/img/case7.jpg",
"title": "Memontus",
"sub-title": "Brandning app design",
"link": "brixtar.html",
"CTA": "Read more"}],
"case-study-umeax":[{
"img": "../assets/img/umeax-1.jpg",
"title": "Umeå X",
"sub-title": "Brandning and webdesign",
"link": "brixtar.html",
"CTA": "Read more"}],
"case-study-racefox":[{
"img": "../assets/img/racefox-1.jpg",
"title": "Racefox Run",
"sub-title": "Brandning app design",
"link": "brixtar.html",
"CTA": "Read more"}],
"case-study-interflora":[{
"img": "../assets/img/caseIF.jpg",
"title": "Interflora",
"sub-title": "Webdesign",
"link": "brixtar.html",
"CTA": "Read more"}]
};
Handlebars.registerHelper('ifEqualsChained', function() {
var options = arguments[arguments.length-1];
// Assuming that all wanted operator are '||'
valueToTest=arguments[0];
for (var i = 1; i < (arguments.length - 1); i++) {
if (valueToTest === arguments[i]) {
return options.fn(this);
}
}
return options.inverse(this);
});
var source = $("#sourceTemplate").html();
var template = Handlebars.compile(source);
var html = template(context);
$("#resultPlaceholder").html(html);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<script id="sourceTemplate" type="text/x-handlebars-template">
{{#*inline "img-bg"}}
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-position: center;
background-repeat: no-repeat;
{{/inline}}
{{#each case-study-pk}}
<div class="grid-x">
<div class="cell small-12 medium-8 img-double-height foo" style="background-image: url({{img}});
{{> img-bg}}">
<div class="top-left down">
<h3 class="left-align mb-zero text-shadow">{{title}}</h3>
<h5 class="left-align upper-case text-shadow">{{sub-title}}</h5>
</div>
</div>
{{/each}}
<div class="cell small-12 medium-4">
<div class="grid-y tile-y-bg-double-height">
{{#each work.case-study-brixtar}}
<div class="cell small-6 medium-6 large-6 tile2 aligner-left foo" style="background-image: url({{img}});
{{> img-bg}}">
<div class="align-self-bottom down tile-padding ">
<h3 class="left-align mb-zero text-shadow">{{title}}</h3>
<h5 class="left-align upper-case text-shadow">{{sub-title}}</h5>
</div>
</div>
{{/each}}
{{#each work.case-study-memontus}}
<div class="cell small-6 medium-6 large-6 tile2 aligner-left foo" style="background-image: url({{img}});
{{> img-bg}}">
<div class="align-self-bottom down tile-padding ">
<h3 class="left-align mb-zero text-shadow">{{title}}</h3>
<h5 class="left-align upper-case text-shadow">{{sub-title}}</h5>
</div>
</div>
{{/each}}
</div>
</div>
</div>
<div class="grid-container full">
<div class="grid-x align-center-middle text-center">
<div class="cell small-12 medium-4">
{{#each work.case-study-umeax}}
<div class="grid-y tile-y-bg-single-height">
<div class="cell small-12 medium-12 large-12 tile4 aligner-left foo" style="background-image: url({{img}});
{{> img-bg}}">
<div class="align-self-bottom down tile-padding">
<h3 class="left-align mb-zero text-shadow">{{title}}</h3>
<h5 class="left-align upper-case text-shadow">{{sub-title}}</h5>
</div>
</div>
{{/each}}
</div>
</div>
<div class="cell small-12 medium-8 img-single-height aligner cell-text-padder">
<h3 class="medium p-white ">Floe is the world’s greatest design agency, apart from a few others. But the few others eat million dollar budgets for breakfast – we eat porridge!</h3>
</div>
</div>
</div>
</script>
<div id="resultPlaceholder">
</div>