Blog: Converting my Photography Site to PHP #4 (More Posts)
By the end of the third blog in this series, I’d finished building the homepage and made sure I’d created unique template files for every HTML page that exists on the static site. I had started creating and linking in some template parts and laid out a plan to ensure that the scripts and assets on each page can be put in place and the right assets selected using PHP Condition statements.
In this blog, I’ll be looking at setting up the main navigation as a template part of its own and working on making sure links work correctly regardless of the PHP template file that is being served by PHP.
Before that though; time for some housekeeping. Firstly, I copied the main contents into canon_18_55.html into the equivalent template file in the PHP project.
<main class="container">
. . .
<!-- paste content of data/2020/canon_18_55.json template here -->
</main>Below, I’ll demonstrate how I used the Terminal/Command Line to create the rest of the template files and script and data files.
Using my terminal I navigated from the project root to the data folder.
cd dataI created 4 different directories, 1 for each year from 2020 for the script files to go in.
mkdir 2020, 2021, 2022, 2023Then I created all the JSON data files which will be used to store all the photo information on the website.
cd 2020
touch canon_18_55.json filenames.json lockdown.json
oftheday.json photo-bank.json photo-categories.json photos.json
cd ../2021
touch canon_18_55.json canon_18_200.json canon_75_300.json canon_2021.json
cd ../2022
touch canon_18_55.json canon_18_200.json canon_75_300.json canon_2022.json
cd ../2023
touch canon_18_55.json canon_18_200.json canon_75_300.json canon_2023.jsonI used the same process to create the empty script files.
mkdir 2022 2021 2022 2023
cd 2020
touch lockdown.js canon_18_55.js
cd 2021
touch canon_18_200.js canon_18_55.js canon_2021.js canon_75_300.js
2022
touch canon_18_200.js canon_18_55.js canon_2022.js canon_75_300.js
2023
touch canon_18_200.js canon_18_55.js canon_2023.js canon_75_300.js
All the required script and JSON files that the website will need are now in place. But the vast majority are empty. They will be filled in, in due course.
When I pasted the code into the template file it showed up in the correct styling, but I noted the “N’s” in the data for the photo category counts. Which was entirely expected. The data doesn’t show up because the code that gets the information either hasn’t been found or doesn’t yet exist.
Here’s how I went about linking up those files…
<?php
// Get the correct script file for canon_18_55.js
if ($page_identifier == "photo_canon_18_55_2020") { ?>
<script type="text/javascript" src="../../scripts/2020/canon_18_55.js"></script>
<?php } ?>To make sure the script file is used, I wrote a new condition statement that checks that the value of the page identifier variable matches that of the string “photo_canon_18_55_2020“. Only then does PHP look for the script file and display it.
Make sure lightbox.js is working
Next, I had to make sure the Photo Lightboxes were working by adding the Lightbox to the condition statement in header.php
<?php
if ($page_type == "photo_page") { ?>
<!-- Lightbox -->
<link href="../../path/to/lightbox.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href ="../../style.css" />
<?php } else if ($page_type == "page_2020") { ?>
<!-- Lightbox -->
<link href="../path/to/lightbox.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href ="../../style.css" />
<?php } else if ($page_type == "year_page") { ?>
<!-- Lightbox -->
<link href="../path/to/lightbox.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href ="../style.css" />
<?php } else if ($page_type == "home_page") { ?>
<!-- Lightbox -->
<link href="path/to/lightbox.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href ="style.css" />
<?php } else { ?>
<!-- Lightbox -->
<link href="assets/lightbox/dist/css/lightbox.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href ="style.css" />
<?php } ?>And likewise, there’s a script file in place for Lightbox that also needs to be linked in the same way.
<?php
// Get the Slick Carousel and main website script
if ($page_type == "photo_page") { ?>
<script type="text/javascript" src="../../scripts/app.js"></script>
<script type="text/javascript" src="../../assets/slick/slick.min.js"></script>
<script type="text/javascript" src="../../assets/lightbox/dist/js/lightbox.js"></script>
<?php var_dump($page_type);} else if ($page_type == "page_2020") { ?>
...
<?php var_dump($page_type);} else { ?>
...
<?php var_dump } ?>
The template part of the navigation menu is in place. So all I need to do is provide a link to it.
<?php require "template-parts/main_menu.php"; ?>In header.php I use the require keyword to get the correct reference to the template part. All this does is basically make sure the menu appears on the screen in the first place. And for this, I also need to write a condition statement.
<!-- Get the main menu -->
<?php if ($page_type === "photo_page") { ?>
<?php require "../../template-parts/main_menu.php"; ?>
<?php } else if ($page_type === "year_page") { ?>
<?php require "../template-parts/main_menu.php"; ?>
<?php } else { ?>
<?php
// /* NOTE: deleted for purposes of the homepage
- require "../../template-parts/main_menu.php";
*/
?>
<?php } ?>With the menu in place, I tested the “home” link by pointing it to a PHP file.
<ul class="nav">
<li><a href="../../index.php" id="home_url">Back</a></li>
</ul>And that successfully linked to the site home page in PHP. On the Photo pages, the link searches 2 levels back and goes back to the homepage. That proves that the technique works and I can get web pages to navigate correctly.
But this isn’t the end of the story because… what if I’m in a different place in the hierarchy. It’s going to take some further additions to the code to make sure all links go where they’re supposed to no matter what page or level you’re on. But that’s where the $page_type variable comes in handy again.
// main-menu.php template part
if <div "#mysidenav" class="sidenav">
<?php if($page_type == "photo_page") { ?>
<div class="menu"> . . . </div>
<?php } else if ($page_type == "year_page") { ?>
<div class="menu"> . . . </div>
<?php } else { ?>
<p> Remaining Block </p>
<?php } ?>The technique at the moment is to use multiple versions of the same div class across multiple condition blocks.
This is what the code would look like searching 2 levels back (../../)
<?php if($page_type == "photo_page") { ?>
<div class="menu">
<span id="close_menu" class="close_menu" onClick="closeNav()" ...>X</span>
<div class="collapse-content" id="click-js-home">Home</div>
<ul class="nav">
<li><a href="../../index.php" id="home_url">Back</a></li>
</ul>
<div class="collapse-content" id="click-js-2023">2023</div>
... cut for brevity ...And 1 level back the document tree (../)
<?php } else if($page_type == "year_page") { ?>
<div class="menu">
<span id="close_menu" class="close_menu" onClick="closeNav()"...>X</span>
<div class="collapse-content" id="click-js-home">Home</div>
<ul class="nav">
<li><a href="../index.php" id="home_url">Back</a></li>
</ul>
<div class="collapse-content" id="click-js-2023">2023</div>For the menu links, I went in and changed the rest of the file extensions from HTML to PHP files.
Just to end this blog post on a point of note; I know that I’ve been using big blocks of code multiple times as I work through the project. For example, I don’t need to replicate the whole main menu 3 or 4 times to get different file paths as really, it’s unnecessary code bloat. Now I have an idea of how to refactor this, which I’ll go into later on in the project.
In Part 5, I’ll skip ahead a little bit and add the rest of the content to the rest of the pages, make sure everything is in order there, and then I’ll attempt to create a system to make it easier and extensible to add “new” markers to the website to new when new content is present on that page.
See you there!