Through the confluence of a unique series of circumstances, the convoluted details of which I shall spare you, I ended up where I have a number of galleries that might have a few thousand images in them. I had written a “Gallery Builder” in the past that did a good job of building responsive grid-based galleries with scrollable modal full-screen displays for individual images. Features like captions and alt text descriptions for example. Still a good solution for several dozen images. Not for several thousand images, especially not for several thousand that are not going to have a need for those features. What I wanted to be able to do is just mass upload and display some of these images in an easy-to-use fashion, a nice way to have a sizable gallery of images loaded or shown fairly quickly in a clean uncluttered display list. You can view a demo ImageBank gallery that contains about 4400 image files at . https://syntheticreality.net/ImageBank Unlike my earlier “Gallery Builder” application, there is no facility for user image uploads or content. This package is designed for content ( images) provided by the site or page creator. i.e., The gallery display uses a simple list format, with each item appearing one after another vertically. Every image item displays the image filename, a preview image, and the image file size in columns, and the list can be sorted by the columns. Clicking an image results in a full-page display of that image, and the “Back” button is used to return to the gallery list. Here following is the basic PHP program for the gallery display. <!doctype html>
<html lang="En">
<head>
   <meta charset="UTF-8">
   <link rel="shortcut icon" href="./.favicon.ico">
   <title>Imagebank Contents</title>

   <link rel="stylesheet" href="./.style.css">
   <script src="./.sorttable.js"></script>
</head>

<body>
<div id="container">
	<h1>ImageBank Contents</h1>
	<h2>This is a collection of images that you may enjoy<br>or use under a <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons BY license.</a><br>A repository for the ImageBank code is on <a href="https://github.com/Bob-Wright/ImageBank">GitHub.</a></h2>
	<table class="sortable">
	    <thead>
		<tr>
			<th>Filename</th>
			<th>Preview</th>
			<th>Size</th>

		</tr>
	    </thead>
	    <tbody>

<?php

	// Adds pretty filesizes
	function pretty_filesize($file) {
		$size=filesize($file);
		if($size<1024){$size=$size." Bytes";}
		elseif(($size<1048576)&&($size>1023)){$size=round($size/1024, 1)." KB";}
		elseif(($size<1073741824)&&($size>1048575)){$size=round($size/1048576, 1)." MB";}
		else{$size=round($size/1073741824, 1)." GB";}
		return $size;
	}

	$hide=".";

	// Opens directory
	$myDirectory=opendir(".");
	// Gets each entry
	while($entryName=readdir($myDirectory)) {
	   $dirArray[]=$entryName;}
	// Closes directory
	closedir($myDirectory);
	// Counts elements in array
	$indexCount=count($dirArray);
	// Sorts files
	sort($dirArray);
	// Loops through the array of files
	for($index=0; $index < $indexCount; $index++) {
	// Decides if hidden files should be displayed, based on query above.
	    if(substr("$dirArray[$index]", 0, 1)!=$hide) {

	// Resets Variables
		$favicon="";
		$class="file";

	// Gets File Names
		$name=$dirArray[$index];

	// Separates directories, and performs operations on those directories
		if(is_dir($dirArray[$index]))
		{
				$extn="&lt;Directory&gt;";
				$size="&lt;Directory&gt;";
				$sizekey="0";
				$class="dir";
			// Gets favicon.ico, and displays it, only if it exists.
				if(file_exists("$name/favicon.ico"))
					{
						$favicon=" style='background-image:url($name/favicon.ico);'";
						$extn="&lt;Website&gt;";
					}
			// Cleans up . and .. directories
				if($name=="."){$name=". (Current Directory)"; $extn="&lt;System Dir&gt;"; $favicon=" style='background-image:url($name/.favicon.ico);'";}
				if($name==".."){$name=".. (Parent Directory)"; $extn="&lt;System Dir&gt;";}
		}
	// Output
	$extn=pathinfo($dirArray[$index], PATHINFO_EXTENSION);
	// Gets and cleans up file size
	$size=pretty_filesize($dirArray[$index]);
	$sizekey=filesize($dirArray[$index]);

	echo("
		<tr class='$class'>
			<td><a href='./$name' class='name'>$name</a></td>
			<td><a href='./$name'><img src='./$name' width=50% height=auto></a></td>
			<td sorttable_customkey='$sizekey'><a href='./$name'>$size</a></td>
	 	</tr>");
	   }
	}
//			<td sorttable_customkey='$timekey'><a href='./$name'>$modtime</a></td>
	?>

	</tbody>
</table>
</div>
</body>
</html> The second major element of the page construction is the CSS that defines the display layout shown here below. * {
	padding:0;
	margin:0;
}
body {
	color: #333;
	font: 2.4vw Sans-Serif;
	padding: 5vw;
	background: #eee;
}
h1 {
	font-size: 3.8vw;
	text-align: center;
	color: #fff;
	background-color: #2080ff;
	padding: 2vw 0 1.2vw 0;
	margin: 0;
}
h2 {
	font-size: 1.6vw;
	text-align: center;
	padding: 0 0 1.2vw 0; 
}
#container {
	box-shadow: 0 .5vw 1vw -.5vw rgba(0,0,0,0.5);
	position: relative;
	background: white; 
}
table {
	background-color: #F0F0F0;
	border-collapse: collapse;
	width: 100%;
	margin: 1.5vw 0;
}
th {
	background-color: #5e02fee8;
	color: #FFF;
	cursor: pointer;
	padding: .5vw 1vw;
}
th small {
	font-size: 1.1vw; 
}
td, th {
	text-align: left;
}
a {
	text-decoration: none;
}
td a {
	color: #663300;
	display: block;
	padding: .5vw 1vw;
}
th a {
	padding-left: 0
}
td:first-of-type a {
/*	background: url(./.images/file.png) no-repeat 1vw 50%;*/
	padding-left: .5vw;
}
th:first-of-type {
	padding-left: .5vw;
}
td:not(:first-of-type) a {
	background-image: none !important;
} 
tr:nth-of-type(odd) {
	background-color: #E0E0E0;
}
tr:hover td {
	background-color:#CACACA;
}
tr:hover td a {
	color: #000;
} The images displayed in the gallery list are not part of the gallery display program but are instead harvested from the directory of the website folder in which the images and the ImageBank code all reside. A repository of all the Imagebank code is available at . https://github.com/Bob-Wright/ImageBank Let me conclude by saying I hope that someone may find some of the images useful or worthwhile, and I hope the code provides a convenient way to share your own images. Also published here

IMAP Email Server on AWS

Building an MFA User Authentication System (Enrollment Component Code) Using Images

Nominated for 2022 - HackerNoon Contributor of the Year - Authentication

Too Long; Didn't Read

Boost your HackerNoon story @ $159.99! 🚀

ImageBank: An Easy Display Solution for Sharing a Large Number of Images

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Bibliography Generator From Browser Bookmarks: How It Works

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Fantastic JavaScript Projects for Beginners

11 Great Tips From A Guy Who Leveled Up From Intern To Dev

125 Stories To Learn How To Do X

A Bibliography Generator From Browser Bookmarks: How It Works

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Fantastic JavaScript Projects for Beginners

11 Great Tips From A Guy Who Leveled Up From Intern To Dev

125 Stories To Learn How To Do X

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps