A photo gallery website with auto synchronisation in 20 lines of code

I was wondering how short I could make it. The answer is surprisingly easy (for Mac and Linux). All you need is a web server with Apache. Find a folder on your computer that contains images, create a file named index.php and paste the following code:

<html lang=”en”>
<meta charset=”utf-8">
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1">
<body style=”background: #111111">
$dir = getcwd() . “/(YOUR_PICS_FOLDER_HERE)”;
$files = glob($dir . “/*.{jpg,png}”, GLOB_BRACE);
usort( $files, function( $a, $b ) { return filemtime($b) — filemtime($a); } );
foreach($files as $phpfile)
echo “<a href=’” .str_replace(“(YOUR_PICS_FOLDER_HERE_ABSOLUTE)”, “”, “$phpfile”) .”’ target=’_blank’>”;
echo str_replace(“(YOUR_PICS_FOLDER_HERE_ABSOLUTE)”, “”, “<img src=’$phpfile’ alt=’’ width=’22%’ height=’100%’ style=’vertical-align:middle; padding:10px; max-height:600px;’>\n”);
echo “</a>”;

Then create a file named sync.sh in the same folder and with the following content:

rsync -av --progress --inplace --delete --perms --chmod=o+rwx --include "*.jpg" --include "*.png" --include "index.php" --exclude "*" rsh "ssh -p(PORT)" (ABSOLUTE_LOCAL_FOLDER_PATH)/ (USER)@(SERVER):(ABSOLUTE_FOLDER_PATH_FOR_PICTURES)

In the terminal, navigate to your pictures folder and run sync.sh:

sh sync.sh

You can also automatically sync your files every time they are edited, added or removed. Open Automator and create a new Folder Action. Choose your folder, then search for the Run Shell Script action and add it to the workflow. Enter


Save the workflow, then go back to your folder, right click and choose Services, then Folder Action Setup. Your custom workflow should be at the bottom. Click Attach. Your folder will now sync automatically.

Like what you read? Give Stf a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.