Blog: Converting my Photography Site to PHP #2 (More Posts)
This is the second part of this series of blogs in which walk through my thoughts I convert my photography website to PHP. There are going to be a lot of templates to update so let’s just look at them one at a time. We can focus this blog on the homepage template, to begin with.
For now, I’m assuming I’ll only never need the assets to serve the homepage and make any changes from there. (spoiler: There will need to be changes later).
Working with the header and footer template
The header template contains everything up to the <h1> element which is a child of the <header> element.
For this template, I will need to include…
- The Slick Carousel Stylesheets (slick.css and slick-theme.css)
- The main website stylesheet which will be included in the root directory (style.css)
- The Lightbox.css stylesheet asset that controls how the lightbox Modals will work
- A reference to the Google font which serves as the main font for this website
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Omitted for brevity
Google Webmaster Tags
Google Font
Meta Tags
Slick
Lightbox
jQuery
-->
<!-- Page Title-->
<title>JG Photography | Amateur Photography</title>
</head>The footer template contains everything from the footer element as shown below…
<!-- Footer -->
<footer>
<p>© Jonnie Grieve Photography (2023) Designed by
<a href="https://www.jonniegrieve.co.uk" target="blank">JGDM</a>
</p>
</footer>…to the scripts and web assets including the Slick Carousel scripts.
<!-- scripts -->
<script src="https://ajax.../jquery.min.js"></script>
<script type="text/javascript" src="assets/slick/slick.min.js"></script>
<script src="https://cdn..../lazyload.min.js"></script>
<script type="text/javascript" src="scripts/app.js"></script>We can also add a little PHP so that the copyright date updates dynamically on every page of the site, using the Date method.
<?php echo date("Y"); // current year 2023 ?> Setting up the website assets
Now that I have the markup for the footer in place, it’s time to make sure the assets that aren’t served by Content Delivery Network are in place. In this case, that means the minimalised Slick Carousel Script file and Lightbox.js files.
I made sure that the relevant script files were in place in the main scripts directory by making sure the files are copied from their original location into the equivalent directory in the PHP Project.
Now I turn my attention to making sure the styles are in place. The website was originally built using the SASS precompiler. So in a similar way to the JavaScript assets, I’ve made sure to copy all the sass partials in the Sass directory over to the PHP project.
I also have to update the sass.scss file in the root directory so it contains all the import directives I need to rebuild the styles.
@import "sass/inc/head";
@import "sass/utilities/breakpoints.scss";
@import "sass/utilities/colours.scss";
// Cut for Brevity
@import "sass/pages/photos_2023";
@import "sass/pages/yearly";
@import "sass/inc/footer";I then rebuilt the main stylesheet with the sass watch command which generated the style.css file.
sass --watch sass.scss:style.cssThis transformed the homepage served by the root index.php template and the homepage took the form of the HTML version.
Add the content
The next job was to rebuild the content by copying all the markup from the container element back into the project.
<?php require "inc/header.php"; ?>
<div id="container">
<!--Add HTML Content here -->
</div>
<?php require "inc/footer.php"; ?>And in a flash, there’s what looks like the homepage done and dusted. But we still need to finalise the hyperlinks and make sure they are pointing to PHP files and not the HTML. Which was easily solved. The Slick and Slick Theme Stylesheets should be carried across to the Slick directory in the assets directory and that will make sure the images appear in the browser.
<div>
<img src="images/boo_v4.png" class="coming-img" />
</div>
<div>
<img src="images/boo_v2.png" class="coming-img" />
</div>
<div>
<img src="images/boo_v3.png" class="coming-img" />
</div>I went into the template and changed file extensions from .html to .php as shown in the below snippet.
<article class="entry_btns">
<h3>Or choose a page. </h3>
<a href="2020/lockdown/lockdown.php" class="btn">Covid Lockdown (2020) > </a>
...
</article>And that about does it for the homepage. It now works just as well for the PHP version as it does for the HTML so at this point there’s a functioning and nice-looking home page.
Next, the real work begins as I start to look at the main photo pages and introduce template parts; one of the main reasons I’m doing this project in the first place. This is the point we’ll truly start to see the benefits of using PHP Web Design techniques. See you in the next blog.