CODEWITHSUNDEEP
javascripthtmlhandlebars.jsassemblepicturefill
user1694077
user1694077

Reputation:

How can I pass variables to a partial in Handlebars (v1.3 with Assemble)?

I'm using Assemble, which currently uses Handlebars 1.3. In my templates I am using the picture element with Picturefill, which uses the current spec <picture> syntax:

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="assets/img/responsive/example-xl.jpg" media="(min-width: 1000px)">
  <source srcset="assets/img/responsive/example-l.jpg" media="(min-width: 800px)">
  <source srcset="assets/img/responsive/example-m.jpg">
  <!--[if IE 9]></video><![endif]-->
  <img srcset="assets/img/responsive/example-m.jpg" alt="An example responsive image">
</picture>

Since parts of this will probably change (I might add media queries for example), I would like to be able to update this snippet across my entire site easily. I think a partial would be best for this. So for example, something like:

{{> picture name="example" ext=".jpg" alt="Example image" }}

with this partial

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="assets/img/responsive/{{name}}-xl{{ext}}" media="(min-width: 1000px)">
  <source srcset="assets/img/responsive/{{name}}-l{{ext}}" media="(min-width: 800px)">
  <source srcset="assets/img/responsive/{{name}}-m{{ext}}">
  <!--[if IE 9]></video><![endif]-->
  <img srcset="assets/img/responsive/{{name}}-m{{ext}}" alt="{{alt}}">
</picture>

Is there a way to do that with my version of Handlebars? I know that this is native in Handlebars 2.0, but unfortunately I'm not able to update it to that version because it's integrated in Assemble. Or is there another recommended way of doing this?

p.s.: I've read about using {{> picture this}} here, but I'm not sure if and how that would work with multiple pictures in one page (and multiple variables in one partial). Also, I've tried using a parseJSON block helper, but that syntax is a little awkward, and a little more verbose than what I described above, so I'm wondering if there is a more efficient way to do something like this.

Upvotes: 3

Views: 689

Answers (1)

doowb
doowb

Reputation: 3372

If you combine this with how assemble handles data files, you could have a data file named pictures.json or pictures.yaml (depending on how you want to manage the data).

In pictures.json:

{
  "example": {
    "name": "example",
    "ext": ".jpg",
    "alt": "Example image"
  },
  "another": {
    "name": "another",
    "ext": ".png",
    "alt": "Another example image"
  }
}

Then your handlebars file, you can call the partial using the syntax you mentioned above:

{{> picture pictures.example}}
{{> picture pictures.another}}

Now the picture partial's context is the json object that was passed in so you can reference the pieces generically:

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="assets/img/responsive/{{name}}-xl{{ext}}" media="(min-width: 1000px)">
  <source srcset="assets/img/responsive/{{name}}-l{{ext}}" media="(min-width: 800px)">
  <source srcset="assets/img/responsive/{{name}}-m{{ext}}">
  <!--[if IE 9]></video><![endif]-->
  <img srcset="assets/img/responsive/{{name}}-m{{ext}}" alt="{{alt}}">
</picture>

I hope this helps until we get assemble updated to using handlebars 2.0.

Upvotes: 0

Related Questions