gallery improvements

Dockerfile.php

@@ -18,7 +18,8 @@
     ca-certificates \
     lsb-release \
     apt-transport-https \
-    curl
+    curl \
+    ffmpeg
 
 # setup nodejs repo
 RUN set -exu \

README.md

@@ -3,12 +3,16 @@
 See [https://github.com/wetfish/production-manifests](https://github.com/wetfish/production-manifests)
 for production deployment and full stack dev env info.
 
+TODO: doesnt work with rootless docker/podman, need to build and launch as root.
+
 For development, to run just this stack, do 
 ```bash
 cp mariadb.env.example mariadb.env
 # -> edit, change passwords and other info as needed
 cp php.env.example php.env
 # -> edit, change db info to match mariadb, other passwords as needed
+# for the uploader & gallery features
+chmod 777 ./upload; mkdir ./upload/thumbs; chmod -R 777 ./upload/thumbs
 
 # in dev env, run npm install manually
 cd wwwroot/src && npm install

wwwroot/functions.php

@@ -131,6 +131,8 @@ function ResizeImage($Filename, $Thumbnail, $Size)
     $Extension = $Path['extension'];
 
     $ImageData = @GetImageSize($Filename);
+    if(!$ImageData)
+        return false;
     $Width = $ImageData[0];
     $Height = $ImageData[1];
 
@@ -156,8 +158,12 @@ function ResizeImage($Filename, $Thumbnail, $Size)
         $Image = @ImageCreateFromGif($Filename);
     elseif(preg_match('/^png$/i', $Extension))
         $Image = @ImageCreateFromPng($Filename);
-    else
+    elseif(preg_match('/^webp$/i', $Extension))
+        $Image = ImageCreateFromWebp($Filename);
+    elseif(preg_match('/^jpe?g$/i', $Extension))
         $Image = @ImageCreateFromJpeg($Filename);
+    if(!$Image)
+        return false;
 
     if($ImageData[2] == IMAGETYPE_GIF or $ImageData[2]  == IMAGETYPE_PNG)
     {

wwwroot/gallery.php

@@ -52,6 +52,13 @@
     # the current working directory would be wrong
     # and likely to mess up relatave paths!
 
+    # Icons, placeholders for missing thumbnails
+$SVG_Icon_directory="<svg xmlns=http://www.w3.org/2000/svg viewBox='0 0 20 20'><path fill=#fff d='M2 3v14h16V5h-8L8 3z'/></svg>";
+$SVG_Icon_image="<svg xmlns=http://www.w3.org/2000/svg viewBox='0 0 20 20'><path fill=#fff d='M8 8l3 4.712L13 11l4 5H3zm8-2a2 2 0 1 1-4 0 2 2 0 1 1 4 0z'/></svg>";
+$SVG_Icon_text="<svg xmlns=http://www.w3.org/2000/svg viewBox='0 0 20 20'><path fill=#fff d='M4 3v2h12V3zm0 4v2h8V7zm0 4v2h12v-2zm0 4v2h6v-2z'/></svg>";
+$SVG_Icon_video="<svg xmlns=http://www.w3.org/2000/svg viewBox='0 0 20 20'><path fill=#fff d='M6 4l9 6-9 6z'/></svg>";
+
+
 if(the($Directory) == 'Empty')
     $Directory = str_replace($Path, '', getcwd());
 
@@ -62,9 +69,9 @@
 if($Pagination['is'] == 'On')
 {
 
-    if(is_numeric($_GET['page']))
-        $Page = $_GET['page'];
-
+    $Page = $_GET['page'] ?? 1;
+    if(!is_numeric($Page))
+        $Page = 1;
     if($Page < 2)
         $Page = 1;
 
@@ -100,20 +107,37 @@
 
 foreach($Files as $File)
 {
-    if(the($File) == 'Image')
+    $mimetype = mime_content_type("$Path/$Directory/$File");
+    $thumbnail_loc = "{$Thumbnail['Directory']}/{$Thumbnail['Size']}_{$File}";
+    if(preg_match("/^video/", $mimetype))
+        $thumbnail_loc = substr($thumbnail_loc, 0 , (strrpos($thumbnail_loc, "."))) . ".jpg";
+    if(preg_match("/^(image|video)/", $mimetype))
     {
         if($Generate == 'Thumbnails')
         {
-            if(!file_exists("$Path/{$Thumbnail['Directory']}/{$Thumbnail['Size']}_$File"))
-		    if(!ResizeImage("$Path/$Directory/$File", "$Path/{$Thumbnail['Directory']}/{$Thumbnail['Size']}_$File", $Thumbnail['Size']))
-			    continue;
+            if(!file_exists("$Path/$thumbnail_loc"))
+            {
+                if (preg_match("/^image/", $mimetype))
+                    ResizeImage("$Path/$Directory/$File", "$Path/$thumbnail_loc", $Thumbnail['Size']);
+                elseif (preg_match("/^video/", $mimetype))
+                    VideoThumbnail("$Path/$Directory/$File", "$Path/$thumbnail_loc", $Thumbnail['Size']); 
+            }
         }
-
-        echo	"<div class='GalleryContainer'>
-                    <a href='/$Directory/$File' rel='Gallery'>
-                        <img src='/{$Thumbnail['Directory']}/{$Thumbnail['Size']}_$File' class='GalleryImage' border='0' />
-                    </a>
-                </div>";
+        echo "<div class='GalleryContainer'><a href='/$Directory/$File' rel='Gallery'>";
+        if(file_exists("$Path/$thumbnail_loc"))
+            echo "  <img src='/$thumbnail_loc' class='GalleryImage' border='0' />";
+        else
+        {
+            if(preg_match("/^image/", $mimetype))
+                echo "  $SVG_Icon_image";
+            elseif(preg_match("/^video/", $mimetype))
+                echo "  $SVG_Icon_video";
+            elseif(preg_match("/^text/", $mimetype))
+                echo "  $SVG_Icon_text";
+            else
+                echo "  $SVG_Icon_directory";
+        }
+        echo "</a></div>";
     }
 }