Simple Html Image Gallery - From A Simple Linux Shell Script

Simple Html Image Gallery - From A Simple Linux Shell Script

7/22/2012 03:39:00 AM

Linux Html Image Gallery Creator

Create A "Rightclick-Select-Select" Html Image Gallery For Puppy Lucid51 Linux

[Updated: 23 August, 2013.
Please note that whether you copy/paste code or download the tar file, there is an important step which may not be obvious, and that is to change the browser executable name at the end of the exec script(lh_img_gallery) before running the install script(lh_img_gallery_install.sh). This step is important. Read on.]

Did you know how I used Font3dTemplates to create impressive wordart images for use at my website? Just take a look at the top of my Homepage. While busy with this task, I needed an image gallery to view all images in one page, and came up with this simple image gallery shell script[currently for offline use only].

All you need to do is to [rightclick] on an image directory and select [Open With] first and then select [lh_img_gallery] from the menu to create the image gallery where you can click on individual thumbnails to view them in full size in a new tab. Developed and successfully tested on Puppy Lucid51, this image gallery creator should work well on other linux and unix flavors as is or with minimum modifications [at least Usage 2:CLI described towards the end of this article].

Let me explain briefly what is involved in getting it done.

Start simple. Create the scripts first.

Script 1: The main script

#!/bin/sh
#==============================================================================
#lh_img_gallery - Linux Html Image Gallery Creator
#==============================================================================
#Usage:
#1.GUI: Open Rox file manager, rightclick on a directory with images, select
# [Open With] and then select [lh_img_gallery] to generate the image gallery
# and open it with your browser.
#2.CLI: You can also open a rxvt terminal and type
# /root/my-applications/lh_img_gallery/lh_img_gallery your-image-directory-with-full-path
# to run and view the gallery.
# eg. /root/my-applications/lh_img_gallery/lh_img_gallery /mnt/sda1/TRAV/tmpcd/CMisc
#==============================================================================
#Jerome Christopher
#www.sqlhtm.com
#==============================================================================
dir=$1
cd "$dir"
outfile=/root/my-applications/lh_img_gallery/lh_img_gallery.htm
echo '<html><body><div style="text-align:center;float:left">Linux Html Image Gallery<br>'>$outfile
ls *.jpg *.jpeg *.bmp *.png *.gif|while read pic; do
echo '<a href="'$dir/$pic'"'' target="_blank"''><img src="'$dir/$pic'" width="100" height="50" border="1"
style="padding-top:2px;padding-bottom:2px;padding-left:2px;padding-right:2px;
margin-top:5px;margin-bottom:5px;margin-left:5px;margin-right:5px;"></a>'
done>>$outfile
echo '</div></body></html>'>>$outfile
chrome "file:///$outfile"
exit

Note1: Change image types in red to add/remove image file types.
Note2: Change the thumbnail width and height in blue to resize thumbnails.
Note3: Change the browser in lightgreen to open your browser.

Script 2: The install script

#!/bin/sh
#==============================================================================
#lh_img_gallery_install.sh
#Install files at /root/my-applications/lh_img_gallery and make a link for
#lh_img_gallery at /root/.config/rox.sourceforge.net/OpenWith.
#Jerome Christopher
#www.sqlhtm.com
#==============================================================================
(
installdir=/root/my-applications/lh_img_gallery
mkdir $installdir
cp lh_img_gallery $installdir
cp lh_img_gallery_install.sh $installdir
cp lh_img_gallery_uninstall.sh $installdir
cp lh_img_gallery_check.sh $installdir
ln -s $installdir/lh_img_gallery /root/.config/rox.sourceforge.net/OpenWith
)>/tmp/lh_img_gallery_install.out 2>>/tmp/lh_img_gallery_install.out
geany /tmp/lh_img_gallery_install.out
exit

Script 3: The uninstall script

