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

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

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.

Download the Source Code for this Project

Source Code

The Series So Far

• Part 1
• Part 2
• Part 3
• Part 4
• Part 5
• Part 6
• Part 7
• Part 8
• Part 9
• Part 10
• Part 11
• Part 12
• Part 13
• Part 14
• Part 15
• Part 16
• Part 17
• Part 18
• Part 19
• Part 20