Let’s Build: A Consultancy Website – Part 21
Coding the Process Section.
In part 21 I continue coding the home page by starting the process section of our design. This section is a little more complex than most as we’ll use a new field that allows us to loop through multiple entries from Kirby’s backend.
The point of this section is to explain how Alyssa works in a step type of fashion. To show steps I created boxes with a counter, title, and description of each step in the design.
Throughout the video, I introduce what is known as the Structure field from Kirby CMS. This component can be compared to something like the repeater field if you’ve used Advanced Custom Fields in the past.
Think of the Structure field as a big field with children fields. The children fields can be output by looping through each using a handy
foreach method in
The code below is what I end up with at the end of the video. Each “process” step is output and contains the code:
<?php foreach($page->processmodules()->toStructure() as $process) : ?> <div class="col-md-4 col-xs-12"> <div class="process-module wow animated fadeInUp" > <h3 class="process-module-title"> <?= $process->title()->html() ?> </h3> <div class="process-module-content"> <?= $process->content()->kirbytext() ?> </div> </div> </div> <?php endforeach ?>
Obviously, for this code to display correctly in a grid like fashion we need to embed it between a
div with the class of
I called the Structure block
processmodules inside the
home.yml. The final declaration for the fields looks like the following:
processmodules: label: Process Modules type: structure style: table fields: title: label: Title type: text content: label: Content type: textarea
After entering the content for each process we can now loop through each field structure group to get the data to display.