Reviews the client adds to
Reviews keep coming, and the client should be able to add them. Every review is a row of a list: the quote, the guest’s photo and a caption.
What you get
<section class="reviews">
<h2 fld-text="Reviews title">What guests say</h2>
<div class="reviews__list" fld-loop="Reviews">
<figure class="review">
<blockquote fld-area="Quote">The quietest table in town and the best flat white.</blockquote>
<figcaption>
<img class="review__photo" src="images/guest-1.jpg" alt="" fld-image="Guest photo">
<span fld-text="Guest name">Maria, regular</span>
</figcaption>
</figure>
<figure class="review">
<blockquote fld-area="Quote">They remember my order after one visit.</blockquote>
<figcaption>
<img class="review__photo" src="images/guest-2.jpg" alt="" fld-image="Guest photo">
<span fld-text="Guest name">Leo, works next door</span>
</figcaption>
</figure>
</div>
</section>“The quietest table in town and the best flat white.” — Maria
“They remember my order after one visit.” — Leo
“Cardamom bun every Friday.” — Ines
The client added the third review in the admin.
Step by step
The list goes on the block of reviews
fld-loop on the wrapper that holds the reviews.
<div class="reviews__list" fld-loop="Reviews">
The quote
A review can run to several lines, so it is fld-area; the client’s line breaks are kept.
<blockquote fld-area="Quote">The quietest table in town and the best flat white.</blockquote>
Photo and caption
fld-image on the
<img>and fld-text on the guest’s name.<img class="review__photo" src="images/guest-1.jpg" alt="" fld-image="Guest photo"> <span fld-text="Guest name">Maria, regular</span>
Every review is marked up
All reviews carry the same attributes, so “Load data” brings every one of them in.
<figure class="review"> <blockquote fld-area="Quote">They remember my order after one visit.</blockquote>
What matters
- The client reorders reviews by dragging rows and deletes the ones that are no longer needed; the block stays intact.
- The photo’s description (
alt) comes from the WordPress media library, not from the markup.
Common mistakes
The build log is the “Logs” tab of your project on themeforge.pro; the free markup check shows the same notes.
<figure class="review">
<blockquote fld-area="Quote">The best flat white.</blockquote>
<figcaption fld-text="Quote">Maria, regular</figcaption>
</figure>One name for two different fields, the quote and the caption: the build reports a collision, and the admin is left with one field doing two jobs.
<figure class="review">
<blockquote fld-area="Quote">The best flat white.</blockquote>
<figcaption fld-text="Guest name">Maria, regular</figcaption>
</figure>Every field has its own name.