Blog: Converting my Photography Site to PHP (More Posts)
One of my biggest and most enduring projects in recent years has been my photography website project. In this series of blogs I will be working on converting this large HTML website into a PHP-based website.
This is something that I’ve been thinking of doing for a long time. But now the website has spawned into its spanning 4th year of new content. As a result, it has grown too big to continue running it the way that I am at the moment. Using PHP Techniques makes a large project more efficient, extensible, configurable, and easier to maintain. And I want to explore by this example how this is so.
We can make a website like this easier to maintain by…
- Using PHP to create template parts for repeated areas of markup.
- Identify variables and have meaningful uses for them
- Where possible the page load of CSS, website assets, and reducing page load where possible.
It’s going to take a lot of thought and planning before I get to coding. So let’s start the planning phase by having a high level look at the pages users will see when they interact with the site and how those pages work together.
The first page type is the homepage, which contains a slick carousel as a showreel and some introductory text about what the site is for. It’s the gateway page for all the other pages on the site. This will be the index.php template and will be distinct from every other page on the site.
Looking at the <head> Element I will need some PHP page variables for the meta description, URL values, and other SEO features. I could isolate this in a template part but time will tell if this is strictly necessary. In fact, I probably will leave it as it is, in its place in the header.php template.
Template Parts
I will want a template part file for the footer, the content of which is the same on all pages.
<footer>
<p> © copyright message </p>
</footer>Below the element, the footer template will also contain a group of script and asset tags relevant to each page. They will be slightly different depending on which page you’re on. So, in the footer, what we’ll need is a condition statement based on a page identifier variable to ensure that only the right assets are loaded to the page.
It’d look something like this…
<?php
$page_identifier = "footer_main";
?>I will also need a template part for the site title in the header
So from the outset, that’s 2 template parts; one for the header.php template which contains everything down to the header element, and a footer.php template. One element that is consistent throughout all pages of the website is the site title. So that works very nicely for a template part of its own.
<header>
<h1>Jonnie Grieve Photography</h1>
</header>Next, we can start comparing the common elements of content within the various pages of the site.
The homepage is designed to be an entry point to a specific page as well as making every other page available in a section below. But, I’ll start by looking at the group of pages for the year 2020.
Now I can talk about how I’m going to handle the side menu. My plan at this stage is to have a template part that contains the hamburger button and the whole side menu. The idea is that I can use this template part and have a PHP condition statement in it that will check the value of a boolean variable; some condition statements that will help me mark out where pages have new content to see. In its HTML form, there are simply now too many pages to edit in a way that is not painstaking and time-consuming. So from now on each page will contain this navigation menu. This is ripe for inclusion in a template part.
<div id="open_menu" class="ham"> ... </div>
<div id="mySideNav" class="sidenav"> ... </div>I’ll use the variable with a boolean value to indicate where links have new content that has recently been uploaded, template by template.
<?php
$new_content = true
?>The next page type is a page for each year from 2020 up to 2023 where I’ve been adding content. It is the “bread and butter” of this site; where the photos I’ve added to the site can be found. There will be content for 2020 up to 2023.
Most pages will a set of horizontally aligned links in a <ul> element with a class of jump_links in the footer. which is a list of years; 2020, 2021, 2022, and into 2023. So as it exists on multiple pages, we could have a template part for that.
<ul class="jump_links">
<li><a href="../2020/index.html">2020</a></li>
<li><a href="../2021/index.html">2021</a></li>
<li><a href="../2022/index.html">2022</a></li>
...
</ul>
There also exists an element for social media links called “Find more on Social Media”. This is another good use case for a template part where any changes to social media links can be added in one place with a reference to the template part added on other pages.
<!-- Template Part -->
<h4>Find more on Social Media
<a href="" target="blank" alt="Social Media">
<img src="" class="social-header" alt=" title="" />
</a>
<a href="" target="blank" alt="Social Media">
<img src="" class="social-header" alt="" title="" />
</a>
</h4>Some 2020 pages also have further jump links referring to groups of photography. Another use for a template part might be to use that.
Template Part
- Selected
- Pets
- Wildlife
- Weather
- Nature/Outdoors
Jump links can be included on that part where pages where a condition matches the value of the page identifier variable.
The rest of the content should remain will remain specific to the main template file it is on but going forward I believe these are the main cases for using blocks of markup as their own template part.
Conclusion
So there we have it. Production on the new site version has begun and I have an idea now of my approach to using PHP for this project. By the time I’m finished, the directory structure will replicate that of the HTML version and look like this.
2020
> canon_18_55 (d) -> index.php
> lockdown (d) -> lockdown.php
all-alternative.php
coming.php
index.php
imageofday.html
photos-all.html
2021
> canon_18_55 (d) -> index.php
> canon_2021 (d) -> index.php
> canon_75_300 (d) -> index.php
index.php
2022
> canon_18_55 (d) -> index.php
> canon_18_200 (d) -> index.php
> canon_2022 (d) -> index.php
> canon_75_300 (d) -> index.php
index.php
2023
> canon_18_200 (d) -> index.php
> canon_2022 (d) -> index.php
> canon_75_300 (d) -> index.php
index.php
assets (d)
data (d)
images (d)
sass (d)
scripts (d)
coming.html becomes coming.php
comingsoon.html (php)
index.html (php)
seaham.html (php)
selling.html (php)
social.html (php)
style.css
style.css.mapIn the next blog, I’ll work on rebuilding the homepage, including adding any relevant template parts and making sure any needed styles and web assets require for this page are in place. See you there!