League of Extraordinary FoundryVTT Developers•5y ago

So with the HTML from above: ```hbs <ul class="monsters"> {{#each monsters}} <li class="flexrow">

So with the HTML from above:

<ul class="monsters">
{{#each monsters}}
<li class="flexrow">
  <section class="avatar">
    <img src="{{this.image}}">
  </section >
  <section class="flexcol">
    <section class="name">
      <h4>{{this.name}}</h4>
    </section>
    <ul class="flexrow attributes">
      <li class="attribute"><span class="attr-label">HP</span><span class="attr-value">{{this.hp}}</li>
      <li class="attribute"><span class="attr-label">AC</span><span class="attr-value">{{this.ac}}</li>
      <li class="attribute"><span class="attr-label">SPD</span><span class="attr-value">{{this.spd}}</li>
    </ul>
  </section>
  <section class="challenge">
     <li class="attribute"><span class="attr-label">CR</span><span class="attr-value">{{this.cr}}</li>
  </section>
</li>
{{/each}}
</ul>

<ul class="monsters">
{{#each monsters}}
<li class="flexrow">
  <section class="avatar">
    <img src="{{this.image}}">
  </section >
  <section class="flexcol">
    <section class="name">
      <h4>{{this.name}}</h4>
    </section>
    <ul class="flexrow attributes">
      <li class="attribute"><span class="attr-label">HP</span><span class="attr-value">{{this.hp}}</li>
      <li class="attribute"><span class="attr-label">AC</span><span class="attr-value">{{this.ac}}</li>
      <li class="attribute"><span class="attr-label">SPD</span><span class="attr-value">{{this.spd}}</li>
    </ul>
  </section>
  <section class="challenge">
     <li class="attribute"><span class="attr-label">CR</span><span class="attr-value">{{this.cr}}</li>
  </section>
</li>
{{/each}}
</ul>

10 Replies

zeelOP•5y ago

Something like that.

Unknown User•5y ago

Message Not Public

zeelOP•5y ago

Though you might want to localize your labels HP and AC etc.

Unknown User•5y ago

Message Not Public

zeelOP•5y ago

Which is {{localiize "local.string.name"}}

Unknown User•5y ago

Message Not Public

zeelOP•5y ago

Something like that.

Unknown User•5y ago

Message Not Public

zeelOP•5y ago

Looks mostly alright, you do need to make the image path dynamic though.

Unknown User•5y ago

Message Not Public

Gaming

Programming

So with the HTML from above: ```hbs <ul class="monsters"> {{#each monsters}} <li class="flexrow">

Did you find this page helpful?