Menu icon Foundation
#each Panini Helper in Foundation Email

OK team, I need your help with using the "#each" panini helper in my email production.

 

I have been setting up partials with handlebars that call in content from my data.yml file. It has been working fine when I have one data set per row. However, now I am trying to set up the layout so that it is one data set per column, and am not able to structure my partial properly. If I have 6 data sets how do I structure the partial to have 2 data sets per row?  Have a look at my partial here and let me know if you need more information.

Thanks in advance!
Paul

 

This currently works for me to create one data set per row:

{{#each email.items}}
    <row>
      <columns small="12" large="6">
        <img src="{{imglink}}" alt="{{item1}}">
      </columns>
      <columns small="12" large="6" class="text">
        <spacer size="10"></spacer>
        <p>{{item1}}</p>
        <p>{{duedate}}</p>
        <p>{{howmany}}</p>
        <spacer size="5"></spacer>
        <button href="{{btnlink}}">View Details</button>
        <p{{disclaimer}}</p>
      </columns>
    </row>
    <spacer size="36"></spacer>
    {{/each}}

 

This is the best I have been able to come up with and it only works for 1 row:

<row>
    {{#each email.row1}}
    <columns small="12" large="6">
      <center>
        <img src="{{imglink}}" alt="{{item1}}">
      </center>
      <row>
        <columns small="12" large="12">
          <spacer size="16"></spacer>
          <h6>{{item1}}</h6>
          <h4>{{title}}</h4>
          <spacer size="6"></spacer>
          <p>for</p>
          <h1>{{number}}{{refnum}}</h1>
          <p>{{howmany}}</p>
          <button href="{{btnlink}}">VIEW DETAILS</button>
          <spacer size="6"></spacer>
          <p>{{refnum}}{{disclaimer}}</p>
        </columns>
      </row>
    </columns>
    {{/each}}
  </row>

paniniemailhelperymlpartial

OK team, I need your help with using the "#each" panini helper in my email production.

 

I have been setting up partials with handlebars that call in content from my data.yml file. It has been working fine when I have one data set per row. However, now I am trying to set up the layout so that it is one data set per column, and am not able to structure my partial properly. If I have 6 data sets how do I structure the partial to have 2 data sets per row?  Have a look at my partial here and let me know if you need more information.

Thanks in advance!
Paul

 

This currently works for me to create one data set per row:

{{#each email.items}}
    <row>
      <columns small="12" large="6">
        <img src="{{imglink}}" alt="{{item1}}">
      </columns>
      <columns small="12" large="6" class="text">
        <spacer size="10"></spacer>
        <p>{{item1}}</p>
        <p>{{duedate}}</p>
        <p>{{howmany}}</p>
        <spacer size="5"></spacer>
        <button href="{{btnlink}}">View Details</button>
        <p{{disclaimer}}</p>
      </columns>
    </row>
    <spacer size="36"></spacer>
    {{/each}}

 

This is the best I have been able to come up with and it only works for 1 row:

<row>
    {{#each email.row1}}
    <columns small="12" large="6">
      <center>
        <img src="{{imglink}}" alt="{{item1}}">
      </center>
      <row>
        <columns small="12" large="12">
          <spacer size="16"></spacer>
          <h6>{{item1}}</h6>
          <h4>{{title}}</h4>
          <spacer size="6"></spacer>
          <p>for</p>
          <h1>{{number}}{{refnum}}</h1>
          <p>{{howmany}}</p>
          <button href="{{btnlink}}">VIEW DETAILS</button>
          <spacer size="6"></spacer>
          <p>{{refnum}}{{disclaimer}}</p>
        </columns>
      </row>
    </columns>
    {{/each}}
  </row>
Paul Banagas about 2 years ago

Anyone at all?

Sergey Kruglikov about 2 years ago

Hi!

Try something like this.

/src/data/data.yml

{
  "row": {
    "one": {
      "cols": {
        "one": {
          "name": "one",
          "src": "https://placehold.it/200x200"
        },
        "two": {
          "name": "two",
          "src": "https://placehold.it/200x200"
        }
      }
    },
    "two": {
      "cols": {
        "one": {
          "name": "three",
          "src": "https://placehold.it/200x200"
        },
        "two": {
          "name": "four",
          "src": "https://placehold.it/200x200"
        }
      }
    },
    "three": {
      "cols": {
        "one": {
          "name": "five",
          "src": "https://placehold.it/200x200"
        },
        "two": {
          "name": "six",
          "src": "https://placehold.it/200x200"
        }
      }
    }
  }
}

 

/src/partials/tiles.html

{{#each data.row}}
	<div class="grid-x grid-padding-x">
		{{#each this.cols}}
			<div class="small-6 cell text-center">
				<img src="{{this.src}}" alt="{{this.name}}" />
				<p>{{this.name}}</p>
			</div>
		{{/each}}
	</div>
{{/each}}

 

/src/pages/index.html

{{> tiles}}