Browser directroy listing with thumbnails

keirvt · 09-10-2020, 05:59 PM

I have a number of directories on a linux based web server that contain jpg images.

To distribute images to my friends I create a directory in /var/www/html/myphotos and put any images in there.

Using a browser, entering the web address and the directory name a list of the images is shown on the browser. The listing shows a "blank" thumbnail next to the filename. There is no html code required for this to happen. The problem is anyone wanting to access the picture cant see what the image is until the download it on their computer. I can name the files more intelligently than what the camera does automatically but this is time consuming.

Is it possible to create thumbnails and have a thumbnail image appear in browsers directory listing without having to write any html code?

boughtonp · 09-10-2020, 06:28 PM

See https://www.linuxquestions.org/quest...te-4175678123/

Actually, I think you're asking something slightly different - you don't want an image gallery, but you want a thumbnail as part of the auto-generated directory listing? If so, the first question is what web server are you using - Apache, nginx, or something else?

berndbausch · 09-10-2020, 06:32 PM

Browsers don't automatically display thumbnails. To do that, they would have to download the picture and generate the thumbnail locally. You could do that with Javascript, but I suppose that this would defeat your purpose of not writing code, and it would download everything anyway.

You can also generate the thumbnails in the same directory, so that there would be two files per picture, containing the full picture and the thumbnail. However, clicking on the thumbnail would then download the thumbnail, not the full picture.

Perhaps there is a solution for a protocol other than HTML. For example NFS or Samba, and you generate the thumbnails in a format that your friend's file explorer can handle.

keirvt · 09-10-2020, 07:24 PM

The web server is apache.
i can generate thumbnails and have the image and a thumbnail image using good old imagemagic, a one line command.

What makes me think it is possible is that the browsers directory listing has a thumbnail icon and if you right click one option is "view image". Clicking on "view image" brings up the same blank thumbnail image. Right click on the "thumbnail" and select properties its shows a list of thumbnail images that can be found /etc/share/apache2/icons.

Some entry somewhere must select which apache icon gets selected for the thumbnail. Perhaps it is possible to make that what I would like it to be.

I tried adding a thumbnail to the image file's exif data but that didn't work.

boughtonp · 09-11-2020, 07:28 AM

As per the Apache mod_autoindex link in my previous post, I would test with AddIconByType and DefaultIcon to see if either can be pointed at a script, and whether that script then receives the path to the requested image. (And hope that no caching takes place which means it only works for the first one.)

The output of the autoindex page is just HTML, so if the options aren't flexible enough you may be able to find and extract the script and customize it, but at that point I'd be tempted to switch to putting a suitable gallery script as directory index instead.

keirvt · 09-12-2020, 05:18 PM

The Apache AddIcons listing /usr/share/apache2/icons can be applied to directories but is largely for putting generic icons next to file types. It may be possible to overide this with a script as boughtonp suggests but may take a lot of time to figure that out.

Writing html/cgi to show a directory and icons and sub directories that can be explored is an involved business when the default directory display is almost what I want.

Another possibility is given by
https://perishablepress.com/better-d...with-htaccess/

Which shows how to customise default directory appearance including the icons. Bit of a learning curve. I will look at it more when I have enough time. It does show how to customise icons but it is not immediately clear if this method allows placing a specific icon for a specific file.

keirvt · 07-10-2021, 10:29 PM

Couldn't find any solution to the problem so wrote the following bash script.
Call the script with the directory name that contains images. It makes an index.html file that puts icons alongside the images.

Code:

#!/bin/bash
# Creates an index.html web page that displays image contents with a thumbnail image
codesrcdir='/var/www/html'
thisdomain="mydomain.org"

dname=$1
echo $dname

processFile() {
    extention=${img##*.}
    thumb=thumb-$img
    echo thumbname: $thumb
    echo Processing image:$img
    if [ $extention = "pdf" ]; then
       echo pdf image
       thumb=thumb_`basename $img .pdf`.jpg
       echo Thumb:$thumb
       gs -q -sDEVICE=png16m -dNOPAUSE -dBATCH -r35X36 -dPDFFitPage=true -dDEVICEWIDTH=185 -dDEVICEHEIGHT=185 -sOutputFile=$thumb $img

    elif [ $extention = "mp4" ]; then
       # ffmpeg not available avconv is almost the same
       # Generate icon image from first frames in video
       avconv -i $img -frames:v 1 tmpthumb.jpg

       # thumb image must end with image extention
       mp4image=`basename $thumb .mp4`.jpg
       echo mp4Img: $mp4image
       # Thumbnail image should have .jpg extention
       convert -thumbnail 80 tmpthumb.jpg $mp4image
       rm tmpthumb.jpg
       thumb=$mp4image
       echo mp4tumb: $thumb
    else
       if [ -f "$thumb" ]; then
          echo Thumb $thumb exists - skipping
       else
          echo "converting $img to thumb-$img"
          convert -thumbnail 80 $img $thumb
       fi
    fi

    if [ ! `echo $img|cut -c1-6` == "thumb-" ]; then
       modDate=`/bin/date +%Y/%m/%d-%H:%M:%S -d "$(/usr/bin/stat -c %x $img)"`
       filesize=`du -h $img|cut -f1`

       echo "         <tr><td><img src=$thumb alt=\"[img]\"></td><td> <a href=\"$img\">$img</a></td><td>${modDate}</td><td>${filesize}</td></tr>" >> $indexfile
    fi
}

# Length of argument string is greater than zero
if [ -n "$dname" ] # Directory for creating index
then
   echo "dname" is $dname
   cd $dname
   fullpath=`pwd`

   indexfile=$fullpath/index.html
   if [ -f $fullpath/index.html ]
   then
      # Check if re-creating index.hml is wanted, overwriting old file
      echo "Overwrite index.html in ${fullpath}? (y/n)"
      read ANS
      case $ANS in
         "Y"|"y")
            echo rewriting ${fullpath}/index.html
            > ${fullpath}/index.html;;
          *) echo "Index file preserved - exiting"
            exit;;
      esac
   fi

   # Prepare index file with headers
   cat ${codesrcdir}/cssheader.txt > $indexfile

   cat <<EOF >> $indexfile
   <body>
   <h1>Image Downloads Title</h1><html>

      <table width="800">
         <tr>
            <td><pre>                 </pre></td>
            <td width="200px"><a href="?C=N;O=A">Name</a></td>
            <td width="200px"><a href="?C=M;O=A">Last modified</a></td>
            <td width="200px"><a href="?C=S;O=A">Size</a></td>
            <td width="200px"><a href="?C=D;O=A">Description</a></td>
         </tr>
EOF
   if stat --printf='' *.jpg 2> /dev/null; then
      for img in *.jpg; do processFile; done
   fi
   if stat --printf='' *.JPG 2> /dev/null; then
      for img in *.JPG; do processFile; done
   fi
   if stat --printf='' *.png 2>/dev/null; then
      for img in *.png; do processFile; done
   fi
   if stat --printf='' *.mp4 2>/dev/null; then
      for img in *.mp4; do processFile; done
   fi
   if stat --printf='' *.pdf 2> /dev/null; then
      for img in *.pdf; do processFile; done
   fi

   cat <<EOF >>$indexfile
</table>
<pre><em>End of photo list - Sorry!<br />Add information and links!</em></pre>
<pre><a href="$thisdomain/fileservNew" title="Home">Return to Home Page</a>
<a href="$thisdomain/fileserv" title="Search">Search this Website</a>
</body>
</html>
EOF

echo "That's it"

else
   echo "Directory parameter required in calling this program."
   exit
fi