Un bloque de equipo que el cliente mantiene al día
Las personas llegan y se van, y el bloque del equipo tiene que seguir siendo cierto sin un desarrollador. Cada persona es una fila de la lista: foto, nombre y cargo.
Qué obtienes
<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>El cliente añadió a la tercera persona en el panel.
Paso a paso
La lista va en la cuadrícula de tarjetas
fld-loop en el bloque dentro del cual van las tarjetas del equipo.
<div class="team__grid" fld-loop="Team">
La foto
fld-image directamente en el
<img>. En el panel es un campo de imagen, y la generación quita elsrcsetdel marcado.<img class="person__photo" src="images/anna.jpg" alt="Anna at the espresso machine" fld-image="Photo">
Nombre y cargo
Las dos líneas son fld-text, con nombres distintos.
<h3 fld-text="Name">Anna</h3> <p class="person__role" fld-text="Role">Head barista</p>
Las demás tarjetas, igual
Todas las tarjetas llevan los mismos atributos con los mismos nombres: así «Cargar datos» lleva al panel a todo el equipo.
<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>
Lo importante
- La descripción de la foto (
alt) sale de la biblioteca de medios de WordPress: cada imagen tiene la suya. Rellena el «Texto alternativo» de la foto en la biblioteca de medios; elaltdel marcado no pasa al sitio. - El cliente cambia el orden de las personas arrastrando las filas.
Errores frecuentes
El registro de la generación es la pestaña «Registros» de tu proyecto en themeforge.pro; la revisión gratuita del marcado muestra los mismos avisos.
<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>En la segunda tarjeta el campo tiene otro nombre («Full name» en lugar de «Name»): la plantilla funciona, pero «Cargar datos» no lleva al panel el nombre de Tom. El registro no dice nada.
<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>Los mismos nombres de campo en todas las tarjetas.