Jonnie Grieve Digital Media: Blog

Blog: Converting my Photography Site to PHP #7 (More Posts)

I intended for this to be the last blog in this series of 7, and it will be. But not necessarily the last for this particular project.  I’ve done a lot of work on this website in the last couple of weeks, but I felt it was needed because, in HTML format, the website was becoming too painstaking and labourious to maintain.

I could have made it a WordPress website but I thought simple PHP would be a better use case.

To summarise one more time, in previous editions of this blog, I took a look at the existing design and HTML, making a note of the template parts and PHP variables I’d expect to use in the project. I demonstrated how I verified the variable values and how I included them in the templates during development. I’ve made sure the header and footer templates linked correctly to all the website assets like the Lightbox and jQuery scripts were loaded according to the appropriate pages. I sorted out the main navigation so edits made in one location are reflected in the growing number of pages. And finally, I copied over all the content markup needed for just the main photo pages

This last blog is about doing some finishing touches to ensure the website is fit for viewing when uploaded to the Photography domain.

Doing the finishing touches

Before I did anything else, I copied over the final data, script, and content markup as a final update. As of now, any changes to the scripts and the data will be done in the PHP environment.

I then put together a final task list for this which includes

• Removing remove page var_dumps() from the page so development logs are removed from the browser.
• Sorting out the oversized images icons on “photographic story” pages (2020/index.php etc).
• Capitalise the text in the  “new” tags adjacent to the hyperlinks on the main navigation.
• Making sure the favicon file is visible on all pages on the site-
• coming.php template – repurpose as a maintenance page.
• Making sure browser console errors were dealt with.

I removed some PHP echos and var_dumps() from the template that I used for development purposes. So the pages are clear of those.

<?php var_dump($page_type);

And while I was there, I removed references to the $new_content variable so no PHP warning errors were generated.

$new_content == true;

Now that the stylesheet and scripts are all up to date, I can delve into the sass and stylesheet much more and start to fix problems within the PHP file.

When I was running through how the pages looked the Hartlepool Marina photo set was showing up in black which was not the right behaviour. Each photo set title should only render black when the user hovers the mouse over the image. Thankfully it was easy to put right

#adventure2022_febhartlepoolmarina {
  @extend %category_ids;
}

This change updates the stylesheet and makes sure the text was behaving the same way as the other elements.

Some of the pages generated console errors in the browser. And a common one that came up was “click_home has already been declared“. Generally, this occurred when the footer.php was bringing up 2 JavaScript files that contained the same code.

The error refers to the ID attribute value applied to the “home” link of the main navigation. Because of the way I set up the footer template

<script type="text/javascript" src="scripts/app.js"></script>

...
<?php } else if ($page_identifier == "photo_photos_all_2020") { ?>

<script type="text/javascript" src="../scripts/main.js"></script>

<?php } else if ($page_identifier == "photo_all_alternative_2020") { ?>

<script type="text/javascript" src="../scripts/all-alternative.js"></script>

<?php } ?>

The ID attribute was used in both the app.js and main.js scripts.

This allowed me to reduce the use of the condition statements as scripts/app.js can be used as a catch all” js for all pages.

<?php } else if ($page_identifier == "photo_canon_18_200_2023") { ?>

<script type="text/javascript" src="../../scripts/2023/canon_18_200.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 } else if ($page_identifier == "photo_photos_all_2020") { ?>

<script type="text/javascript" src="../scripts/all-alternative.js"></script>

<?php } else if ($page_identifier == "photo_all_alternative_2020") { ?>

<script type="text/javascript" src="../scripts/all-alternative.js"></script>

<?php } ?>

There was a file called lockdown.js that 2 of the templates were reliant on. But they are on 2 different levels in the hierarchy of the website. So any changes to the file path will adversely affect the other template.

For example, when I need to change the file path in the JSON() method from ‘../../’ to ‘../ that means the generated photos will not appear. It is one or the other ../ allows the files to show up on all-alternative but not on the 2020 photo page which needs ../../.

