I ran into a problem about a year ago,
when I first started taking pictures with a high megapixel camera.
The original conception behind storing my pictures, was to have them
hosted via a network service, like SMB or FTP. I found quickly that
the network would in no way be quick enough to serve 24M
pictures quick enough to be useful, and so access to family pictures
and photographic pursuits remained bound to our
workstation.
This last weekend, I finally got
around to solving it. The solution is to offer a web page with low
resolution images, each image being linked to a higher
resolution original. This allows any client device in our house to
get a quick preview of all pictures, as well as select one for a full
resolution download.
This is easy enough to write up in
html, but a home project like this never sees completion unless it's
sufficiently scripted to save hours of repetitive typing.
I set up an FTP service to handle the
full resolution images, and used apache to serve lower resolution
ones. The script accesses my file structure which looks like this:
2012
|
`-subject
|
`JPG
`RAW
|
`-subject
|
`JPG
`RAW
2011
|
`etc
Most people who keep lots of content
will have a method logical to themselves that could just as easily be
parsed with a script, so the below should be fairly adoptable.
First I define a few locations to work
with, including arguments so that the script doesn't need to be
manually modified on every run.
YEAR=$1 # This
is the first argument for the script
SUBJECT=$2 # This
is the second argument
# (The script will be called with
./publish_photos
year
subject)
# These don't need to be defined, as
$1
and $2
could be used
# at any time during the script,
this just improves readability.
#
# PHOTO_LOC
is the location of the full resolution picture
# currently mounted.
# Be sure that file permissions,
Selinux contexts, (if you are
# using Selinux contexts), and
firewall rules are set to allow
# access to both services.
PHOTO_LOC=/var/ftp/media/pictures/$YEAR/$SUBJECT/JPG
# FTP_PHOTO_LOC is the same
location, except as reached
# via url.
FTP_PHOTO_LOC=ftp://192.168.1.3/media/pictures/$YEAR/$SUBJECT/JPG
# HTML_DIR is the location that
smaller images will be
# in. They will be served by
Apache.
HTML_DIR=$YEAR\_$SUBJECT
# The first step is to use
ImageMagick's convert command
# to create our thumbnails, then
move them to a folder hosted
# by Apache.
echo
"Converting files."
for
file in $( ls $PHOTO_LOC )
do
convert $PHOTO_LOC/$file -resize 400x200 $PHOTO_LOC/ims-$file
echo
"$file converted."
done
sleep
3
echo
"Moving files."
mkdir
$PHOTO_LOC/$HTML_DIR
mv
$PHOTO_LOC/ims-* $PHOTO_LOC/$HTML_DIR
mv
$PHOTO_LOC/$HTML_DIR /var/www/html
# The next step is to create an
actual page serve the
# pictures that are now in
$PHOT_LOC/$HTML_DIR
# or /var/www/html/[year]_[subject]
#
# The script below will write a page
that will serve all of the
# pictures. Because actual names
of the pictures are the same
# except for an 'ims-' prefix, I can
strip that part away to get
# the original name (See `echo
$file | awk -F- '{print $2}'`).
#
# Three pictures will be printed
before breaking for a new line.
# This behavior can be changed by
raising from 3 to 4 the value
# in the statement `if
(( $i % 3 == 0 )); then
`
i=0
for
file in $( ls /var/www/html/$HTML_DIR/ );
do
echo "<a href=\"$FTP_PHOTO_LOC/$(echo $file | awk -F-
'{print $2}')\"><img src=\"$HTML_DIR/$file\"></a>"
>> /var/www/html/$HTML_DIR.html;
i=$((
$i +1 ))
if
(( $i % 3 == 0 )); then
echo
"<br>" >> /var/www/html/$HTML_DIR.html;
fi
done
# This is just bare bones, and can be
heavily modified to
# change the background of the
serving web page, include
# CSS pages, or more practical
improvements like sanitizing
# input.
The next step is easy enough that it
would take more time to write a script than just banging out a quick
landing page manually. You just need create an index.html file, and
create links to each page hosting picures. To make it friendly to
all of the touch devices that will inevitably fill your home in the
coming years, I recommend making custom pictures as the links on the
landing page as well.
Here's an example of my work flow
going forward. I open the command line as root and type:
publish_photos.sh
2012 20120325Sunrise
(20120325Sunrise
is the $SUBJECT name
as it's the folder name in my tree)
Given some time for the conversions to
take place, this will populate my /var/www/html
directory with a folder called 2012_20120325Sunrise,
with low resolution images, as well as creating a webpage called
2012_20120325Sunrise.html.
I'll take one picutre from the set:
Modify with gimp:
I'll save the new file as
sunrise_link_ims-DSC00733.jpg,
and populate my demo landing page with:
<a
href="2012_20120325Sunrise.html">
<img
src="sunrise_link_ims-DSC00733.jpg">
</a>
Here's the result when I navigate to
localhost using a web browser:
Once I click it the picture, it brings
me to a page that looks like this:
The share page loads quickly, and each
image provides access to full resolution versions with a single
click.
