July 19, 2017
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
The Series So Far
Categories
Collection
Part of the Let's Build: A Consultancy Website collection
