A team section the client keeps up to date

What you get

<section class="team">
  <h2 fld-text="Team title">Who makes your coffee</h2>
  <div class="team__grid" fld-loop="Team">
    <article class="person">
      <img class="person__photo" src="images/anna.jpg" alt="Anna at the espresso machine" fld-image="Photo">
      <h3 fld-text="Name">Anna</h3>
      <p class="person__role" fld-text="Role">Head barista</p>
    </article>
    <article class="person">
      <img class="person__photo" src="images/tom.jpg" alt="Tom with a tray of buns" fld-image="Photo">
      <h3 fld-text="Name">Tom</h3>
      <p class="person__role" fld-text="Role">Baker</p>
    </article>
  </div>
</section>

Step by step

1. The list goes on the grid of cards

   fld-loop on the block that holds the people’s cards.

   <div class="team__grid" fld-loop="Team">

2. The photo

   fld-image right on the <img>. In the admin it is an image field; the build removes the markup’s srcset.

   <img class="person__photo" src="images/anna.jpg" alt="Anna at the espresso machine" fld-image="Photo">

3. Name and role

   Both lines are fld-text, with different names.

   <h3 fld-text="Name">Anna</h3>
   <p class="person__role" fld-text="Role">Head barista</p>

4. The other cards the same way

   Every card carries the same attributes and names, so “Load data” brings everyone into the admin.

   <article class="person">
     <img class="person__photo" src="images/tom.jpg" alt="Tom with a tray of buns" fld-image="Photo">
     <h3 fld-text="Name">Tom</h3>
     <p class="person__role" fld-text="Role">Baker</p>
   </article>

What matters

• The photo’s description (alt) comes from the WordPress media library, each picture its own. Fill in “Alternative Text” for the photo there; the markup’s alt does not reach the site.
• The client reorders people by dragging rows.

Common mistakes

The build log is the “Logs” tab of your project on themeforge.pro; the free markup check shows the same notes.

<div class="team__grid" fld-loop="Team">
  <article class="person">
    <h3 fld-text="Name">Anna</h3>
  </article>
  <article class="person">
    <h3 fld-text="Full name">Tom</h3>
  </article>
</div>

<div class="team__grid" fld-loop="Team">
  <article class="person">
    <h3 fld-text="Name">Anna</h3>
  </article>
  <article class="person">
    <h3 fld-text="Name">Tom</h3>
  </article>
</div>

Attributes in this recipe

More recipes