Un bloc équipe que le client tient à jour lui-même

Ce que vous obtenez

<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>

Étape par étape

1. La liste sur la grille des cartes

   fld-loop sur le bloc qui contient les cartes des personnes.

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

2. La photo

   fld-image directement sur la balise <img>. Dans l’administration, c’est un champ d’image ; la génération retire le srcset du balisage.

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

3. Nom et poste

   Les deux lignes sont des fld-text, avec des noms différents.

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

4. Les autres cartes, de la même façon

   Toutes les cartes portent les mêmes attributs et les mêmes noms : « Charger les données » importe alors toute l’équipe dans l’administration.

   <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>

À retenir

• La description de la photo (alt) vient de la médiathèque WordPress : chaque image a la sienne. Remplissez le « Texte alternatif » de la photo dans la médiathèque ; l’attribut alt du balisage n’est pas repris sur le site.
• Le client change l’ordre des personnes en faisant glisser les lignes.

Erreurs fréquentes

Le journal de génération est l’onglet « Journaux » de votre projet sur themeforge.pro ; la vérification gratuite du balisage affiche les mêmes remarques.

<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>

Attributs de cette recette

Autres recettes