Change Styling based on primary tag name in post-card.hbs

Themes
1

I’m trying to apply unique styling to my primary tags based on what the tag name is, I’m doing this in the post-card.hbs file in the casper theme. I’m currently trying to do it like this:

{{#if primary_tag}}
  {{#primary_tag}}
    {{#has name="Handpicked"}}
      <div class="handpicked-tag">
        <a href="{{url}}">{{name}}</a>
      </div>
    {{else}}
      <div class="image-tag">
        <a href="{{url}}">{{name}}</a>
      </div>
    {{/has}}
  {{/primary_tag}}
{{/if}}

I have also tried:

    {{#if tags}}
  {{#foreach tags limit="1"}}
    {{#has tag="HANDPICKED, Handpicked, handpicked"}}
      <div class="handpicked-tag">
        <a href="{{url}}">{{name}}</a>
      </div>
    {{else}}
      <div class="image-tag">
        <a href="{{url}}">{{name}}</a>
      </div>
    {{/has}}
  {{/foreach}}
{{/if}}

I’m not sure what I need to do, I think I may be in the wrong context. Any help is appreciated

2

You normally need to be in the {{#post}} context to have access to related data

3

Thanks for the reply. So I’m rendering the post-card partial in index.hbs like this:
{{#foreach posts}}
{{> “post-card”}}
{{/foreach}}
is there a way to access the post context from the partial?

4

Rather than nesting your partial template inside the foreach helper, try including the foreach helper inside your post-card partial template.

5

Thanks for the response. That suggestion helped me figure out an alternative solution where I render a partial with particular styling based on the tag name, not very DRY but it got me what I needed. My solution was to do this in my index.hbs
{{#foreach posts}}
{{#has tag=“Handpicked, handpicked”}}
{{> “post-card-green”}}
{{else has tag=“Features, features”}}
{{> “post-card-blue”}}
{{else}}
{{> “post-card”}}
{{/has}}
{{/foreach}}

1 Like