Blog: Converting my Photography Site to PHP #3 (More Posts)
Welcome to #3 in this series of blogs. “Converting my photography site, which has outgrown itself into a PHP Based site.
I started by making a plan of the template parts, I might want to add to the blog and working out the page variables and what I’d use them for. By the end of the second 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.
The next task was to build the 2020 content pages. And this is where we start getting to the “meat and drink” of this project.
This website has a content hierarchy. There’s the root index.php file which is the homepage; There’s a set of directories that are organised by year (2020, 2021 etc); within these are a set of directories organised by lens type and in those directories are the main Photo pages.
It requires those files to look for the source scripts in different places in the site hierarchy which presents a problem. Any template file that does not exist in the root directory of the project cannot pick up the stylesheet as located in header.php. because it’s not in the same directory.
// TODO: Build Template:
<?php
require "../../inc/header.php";";
echo "<p>2020/lockdown/lockdown.php</p>";
require "../../inc/footer.php";I therefore need to find a way to make sure the stylesheet can be found regardless of which page I’m viewing.
So to try and fix this, I created two PHP variables. One variable is to identify the page type and the other is to give each template a unique identifier. Each of these variables has a string value and goes in every template file.
<?php
$page_identifier = "canon_18_55_2022"
$page_type="photo_page"I can get the page to look in a different path by writing a condition block that checks for a variable of the value “photo_page”. I can do it this way because each photo page always exists on the same level in the website hierarchy.
<?php
if ($page_type == "photo_page") { ?>
<link rel="stylesheet" type="text/css" href ="../../style.css" />
<?php } else if ($page_type = "page_2020") { ?>
<link rel="stylesheet" type="text/css" href ="../style.css" />
<?php } else if ($page_type = "year_page") { ?>
<link rel="stylesheet" type="text/css" href ="../style.css" />
<?php } else { ?>
<link rel="stylesheet" type="text/css" href ="style.css" />
<?php }
?>The condition statement checks the value of the $page_type variable and implements the code block if it finds the value that it needs. So if you’re on the Canon 18-55 photo page for the year 2020, the code will search 2 directories back for the PHP file.
- ../ – looks 1 directory back and then the matching file path.
- ../../ – looks 2 levels back and then the matching file path.
For reference, let me define the photo type values I’m going to want.
- $page_type = “home_page” – home page.
- $page_type = “photo_page” – 2 levels in from the root.
- $page_type = “year_page” – index.php files that exist in the second level directory
- $page_type = “page_2020” – They exist in the 2020 directory, but only 1 level in rather than having their own directory.
Scripts
I followed this example for the scripts, specifically for this scripts that go on my own server and not hosted on a content delivery network.
<?php
// get the main 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>
<?php } else if ($page_type == "page_2020") { ?>
<script type="text/javascript" src="../scripts/app.js"></script>
<script type="text/javascript" src="../assets/slick/slick.min.js"></script>
<?php } else if ($page_type == "year_page") { ?>
<script type="text/javascript" src="../scripts/app.js"></script>
<script type="text/javascript" src="../assets/slick/slick.min.js"></script>
<?php } else { ?>
<script type="text/javascript" src="scripts/app.js"></script>
<script type="text/javascript" src="assets/slick/slick.min.js"></script>
<?php } ?>We know already how far back in the website hierarchy we want to go to serve the files we need.
Adding my first Template Part
Now I’m going to add some content and implement my first template part.
I’m going to focus on the 18_55mm focal length page (2020) This has an extra set of document links that jump to specific parts of the page. So let’s start with a template part for that.
This allows me to keep the template small, even though header.php is also a common template…
And still focus on getting the file edited when I need to, knowing the header template won’t be affected.
<ul class="jump_links">
<li><a href="#latest">Latest</a></li>
<li><a href="#general">General</a></li>
<li><a href="#weather">Weather</a></li>
<li><a href="#pets">Pets</a></li>
<li><a href="#specific">Niche</a></li> <!---->
</ul>There’s a directory in the document root called “template-parts”. I’ve added a file to this called “jump_links.php”. I’ve added the above code to this. And I can reference this file in PHP using
<?php require "file path"; ?>The since the page is 2 levels back it requires me to….
<?php if( $page_identifier == "photo_canon_18_55_2020" ) { ?>
<?php require "../../template-parts/jump_links.php"; ?>
<?php } ?>Now each of the pages for the year 2020 has a header, a main navigation menu and JavaScript added to it.
In the next blog, I intend to finish building the rest of the content for the 2020 pages let’s demonstrate a file page of content for one of the photo pages.