Blog: Converting my Photography Site to PHP #5 (More Posts)
In previous editions of this blog, I took some time to make a plan for what parts of the HTML to use for template parts and what PHP variables I wanted to make use of. I demonstrated how I verified that they were included in each of my page templates. I’ve made sure the header and footer templates link to all the website assets which they need to work, which were the Lightbox assets, and JSON data files; all for the appropriate pages and only the files that are needed. And finally, I copied over all the content markup needed for just the main photo pages and sorted out their main navigation. So at this point, the project is very much on track but there’s still a lot to do boy in terms of the content and things behind the scenes.
By the end of this blog, things in the PHP project will start to take shape, with functioning JavaScript, datapoints, and content in place on most of the templates.
I started out by opening the template files for every page that can be accessed in the main navigation and added the same 2 variables, $page_identifier, and $page_type. Now all those pages are identifiable individually with the string value and each has the page type of a string, “photo_page“.
$page_identifier = "photo_canon_18_55_2020";
$page_identifier = "photo_canon_lockdown_2020";
$page_identifier = "photo_photos_all_2020"
$page_identifier = "photo_coming_2020"
$page_identifier = "photo_imageofday_2020"
$page_identifier = "photo_photos_all_alternative_2020"
$page_identifier = "photo_canon_18_55_2021";
$page_identifier = "photo_canon_18_55_2022";
$page_identifier = "photo_canon_75_300_2021";
$page_identifier = "photo_canon_2021";
$page_identifier = "photo_canon_18_55_2022";
$page_identifier = "photo_canon_75_300_2022";
$page_identifier = "photo_canon_18_200_2022";
$page_identifier = "photo_canon_2022";
$page_identifier = "photo_canon_18_200_2023";
$page_identifier = "photo_canon_75_300_2023";
$page_identifier = "photo_canon_2023";With the absense of any PHP warnings or errors on any of the pages above which, this is a sign that all of the template parts and variables are okay. And at this point, I’ll skip ahead and assume for the purposes of the blog that it was a quick and seamless process to add the content in the HTML files to the PHP ones and all be working beautifully first time around (It wasn’t quite, but I got there in the end).
Now I need to go back into the header and footer templates and update the condition blocks to find the script and lightbox files for all of the templates listed above.
// footer.php
// 2020
if ($page_identifier == "photo_canon_18_55_2020") { ?>
<script type="text/javascript" src="../../scripts/2020/canon_18_55.js"></script>
<?php } else if ($page_identifier == "photography_lockdown_2020") { ?>
<script type="text/javascript" src="../../scripts/2020/lockdown.js"></script>
. . .
<?php } else if ($page_identifier == "photo_canon_75_300_2023") { ?>
<script type="text/javascript" src="../../scripts/2023/canon_75_300.js"></script>
<?php } else if ($page_identifier == "photo_canon_2023") { ?>
<script type="text/javascript" src="../../scripts/2023/canon_2023.js"></script>
<?php } ?>Root directory templates
Let’s now focus on a few other templates. As well as the index.php template there are also some template files (and others) that exist in the root directory. Those are…
- selling.php
- social.php
- seaham.php
- coming.php
- comingsoon.php
- favicon.png
I added these into the PHP Hierarchy along with their HTML code. I’ll talk more about these in a future post.
A new Template Part (Social Media links)
Some of the templates in the project have another block of content that contain social media icons and go above the point where the photo categories are displayed. Here’s an example of this code below.
<h4 style="text-align: center;">Find more on Social Media
<a href="https://www.instagram.com/jonniegrieve" target="blank" alt="">
<img src="../../images/instagram.png" class="social-header" alt="" title=""> </a>
<a href="https://www.facebook.com/jgphotography1" target="blank" alt="">
<img src="../../images/facebook.png" class="social-header" alt="" title=""> </a>
</h4>One of the pages that have this is the template with the page identifier “photo_canon_18_55_2021“. But not every page has this set of links in the HTML site. So I’m going to try and make this easier to manage. First, I made it a template part of its own and replaced the code with a reference to that part. This will mean that wherever it appears in its place in the website, it will only need to be edited in one place.
<?php require "../../template-parts/social.php"; ?>At the top of each template file, I added a new variable $social which is intended to allow me to be able to switch the display of this element on and off.
$social = false;Handling the yearly “Photography Story” pages
Each of the following directories has an index.php template in its root; 2020, 2021, 2022, and 2023 directories. They are not in their own folder
This causes the usual issue with broken file paths because without added PHP, image element will always look 2 directories back in the file path for the source image. It’s hard coded into the template part (main_menu.php).
../../We want it to look, 1 directory back when we’re in one of these pages.
../This issue is fixed with the usual condition statements, making changes to the code based on the value of the page type ($page_type) variable.
<?php if($page_type == "photo_page" || $page_type == "year_2020") { ?>
<div class="menu"> ... </div>
<?php } else if($page_type == "year_page") { ?>
<div class="menu"> ... </div>
...
<ul class="nav">
<li>
<a href="https://www.facebook.com/jgphotography1" target="blank" id="">
Facebook Page
<img src="../images/facebook.png" alt="Link to Facebook" /></a>
</li>
<li>
<a href="https://www.twitter.com/jgphotography10" target="blank" id="">
Twitter
<img src="../images/twitter.png" alt="Link to Twitter" />
</a>
</li>
<li>
<a href="https://jg-photography10.picfair.com/" target="blank" id="">Buy on Picfair
<img src="../images/picfair.png" alt="Link to Picfair" /></a>
</li>
</ul>
<hr />
<?php } else if($page_type == "page_2020") { ?>
<?php } else } ?>
<?php } ?>That’s it for #5 of this post. The finish line for this project is getting closer.
In the next and 6th blog in the series, I’ll talk about one of the biggest cases for why I wanted to do this PHP conversion in the first place, which is how to use PHP to make it easier to use the main navigation links to mark out which pages contain recently uploaded or new photos.