Because I love reinventing the wheel, here is my way-too-simple photo gallery web page generator.
|
#!/bin/sh
|
|
# Startdate: 2023-07-13-5 16:48
|
|
# Purpose: make simple html gallery of images and directories
|
|
# Reference: tapestry-helper.sh
|
|
# Usage:
|
|
# Ensure no spaces in the filenames.
|
|
# Improve:
|
|
# add ".." links to any child directories.
|
|
INDIR=/mnt/public/www/gallery/2013-01-picasa-partial-dump
|
|
HTML_HEAD="${INDIR}/.header.html"
|
|
HTML_FOOT="${INDIR}/.footer.html"
|
|
DIRECTORY_ICON="/gallery/2013-01-picasa-partial-dump/folder.svg"
|
|
|
|
THUMBNAIL_SIZE=300
|
|
USE_THUMBNAILS=1
|
|
if test -n "${USE_THUMBNAILS}" && test "${USE_THUMBNAILS}" = 1 ;
|
|
then
|
|
mkdir -p "${INDIR}/.thumbnails"
|
|
fi
|
|
# use MAKE_THUMBNAILS=1 to actually run convert, which slows the process down. You disable MAKE_THUMBNAILS when just regenerating the html
|
|
test -z "${MAKE_THUMBNAILS}" && MAKE_THUMBNAILS=0
|
|
|
|
cd "${INDIR}"
|
|
# now that there are no spaces we can just do this
|
|
# begin dir loop
|
|
for word in $( find "${INDIR}" -mindepth 0 -type d ! -name '.thumbnails' ) ;
|
|
do
|
|
(
|
|
cd "${word}"
|
|
shortword="$( basename "${word}" )"
|
|
mkdir -p ./.thumbnails
|
|
rm -f ./index.html
|
|
exec 3>&1
|
|
exec 1>> ./index.html
|
|
eval "cat <<EOF
|
|
$( cat "${HTML_HEAD}" )
|
|
EOF
|
|
"
|
|
# make a .. link if not the parent directory
|
|
if ! test "${word}" = "${INDIR}" ; then
|
|
echo "<div class=\"item\"><a href=\"..\"><img src=\"${DIRECTORY_ICON}\" class=\"thumb\">..</a></div>"
|
|
fi
|
|
tds="$( find . -mindepth 1 -maxdepth 1 -type d ! -name '.thumbnails' ! -name '.*' )"
|
|
for td in ${tds} ; do
|
|
td_basename="$( basename "${td}" )"
|
|
#echo "<a href=\"${td}\"><img src=\"${DIRECTORY_ICON}\" class=\"thumb\">${td}</a>"
|
|
echo "<div class=\"item\"><a href=\"${td}\"><img src=\"${DIRECTORY_ICON}\" class=\"thumb\">${td_basename}</a></div>"
|
|
done
|
|
tfs="$( find . -mindepth 1 -maxdepth 1 ! -type d ! -name '*.ini' ! -name '.*.ini' ! -name '.*.swp' ! -name '*.sh' ! -name '*.html' ! -name '*.db' ! -name 'folder.svg' ! -name '.*' ! -name '*.css' -printf '%T@ %P\n' | sort -n | awk '{print $NF}' )"
|
|
for tf in ${tfs} ;
|
|
do
|
|
tf_in="${word}/${tf}"
|
|
tf_thumb_web="${tf}"
|
|
if test -n "${USE_THUMBNAILS}" && test "${USE_THUMBNAILS}" = 1 ;
|
|
then
|
|
tf_thumb="${word%%/}/.thumbnails/${tf%%.???}.jpg"
|
|
tf_thumb_web=".thumbnails/${tf%%.???}.jpg"
|
|
test "${MAKE_THUMBNAILS}" = "1" && convert -filter Lanczos -resize "${THUMBNAIL_SIZE}x${THUMBNAIL_SIZE}" "${word}/${tf}" "${tf_thumb}"
|
|
fi
|
|
echo "<a href=\"${tf}\"><img src=\"${tf_thumb_web}\" class=\"thumb\"></a>"
|
|
done
|
|
cat "${HTML_FOOT}"
|
|
exec 1>&3
|
|
)
|
|
done # end dir loop
|
My .header.html and .footer.html files are very basic.
<html>
<!-- started 2023-07-13 -->
<link rel="stylesheet" href="/gallery/2013-01-picasa-partial-dump/simple.css">
<head>
<title>${shortword}</title>
</head>
<body>
And footer just closes the html tags.
And the css.
.thumb {
max-width: 300px;
max-height: 300px;
}
div.item {
vertical-align: top;
display: inline-block;
text-align: center;
width: 120px;
}
/*
img {
width: 100px;
height: 100px;
background-color: grey;
}
*/
div.item img {
max-width: 220px;
max-height: 220px;
}
.caption {
display: block;
}
I just grabbed a random folder.svg from one of the GNOME Icon themes.
Comments