gallery.php

<?
// This $files string is list of file names will be turned into an array.
$files = '
3.jpg
4.jpg
5.jpg
6.jpg
7.jpg
8.jpg
9.jpg
10.jpg
11.jpg
12.jpg
13.jpg
14.jpg
15.jpg
16.jpg
17.jpg
18.jpg
5009dc3dd2261.jpg
5009dd0a585b7.jpg
5009dd0e48d9c.jpg
5009dd6b34e94.jpg
5009dd06b66ac.jpg
5009dd7c442bf.jpg
5009dd121f81c.jpg
5009dd710df62.jpg
5009dd764a44d.jpg
5009dd06403c5.jpg
5009dd6585672.jpg
5009ddfc154c2.jpg
5009de023c0a2.jpg
5009de5017972.jpg
5009df9be3cb7.jpg
5009df69ea440.jpg
5009df645bda4.jpg
5009df7513fde.jpg
5009dfa6ab08e.jpg
5009dfa16e7f7.jpg
5009dfaa3d8c5.jpg
5009dfadc670b.jpg
5009ec9967c21.jpg
';
// Similar to javascript's string.split
// turns the $files string into an array.
$files = explode("\n", $files);
// Remove any blank entries from the $files array.
$files = array_filter($files);
#var_dump($files);

// $items is an array that will contain strings
// of html list items and anchors and images (<li><a><img>)
$items = array();

// Reusable string template:
/* removed all the stuff that could be replaced with modern css feautures like nth-child and object-fit */
/* removed things related to an older gallery overlay script used before the switch to magnific.js */
$itemFormat = '
<li>
	<a href="gallery/medium/%s">
		<img src="gallery/thumb/%s" alt="photo">
	</a>
</li>'."\n";

// Loop through all of the entries in the $files array and build the string of
// <li><a><img> for them and add them to the $items array
// by using the $itemFormat string template:
foreach($files as $key => $image)
{
	/* removed all the stuff that could be replaced with modern css feautures like nth-child and object-fit */
	$items[] = sprintf($itemFormat, $image, $image);
}

// Add an extra 6 empty items for a flexbox bug workaround:
$items[] = '<li></li><li></li><li></li><li></li><li></li><li></li>';

// Create a string of a <ul> tag containing a script tag containing all the <li> for the gallery.
// PHP's implode is the same as javascripts Array.join.
// The old JS would wait for the whole page load and then pull all the <li> out of the script tag
// and add them as actual children of the <ul> which would then allow the images to actually load.
$text = '<ul class="gallery"> <script type="text/waitforit">'. implode('', $items) . '</script></ul>';
?>

<!-- 
print the html that wraps this whole section and within that 
print the $text variable which contains all the <ul><li><a><img>...
-->

<div id="content">
	<h1>Photos</h1>
	<? echo $text; ?>
</div>


<!-- 
Most of this can be thrown away and replaced with a 
JS array or json containing the list of image file names
and then typical React stuff.

The gallery shows "thumb" versions of the images on the page and links to "medium" or "large" versions.
-->