#!/bin/sh
#==============================================================================
#lh_img_gallery_uninstall.sh
#Uninstall the lh_img_gallery
#Jerome Christopher
#www.sqlhtm.com
#==============================================================================
(
installdir=/root/my-applications/lh_img_gallery
rm -f $installdir/lh_*
rmdir $installdir
rm -f /root/.config/rox.sourceforge.net/OpenWith/lh_img_gallery
)>/tmp/lh_img_gallery_uninstall.out 2>>/tmp/lh_img_gallery_uninstall.out
geany /tmp/lh_img_gallery_uninstall.out
exit

Script 4: The check script

#!/bin/sh
#====================================================
#lh_img_gallery_check.sh
#====================================================
(
ls -l /root/.config/rox.sourceforge.net/OpenWith/lh_*
cd /root/my-applications/lh_*
pwd
ls -l lh_*
ls -l /tmp/lh_img_gallery_install.out
cat /tmp/lh_img_gallery_install.out
ls -l /tmp/lh_img_gallery_uninstall.out
cat /tmp/lh_img_gallery_uninstall.out
)>/tmp/lh_img_gallery_check.out 2>>/tmp/lh_img_gallery_check.out
geany /tmp/lh_img_gallery_check.out
exit

Implementation Considerations

I remembered to make these scripts executable and changed permissions appropriately. I also was wondering how to run these easily. Luckily the Rox file manager has the [/root/.config/rox.sourceforge.net/OpenWith] folder configured in a way that will allow me to drop my executable links there. All I needed to do was to create a link for the [lh_img_gallery] script and drop it in the [/root/.config/rox.sourceforge.net/OpenWith] folder. Now I could rightclick on a directory, select [Open With] and then click on [lh_img_gallery] to generate and view the image gallery.

Install and Usage

Install

Method 1: Download tar

1.Download the tar file from sqlhtm.com here.
2.Go to a temporary directory[eg. /tmp] and extract the tar file there to create and copy files to the [/tmp/lh_img_gallery.install] directory.
3.Go to the /tmp/lh_img_gallery.install directory and change the file permissions[chmod 755 lh_*]
[Update:
4.Change the browser executable name (eg. chromium-browser, firefox, opera
etc with path) at the end of the executable script (lh_img_gallery) before
running the install script (lh_img_gallery_install.sh). This is important.]
5.Click on the /tmp/lh_img_gallery.install/lh_img_gallery_install.sh script to install.
6.Click on the /tmp/lh_img_gallery.install/lh_img_gallery_check.sh script to verify install.

Method 2: Copy/Paste

1.Create a test directory [mkdir /tmp/lh_img_gallery.install] and copy and paste all 4 scripts there.
2.Change to the /tmp/lh_img_gallery.install directory, change the file permissions[chmod 755 lh_*].

[Update:

3.Change the browser executable name (eg. chromium-browser, firefox, opera etc with path)

at the end of the executable script (lh_img_gallery) before running the install script

(lh_img_gallery_install.sh). This is important.]

4.Click on lh_img_gallery_install.sh to install.

Remember that the uninstall script will remove the install directory with the 4 scripts, the link, and the output file.

Uninstall

Click on /tmp/lh_img_gallery.install/lh_img_gallery_uninstall.sh to uninstall.

Usage

1.GUI: Open Rox file manager, rightclick on a directory with images, select [Open With] and then select [lh_img_gallery] to generate the image gallery and open it with your browser.
2.CLI: You can also open a rxvt terminal and type

/root/my-applications/lh_img_gallery/lh_img_gallery your-image-directory-with-full-path to run and view the gallery.

eg. /root/my-applications/lh_img_gallery/lh_img_gallery /mnt/sda1/TRAV/tmpcd/CMisc

Final Words

First looks may be deceptive, let's jump up to the top for another look at our Simple Linux Html Image Gallery. Not too bad for a 10-line shell script image gallery creator, I think! How about you?