421 reads

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

by Bob WrightNovember 17th, 2022

Too Long; Didn't Read

An easy display solution for sharing a large number of images. The gallery display uses a simple list format, each item appearing one after another vertically. Each image item displays the image file size, preview image, and preview image. The “Back” buuton is used to return to the gallery list. A repository for the ImageBank code is on <a href="https://://://.com/Bob-Wright/ImageBank" ImageBank contains about 4400 image files.

People Mentioned

Companies Mentioned

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

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 (i.e., images) provided by the site or page creator.

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>
<!--	<th>Date Modified</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