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 which 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 responsive form.
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 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).