Let's Build: A Consultancy Website - Part 17

Styling the home page header

Styling our home page header begins in part 17 of the Let's Build: A Consultancy Website series.

The beginning of a pattern emerges

In part 17, you'll start to see a pattern form. I create fields within Kirby and output to the page in specific sections that correlate to our design.

The first section we are working on is the home page header. Here I had to learn a bit about how to best output images and to decide the best path to take for recreating our static design in the responsive form.

Gotchas

A big gotcha for me was getting the full url of any regular image field on the $page object. The header image in our design needed to be positioned in such a way that it required me to create an inline style. With a bit of CSS and some fancy Kirby PHP, I was finally able to achieve my goal with this code.

<?php 
  $image = $page->heroimage()->toFile();
?>

<div class="hero-background" style="background-image: url(<?= $image->url() ?>) ">
  <!-- other content -->
</div>

Turns out to get a file path of an image you need to use a specific method to do so while referencing the blueprint field created prior. The toFile() method gets the object we are after and then I can echo the url as intended.

<?= $image->url() ?>

Other things that took place

Along the way I create a variety of sass files and imports as well as discuss Sass mixins and how I go about using them in my projects. I included typography from Google Fonts as well as a browser reset stylesheet (normalize.css).

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