As a solution, I copied the data from the lockdown.js script and into a new file called all-alternative.js which goes directly into the scripts folder. Now the images will show up independently.

Some pages were showing the footer twice and stacked on top of each other.

I removed any instances of the footer element that is not in the footer template.

<footer></footer>

The coming.php template works better as a maintenance mode template page.  To repurpose this template quickly, I added a new class to the element with the class .coming_soon_container ad changed this class in the markup.

/* Coming Soon page container element */
.coming_soon_container,
.maintenance_mode_container {

  // styles
}

<section class="maintenance_mode_container">

</section>

The call to action buttons across the website.  But the buttonsd in selling.php needs to differentiate themselves from the set of buttons on the home page.

This is how I made that happen

Gone into the extend file but buttons… _btns.scss

I changed the style at the top of this file to serve as a base style.

%btn {
  // base styles go here
}

The way I differentiated the buttons in selling.php was to give the buttons a smaller font size.  So I nested the extend directives together and applied the font size to the %btn_selling extend directive.

%btn_selling {
  @extend %btn;
}

In selling.php, I gave the image elements a class of btn-selling

<a href="https://www.facebook.com/jgphotography1/l" 
class="btn-selling" 
target="blank" 
id="home_facebook_icon">On Facebook 
<img src="images/facebook.png" alt="" title="" /></a>

<a href="https://jg-photography10.picfair.com/" 
class="btn-selling" 
target="blank" 
id="home_picfair_icon">Buy on Picfair 
<img src="images/picfair.png" alt="Link to Picfair" /></a>

<ul> ... </ul>

<a href="https://www.facebook.com/jgphotography1/l" 
class="btn-selling" 
target="blank" 
id="home_facebook_icon">On Facebook 
<img src="images/facebook.png" alt="" title="" /></a>


<a href="https://jg-photography10.picfair.com/" 
class="btn-selling" 
target="blank" 
id="home_picfair_icon">Buy on Picfair 
<img src="images/picfair.png" alt="" title="" /></a>

<p></p>

Using a favicon file with PHP

../

../../

Give all the templates access to the favicon file

<!-- Favicon -->
<link rel="icon" href="
<?php if($page_type == "photo_page") {
echo "../../"; }
else if ($page_type == "year_page") {
echo "../"; } else if ( $page_type == "year_2020") {
echo "../"; } else if ( $page_type == "home_page" ) {
echo ""; }
?>favicon.png" type="image/png">

capitalise “new content” markers on main menu – html – php

I’ve talked a lot in this series about working on the website’s main navigation.  By adding content to the span elements I can indicate when a page as new content added to it.  To improve on the styling for this I added a style that changes text to upppercase which will gtake effect no matter what I typed in manually.

.new {
  color: #ffc635;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}

.

<div class="menu">
<span id="close_menu" class="close_menu" onClick="closeNav()" role="close-menu">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>
<ul class="nav">
<li>
  <a href="../../2023/canon_75_300/index.php">Canon 75-300mm</a>
  <span class="new">new</span>
</li>

I added a style rule below that adds a top and bottom margin social media template part.  There are still some instances where this is not being picked up, the CSS stack does need improving. But the idea is we get some separation on the top and bottom margin for the h4 element each time social media icons appear.

h4.center-social {
 margin: 15px auto;

}

On the seaham.php template, the height of the <div> element that contains the Slick Carousel was set to zero which was causing the image to overlap with the footer. This was a simple fix – set the height style rule to auto.

.photoset-seaham {
  ...
  div {
    padding: 0;
    margin: 0;
    // height: 0
    height: auto;

    a {
      img {
        width: 100%;
        border-radius: 10px;
        border: solid 3px black;
      }
  }
}

Conclusion

This blog series comes to an end at 7 posts.  I’ve posted the final outcome of it today.  The project continues to grow and expand as I add more photos. But what I have now is a setup that is now much easier to maintain.

A template for a header and a footer.

A template part for the main navigation and social media icons so these are editable in one place.

There are still some things I’d like to look at further.  Clean up the CSS stack and other templates to be put in place