Is there a way for me to upload my photos onto a server, and software will automatically read them and display them on a web page?

I’d like to dump hundreds of my photos in a folder on the server, then have those photos appear on a web page when I browse on desktop or smartphone. I don’t want to manually copy/paste hundreds of photos to do this, though. Is there software or a script that will grab the photos and form a gallery?

I’m assuming a plain vanilla html page because I’m already paying for my server, but if you think Wordpress or something else (free) will be ideal, let me know.

Well a simplistic one can be formed with a small level of PHP; it is a question of reading a directory for file names and generating a grid layout.

You’ve already 'copy/paste’ed the files if they’re in a folder on your server. So i’m not sure how you think you’re going to avoid that?

Plain HTML cant generate a dynamic page. It’s going to require some other language, if you want to avoid manual intervention every time you upload new images.

Here is a rough and ready validated web page web that does the job, I will leave it up to you to make it pretty:

<?php 
declare(strict_types=1);
error_reporting(-1);

$aPics = glob('*.*');

	$images = '';
	foreach($aPics as $id => $pic):
		$images .= "
			<a href='$pic'>
				<div class='pix'>
					<img src='$pic' alt='$pic'>
					<br>
					$pic
				</div>
			</a>	
		";		

	endforeach;	

?><!doctype html>
<html lang="en GB">
<head>
<title> Display images </title>
<style>
img  {width:120px;}
.pix {
	display: inline-block; 
	height: 240px; 
	margin: 1em;
	padding: 1em; 
	border:dotted 1px red;
}
.pix a:hover {background-color: #ccc;}
.mga {margin: 0 auto;}
.tac {text-align:center;} 
.w88 {width:88%; max-width:888px;}
</style>
</head>
<body>
<h1> Display images </h1>

	<div class="w88 mga tac">
		<?= $images ?> 
	</div>

<body>
<html>

Beware:
If there are about a hundred images the page will be very slow to load and get slower as the number of images increase…

Should this script be on an index.html page in the same folder as the images?

Anything else I need to know to make this work?

I’m sure I can use lazy loading code for the images so it only loads when the image scrolls into view.

If this page reads just one folder, then I can upload the images into different folders to divide them by category. I can then easily make a page that links to each of these pages by category.

The web page uses PHP and far easier to give it a .php extension because .html extension will display the web-page but not perform any server side PHP scripting.

The web page has been tested using an Apache Server and only reads the files in the same directory.

Wow, this works great! How do I code it so “index.php” is not included among the thumbnails?

1 Like

Try this and beware the script has not been tested:

foreach($aPics as $id => $pic):
  if('index.php' === $pic):
    // DO NOT INCLUDE
  else:
	$images .= "
	<a href='$pic'>
		<div class='pix'>
			<img src='$pic' alt='$pic'>
			<br>
			$pic
		</div>
	</a>	
	";		
  endif;
endforeach;	

Is the above saying to do nothing (don’t display it) if the file exists? Thanks!

Former script working here: https://stevehusting.com/inspiration/test/index.php

@WebSteve

Is the above saying to do nothing (don’t display it) if the file exists? Thanks!

Yes I prefer the script to be easily readable and prefer positive instructions rather than if( 'index.php. !== $pic ):

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.