The next step is to start writing the HTML structure. We will begin with a section tag whose class will be the name we put in the slug using the expression declaration: class=”{ { slug } }” . Inside this section we will create a div that we will use to center the content (good practice), which will have the class class=”{ { slug } }__container” .
Section Title
We are going to proceed to extract the first content of our module: the title in an H2 tag and adding its respective class to it.
To do this, apart from using the expression delimiter, we will use the declaration delimiter and it will serve to condition the creation of the title, as long as one has been written, since we did not make this field mandatory and we do not want there to be empty HTML tags. Using the “IF” declaration, we will have the following:
module title
Working with the Testimony Repeater
This is where things get more interesting. We will first create a div that contains the testimonials. Since we have a group of testimonials for each of them and their fields, we cannot use the {{ module.testimonials }} declaration , since this would return all the testimonials at once and what we need is to work with each one separately. To do this we will use what is know cio and cto email lists work with each testimonial and its fields at the same time .
start of loop
So, for each testimonial within the testimonials group we will create a div to encapsulate the content and thus extract the values of each field in their own tags, just as we did with the title, remembering to condition the non-mandatory fields :
structure-of-testimony
With this we have completed the HTML structure of our module, and now we have the complete testimonial extraction:
complete structureYou’ll notice that we’ve separated the image from the rest using a div with the class “testimonos__testimonio-detalle” . This is to make it easier for us to arrange the elements with CSS. Let’s take a quick look at what we have:
Image: as it is not mandatory, we have conditioned its extraction from its source (source: src), if an image is not chosen, that code block will be ignored.
Description: is mandatory, so the conditional is not necessary, we extract its content directly.
Name: same as description.
Position: non-mandatory field, so its extraction must be conditioned.
With this we already have the complete structure of our module . If you go back to the preview you will see that the fields we have previously filled in are already printed